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

 

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

 

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

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

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

/*
Theme Name: wagndi
Theme URI: http://www.wangdi
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样式调用使用以下代码替换。

<?php bloginfo( 'stylesheet_url' ); ?>

 

第五步：修改index.php中的图片的路径，在原有路径前面添加<?php bloginfo('template_directory'); ?>/，来解决WordPress模板图片文件不显示的问题。

<?php bloginfo('template_directory'); ?>/

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

 

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

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

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

，