如何快速把一个网站保存到本地,并且转为Wordpress 主题呢?今天和大家分享一下基础教程,适合想使用html转WordPress主题的同学,或者有仿站需求的。回到正题,网站扒皮我们可以通过浏览器另存为到本地,这是最简单的方法。但有些资源加载在 Cdn 或者其他子域名上,我们就需要借助软件来帮助我们完成扒皮。

获取网站html代码

Mac端:SiteSucker Pro

SiteSucker 是一款只需输入网址即可自动将网站下载到本地的应用。SiteSucker 可以将目标站点的目录结构、html 网页、图像、PDF、样式表、音视频等文件异步复制到本地。SiteSucker 可用于制作网站的本地副本使您可以脱机浏览站点(需要注意的是:对于动态网站以及使用CDN的网站下载后的效果可能不是那么好)。只需输入一个URL,按下回车键,SiteSucker 就可以下载整个网站,就是这么简单!

08070458 E9c055f929

Windows端:小飞兔

小飞兔下载是一款下载网站素材文件的软件,主要是用来快速搭建网站、深层分析网站、网站克隆、离线浏览等,免费版够用了。

1

整理html代码

通过以上工具,我们把目标网站静态资源下载后,需使用代码格式化工具把 html代码进行代码格式化(美化)。这里推荐使用:JS/html代码格式化

接下来把整理好的.html文件,放到 PHP 环境中运行(推荐Xampp),并且将所有.html 后缀文件改为 文件名.php

拆分代码

在拆分代码前,我们可以能遇到jscss,以及图片字体图标报错,需要把所有静态文件都补充好确保页面没有错误。

拆分代码是为了避免使用重复代码,例:

<!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.phpfooter.php 文件的内容,那么我们的 index.php 内的代码则为:

<?php include 'header.php'; ?>

	<header>	
		<h1>揭雾</h1>		
	</header>	

	<h1 class="text-center">揭开雾,不迷路</h1>

<?php include 'footer.php'; ?>

这就是基本的拆分html代码转为php的教程了,如果你没有看懂,建议你先去学习html和css基础后再来试一次。

 

 

本周累计查询: -166


准确成功率:95.4%

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注