WordPress自定义模板开发1——将静态的HTML模板转换为Wordpress主题

 

前提准备:已经写好HTML页面。

WordPress自定义模板开发1——将静态的HTML模板转换为Wordpress主题_第1张图片

 

第一步:在网站根目录里双击打开文件夹wp-conten,再双击打开文件夹themes,在里面新建一个文件夹(命名不要出现中文等特殊符号),给自己的模板命名,这里起名为shisai。

WordPress自定义模板开发1——将静态的HTML模板转换为Wordpress主题_第2张图片

第二步:将自己制作的静态页面内容全部移动到模板文件夹shisai里面,然后将原有的css文件名称修改为style.css,将原有的html文件名称修改为index.php,style.css是WP程序唯一能识别的CSS名称。

WordPress自定义模板开发1——将静态的HTML模板转换为Wordpress主题_第3张图片

第三步:修改style.css文件夹,在DW软件中打开该文件,然后再STYLE.CSS的最上方添加以下的版权信息。这个版权信息会显示在网站后台。

WordPress自定义模板开发1——将静态的HTML模板转换为Wordpress主题_第4张图片

/*
Theme Name: wagndi
Theme URI: http://www.wangdi.org
Description: It's a theme create by wagndi
Version: 1.0
Author: wangdi
Author URI: wangdi
Tags: custom header, fixed width, two columns, widgets
*/

第四步:在DW软件中打开index.php文件,将页面中的css样式调用使用以下代码替换。

WordPress自定义模板开发1——将静态的HTML模板转换为Wordpress主题_第5张图片

 

第五步:修改index.php中的图片的路径,在原有路径前面添加/,来解决WordPress模板图片文件不显示的问题。

/

WordPress自定义模板开发1——将静态的HTML模板转换为Wordpress主题_第6张图片

引用图片较多时,可以使用CTRL+F,查找替换。

 

第六步:在网站后台【外观】——【主题】,可以查看自己心添加的主题。

WordPress自定义模板开发1——将静态的HTML模板转换为Wordpress主题_第7张图片

注意观察,系统提供的模板,都有缩略图,而我们的模板却没有。

解决办法:主题文件来下面放一个缩略图图片,缩略图的名字必须是:screenshot.png或者screenshot.jpg。这个模板缩略图也会在网站后台显示出来。

WordPress自定义模板开发1——将静态的HTML模板转换为Wordpress主题_第8张图片

WordPress自定义模板开发1——将静态的HTML模板转换为Wordpress主题_第9张图片

 

你可能感兴趣的:(世赛-网页设计大赛)