wordpress主题制作教程（二）基础模版文件以及单页面制作

上一篇我们简单的讲解了下基础的文件, 那么本篇将会展示一个最简单的主题模版文件, 同时教大家制作一个单页面的主题, 此外所有的代码将会放到GitHub上, 具体点击原文即可. 需要注意的是本系列教程将不会按照其他教程一样详细讲解每一个文件，而是从最基本的需求开始，由简入繁一步步拓展需求，这样最大程度的实现页面定制自由，而不被wordpress默认的主题限制想象力。

基础模版文件

Wordpress 的主题理论上来说只需要index.php和style.css, 所以本次将只使用这两个文件来制作一个最简单的主题.

首先进入主题文件夹, 一般都是在/wp-content/themes/里面, 我们新建个主题文件夹，例如cool, 然后在文件夹里新建个style.css,这是用来存放主题文件信息和页面样式的。一般来说，页面不够多的话，所有的css代码都放里面就行.

然后在css文件的头部放上如下信息:

/*Theme Name: 这里填主题名称

Theme URI: 这里填主题介绍的网址，没有就填你的博客网址吧

Description: 这里填主题的简短介绍

Version: 版本号

Author: 作者名

Author URI: 作者的网址

Tags: 标签，多个用半角逗号隔开

*/

上面的信息随意填写即可,这样就会在后台页面显示你的主题信息了.

再新建个index.php,这个是默认的主页, 里面先空着吧.

然后进后台就能看到主题了.

但是还要预览图啊, 而且其他自带的主题如果不想要的话也可以直接删除文件夹了, 我们上传个png图片, 重命名为screenshot.png, 大小随意吧, 以后做好了主题截个图就行, 现在随便放张图就OK.

效果如下:

现在主题能显示了, 那我们就启用主题然后往index.php添加东西吧.

首先我们建个最简单的html页面, 然后将html代码全都放进去index.php, 代码如下:

beta

Hello, cool

然后我们打开网页预览下, 就发现首页就是html的效果了.

如果你暂时没想好要怎么做动态的,那就直接写静态的html代码然后粘贴进去即可.这样纯粹当个静态站也是可以的.

但是我们想要的自然不是这么简单的，需要动态显示其他文章啥的，于是我们先了解下主循环。

主循环函数的主要作用就是动态获取数据。比如说，标题，内容等等，一般需要动态展示页面的都需要加上主循环函数，而写死的静态页面则不用加上，如果你不清楚要不要用，或者怎么用，那就每个页面都加上吧，反正没坏处。

我们实践下新建几个文章，然后在主页循环显示吧。

文章建好之后, 我们可以根据分类目录调用，也可以根据标签调用，还能通过各种自定义方式来调用，下面一一展示。

而调用的函数，我们可以使用query_post()，也可以使用wp_query，还可以使用get_posts()等等，这些各有优劣，开始就使用操作最简单的query_post()吧。

我们在body里面插入以下的php代码:

'orderby' => 'time',

'order' => 'ASC',

'post_type' => 'post',

);

query_posts($query_post);

while(have_posts()):the_post(); ?>

array()里面则是具体的参数了，比如说文章类型，排序方式，显示数量，筛选的方式等等，上面就是选取了post类型的，然后按照时间排序。实际上可用的参数非常多,这个就自己去看文档了,但是基本上能够实现按照自己的心意来筛选所有的文章.

while 则是开启循环体, the_title()就是文章的标题，the_content()就是文章的内容，这些也是有对应的函数，想要什么直接百度搜索相应的函数就好，xxx是php的语法，这样写可以和html混在一起，十分方便。

预览的效果如下,这样就把文章的标题全都打印出来了.

然后我们加点样式来调整下, 而CSS样式有两种添加方式,一种就是直接在本页面添加个, 然后在里面直接写css,另一种则是使用外面的CSS文件, 将所有的CSS代码写在根目录的style.css里,.

第一种十分简单, 而第二种由于css放在主题目录下，所以实际引用的地址则是

域名/wp-content/cool/style.css

但是用不着这么麻烦，直接使用如下php代码即可获取当前主题路径，然后加上个/style.css即可，其他路径的也是一样修改。

所以的css引用代码就是:

/style.css">

写好了样式之后,预览下:

差不多了,有点博客网站的样子了啊,但是不够啊,所以我们再把文章的内容输出来, 然后用html规划下.最后的效果如下:

这样我们就完成了一个简单的主页了, 当然十分的简陋,但是从功能上来说, 已经OK了, 下期我们再讲解如何将主页分解成多个php文件,同时制作文章的展示页面.