如何快速把一个网站保存到本地,并且转为Wordpress 主题呢?今天和大家分享一下基础教程,适合想使用html转WordPress主题的同学,或者有仿站需求的。回到正题,网站扒皮我们可以通过浏览器另存为到本地,这是最简单的方法。但有些资源加载在 Cdn 或者其他子域名上,我们就需要借助软件来帮助我们完成扒皮。
获取网站html代码
Mac端:SiteSucker Pro
SiteSucker 是一款只需输入网址即可自动将网站下载到本地的应用。SiteSucker 可以将目标站点的目录结构、html 网页、图像、PDF、样式表、音视频等文件异步复制到本地。SiteSucker 可用于制作网站的本地副本使您可以脱机浏览站点(需要注意的是:对于动态网站以及使用CDN的网站下载后的效果可能不是那么好)。只需输入一个URL,按下回车键,SiteSucker 就可以下载整个网站,就是这么简单!
Windows端:小飞兔
小飞兔下载是一款下载网站素材文件的软件,主要是用来快速搭建网站、深层分析网站、网站克隆、离线浏览等,免费版够用了。
整理html代码
通过以上工具,我们把目标网站静态资源下载后,需使用代码格式化工具把 html代码进行代码格式化(美化)。这里推荐使用:JS/html代码格式化
接下来把整理好的.html
文件,放到 PHP 环境中运行(推荐Xampp),并且将所有.html
后缀文件改为 文件名.php
拆分代码
在拆分代码前,我们可以能遇到js
,css
,以及图片字体图标报错,需要把所有静态文件都补充好确保页面没有错误。
拆分代码是为了避免使用重复代码,例:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> wp-wu.com </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<header>
<h1>揭雾</h1>
</header>
<h1 class="text-center">揭开雾,不迷路</h1>
<div id="main">
<p>网页内容</p>
</div>
<footer>
<p> wp-wu.com </p>
</footer>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="Hello World"></script>
</body>
</html>
我们需要把 </header> 以前的代码剪切放到一个 header.php
的文件里,把 <footer> 以后的代码都放到 footer.php
文件里,index.php
文件里只保留剩下的代码,即:
<div id="main">
<p>网页内容</p>
</div>
然后在 index.php
调用 header.php
和footer.php
文件的内容,那么我们的 index.php
内的代码则为:
<?php include 'header.php'; ?>
<header>
<h1>揭雾</h1>
</header>
<h1 class="text-center">揭开雾,不迷路</h1>
<?php include 'footer.php'; ?>
这就是基本的拆分html代码转为php的教程了,如果你没有看懂,建议你先去学习html和css基础后再来试一次。