这是wordpress cms主题制作的第一课。
首先,我们来看做一个cms主题必须准备好的一个页面,我们准备好了3个静态页面:
[mem]
[/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> </div>
还有一个要替换的地方,下面这个图片的路径也是不对的,需要把:
src="front_res/com_tag/head-mark3.gif"
替换为
src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif"
这样首页的制作就基本差不多。
转载请注明:虚坏叔叔 » WordpressCMS主题开发01-首页制作