WordpressCMS主题开发01-首页制作

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

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

​ ​xuhss_cms​​

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

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

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

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

​ ​cms备份 - WordpressCMS主题开发01-首页制作​​

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

​ ​wp主题 - WordpressCMS主题开发01-首页制作​​

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

我们进入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">
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
      
      

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

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

登录后复制

      
      

       
       <div class="top cbody">
      
      
      
      

       
       
1.
      
      

所以，我们在三个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: http://www.xuhss.com
       
       
Description: CMS主题
       
       
Author: MrBang
       
       
Author URI: http://www.xuhss.com
       
       
Version: 1.0
       
       
Tags: cms, xuhss
       
       
*/
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
      
      

接下来，我们需要在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">
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
      
      

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

​ ​wordpress主题 - WordpressCMS主题开发01-首页制作​​

用utf-8 无bom模式保存

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

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

所以需要对它进行转换：

You must be logged in to view the hidden contents.

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

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

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

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

修改完成后，就像这样：

​ ​wordpress主题初始样式 - WordpressCMS主题开发01-首页制作​​

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

因为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">
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
      
      

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

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

登录后复制

      
      

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

       
       
1.
      
      

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

登录后复制

      
      

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

       
       
1.
      
      

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

登录后复制

      
      

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

       
       
1.
      
      

替换为

登录后复制

      
      

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

       
       
1.
      
      

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