这是wordpress cms主题制作的第一课。

首先，我们来看做一个cms主题必须准备好的一个页面，我们准备好了3个静态页面：

[mem]

xuhss_cms

[/mem]

可以先打开index.html，这就是我们要开发的wordpress主题的cms样式。

也就是说，我们会把它转换为wordpress主题。

我们再来看看它的内页和列表页面-article.htm和list.htm

为了方便对照和问题的查找，备份一下模板页面是最安全的，备份的文件命名为： wp_xuhss_cms

那接下来，我们把这个备份的模板放置到我本地搭建好的wordpress主题文件夹中：

如何把静态页面制作成主题

我们进入wordpress主题后，最基本的2个文件，一个是style.css，另一个是index.php。

首先我们来制作：index.php

复制index.html，重命名它为index.php，打开它，我们发现这里调用了3个css：

    <link href="front.css" type="text/css" rel="stylesheet" />
    <link href="whole.css" type="text/css" rel="stylesheet" />
    <link href="layout.css" type="text/css" rel="stylesheet" /><script type="text/javascript">

有多个CSS文件的时候，用哪个文件作为style.css？

判断的方法非常简单，在首页里往下找，找到第一个div所对应的class：

<div class="top cbody">

所以，我们在三个css文件中，分别查找 .top

最终，你会发现，它位于 layout.css 中。

通过.top可以快速的找到整个网站布局的css，一般我们把整个网站用来布局的div，它所对应的css文件作为style.css。

其他的css可以作为次要的css。确定好之后，我们就直接在主题文件夹下，把layout.css改为style.css。

接着我们需要给style.css添加版权信息，把以下代码放置style.css的最顶部就可以。

/*
Theme Name: 虚幻私塾CMS主题
Theme URI: https://www.xuhss.com
Description: CMS主题
Author: MrBang
Author URI: https://www.xuhss.com
Version: 1.0
Tags: cms, xuhss
*/

接下来，我们需要在index.php中，增加对style.css的调用。

    <link href="front.css" type="text/css" rel="stylesheet" />
    <link href="whole.css" type="text/css" rel="stylesheet" />
    <link href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" rel="stylesheet" /><script type="text/javascript">

现在，我们登陆wordpress后台，找到主题文件夹刷新：

用utf-8 无bom模式保存

我们可以找到刚添加的wordpress主题。

但是我们发现了一个问题，这里乱码了。这是因为css文件的编码格式并不是utf-8。

所以需要对它进行转换：

回到wordpress后台，再刷新一下，就正常了。

点击“启用”，来启用主题。

启用好之后，来到网站的前台：

你会发现，同样出现了乱码，所以还需要把 index.php 的编码改为utf-8

修改完成后，就像这样：

和我们静态页面的差距还是比较大，这是为什么呢？

因为index.php 调用了3个css，但是我们只提供了一个style.css的调用。

另外2个css并没有找到，所以我们需要把路径补充完整。

调用wp主题的路径也有一个模板标签：<?php bloginfo('template_directory'); ?>

最后修改为这样：

    <link href="<?php bloginfo('template_directory'); ?>/front.css" type="text/css" rel="stylesheet" />
    <link href="<?php bloginfo('template_directory'); ?>/whole.css" type="text/css" rel="stylesheet" />
    <link href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" rel="stylesheet" /><script type="text/javascript">

来到网站的前台，你会发现样式就好看多了。但是有些图片还是没有加载出来。

右键检查最顶部的图片，你会发现它的路径是不对的：

<img height="50" alt="网上如何赚钱" width="200" src="img/logo2.gif">

和之前一样，也要插入主题的路径：

<div class="toplogo"><a href="#"><img height="50" alt="网上如何赚钱" width="200" src="<?php bloginfo('template_directory'); ?>/img/logo2.gif" /></a>&nbsp;&nbsp;</div>

还有一个要替换的地方，下面这个图片的路径也是不对的，需要把：

src="front_res/com_tag/head-mark3.gif"

替换为

src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif"

这样首页的制作就基本差不多。

转载请注明：虚坏叔叔 » WordpressCMS主题开发01-首页制作