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

柔情只为你懂 2022-10-01 14:46 362阅读 0赞

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

![20190612152324125.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 2][]

/*
    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样式调用使用以下代码替换。

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 3][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 4][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 5][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 6][]

，![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 7][]

[20190612152324125.png]: /images/20220118/23d4cd07fb354509a140a3c91c4e07f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70]: /images/20220118/5349495fa3f949a0bed0e427e13706da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 1]: /images/20220118/32aae97e097e4ae6bdfb123a78bf2241.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 2]: /images/20220118/96bb15bca1ef4085bf4a0c9ac27febcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 3]: /images/20220118/ed5906b7b0d540948eaed59e4d9cff79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 4]: /images/20220118/55419177eba041049c24242dc4390d78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 5]: /images/20220118/46e4649c939143e4b423a58c446ba51e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 6]: /images/20220118/1d519bcdb9834a27805035f470830221.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 7]: /images/20220118/38162646b1974b9fae7759d7f5e4a969.png