首页 > 主题开发 > cms主题开发 > WordpressCMS主题开发01-首页制作
2018
05-06

WordpressCMS主题开发01-首页制作

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

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

You must be logged in to view the hidden contents.

可以先打开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">

有多个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后台,找到主题文件夹刷新:

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

用utf-8 无bom模式保存

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

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

所以需要对它进行转换:

转换style.css的编码 - WordpressCMS主题开发01-首页制作

回到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">

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

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

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

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

 

 

最后编辑:
作者:虚幻
这个作者貌似有点懒,什么都没有留下。

留下一个回复