如何将静态html网页转成wordpress模板
本课程视频是VIP会员课程,学习请进入VIP学习区。
我们如果想制作出自己想要的网站版面,首先需要自己画一个网页版面的效果图,然后通过DIV+CSS将图片写成HTML静态页面。如果你不懂美工,不会画效果图,也可以在网上找一些HTML静态页面。
得到HTML静态页面之后,如何将这些静态页面转化成WP动态模板呢?下面讲一下如何将静态的html模板转换为wordpress主题。
第一步:将静态页面的CSS文件移动到模板文件夹下,然后将它重命名为style.css.这个名字是WP程序唯一能识别的CSS名称。
第二步:我们制作出的模板,属于我们的劳动成果,需要有我们自己的版权信息,所以在STYLE.CSS的特别上方添加以下的版权信息。这个版权信息会显示在网站后台。
/*
Theme Name: 学做网站论坛
Theme URI: https://www.xuewangzhan.net
Description:学做网站论坛 WP网站主题
Author: 学做网站论坛
Author URI: https://www.xuewangzhan.net
Version: 1.0
Tags: white, blog,学做网站论坛, blue
*/
Theme Name: 学做网站论坛
Theme URI: https://www.xuewangzhan.net
Description:学做网站论坛 WP网站主题
Author: 学做网站论坛
Author URI: https://www.xuewangzhan.net
Version: 1.0
Tags: white, blog,学做网站论坛, blue
*/
第三步:网站模板后台缩略图的添加。在主题文件来下面放一个缩略图图片,缩略图的名字必须是:screenshot.png或者screenshot.jpg。这个模板缩略图也会在网站后台显示出来。
第四步:将HTML静态页面中的index.html重命名为index.php.并且用Dreamweaver CS6破解版打开index.php文件,将页面中的css样式调用使用以下代码替换。
Style.css路径调用:<?php bloginfo( 'stylesheet_url' ); ?>
第五步:修改index.php中的图片的所有相对路径为WP从不路径,来解决图片不显示的问题。
<?php bloginfo('template_directory'); ?>
如果还出现有些图片不显示的话,要修改style.css中的路径,因为这是的style.css是从images文件夹中拿出来的,路径已经改变了。