经过前面几讲的学习，我们已经了解了footer.php 、header.php 、style.css 的基本知识。今天要讲一下最重要的一个文件index.php。

在index.php中主要的就是取出文章相关的信息，这也是页面里的主体信息。我们在header.php里有提到过这个文件，还写入了两行代码。接下来我们重新写入如下代码，并且讲解这里面用到的模版函数。

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class=”post” id=”post-<?php the_ID(); ?>”>

<h2><a class=”title” href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h2>

<div class=”info”>

<span class=”date”><?php the_time() ?></span>

<?php if ($options['author']) : ?><span class=”author”><?php the_author_posts_link(); ?></span><?php endif; ?>

<?php edit_post_link(‘edit’, ‘<span class=”editpost”>’, ‘</span>’); ?>

<span class=”comments”><?php comments_popup_link(‘no comment’,’1 comment’, ‘% comments’, ‘Comments off’); ?></span>

<div class=”fixed”></div>

</div>

<div class=”content”>

<?php the_content(‘read more’); ?>

</div>

<div class=”under”>

<span class=”categories”>Categories</span><span><?php the_category(‘, ‘); ?></span>

<span class=”tags”>tags: </span><span><?php the_tags(”, ‘, ‘, ”); ?></span>

</div>

</div>

<?php endwhile; else : ?>

<div class=”errorbox”>

没有任何文章

</div>

<?php endif; ?>

<div id=”pagenavi”>

<?php if(function_exists(‘wp_pagenavi’)) : ?>

<?php wp_pagenavi() ?>

<?php else : ?>

<span class=”newer”><?php previous_posts_link(‘上一页’); ?></span>

<span class=”older”><?php next_posts_link(‘下一页’); ?></span>

<?php endif; ?>

</div>

<?php get_footer() ?>

请注意其中的引号，应该是英文半角的。

这些代码是不是看起来有些眼晕啊，这没关系，我们慢慢来分析。

（1）get_header() ，get_footer()函数

还记得我们前两讲里做的header.php 和footer.php文件吗，这两个函数的作用就是把这两个文件引入进来，就相当于php中的include函数，这样我们才能在同一个网页中把header和footer都显示出来。这也可以看出来index.php的重要性，他统领着其他的文件。与这两个函数类似的还有get_siderbar()函数，这个函数就是包含siderbar.php文件，这个文件的内容我们将在后续的课程中讲解。

（2）have_posts()，the_post()函数

Have_posts()的作用就是判读博客中是不是有发表的文章，通常用于条件判断中，the_post()的作用就是进行数据库查询，把与文章相关的数据查询出来，这样我们就能在后续的代码中使用相关函数将这些信息输出到页面上，一般的用法就是像上面那样：

<?php If(have_posts()):while(have_posts()):the_post();?>

这里是循环取出与文章相关的信息

<?php endwhile;?>

<?php else:?>

这里是如果没有文章的话，就显示这里的信息。

<?php endfi;?>

需要注意的是这里的if 和while后面用的是冒号不是分号，如果误写成分号就不能实现预想的功能啦。

（3）the_ID()   the_permalink()   the_title()   the_time()    the_content(‘read more’)

附注：这五个函数只能在WordPress的循环中使用，他们不是全局函数。

The_ID()

作用是取得每次循环的编号，输出的结果post-数字编号

The_permalink()

作用是取得文章永久链接。这个函数不带参数表示取得当前循环中的文章的链接，也可以传入一个id编号这样就可以取得该id所对应的文章的链接。函数定义在：/wordpress/wp-includes/link-template.php -> line 9

The_title()

取得文章的标题，这个函数的完整参数列列表the_title($before = ”, $after = ”, $echo = true)

$before 就是指文章标题前面要显示的内容，$after就是指文章标题后面说要显示的内容。$echo 取值true表示显示文章标题，为false则返回文章的标题。

函数定义在： /latest/wordpress/wp-includes/post-template.php -> line 35

The_time()

the_time()用来获取并显示当前文章发布的时间,该函数后面可以跟控制日期或时间格式的参数，常用的参数形式如下：

如<?php the_time(’F j, Y’); ?>的调用形式显示效果为：六月13, 2009（英文状态下显示June 13, 2009）；

如<?php the_time(’g:i a’); ?>的调用形式显示效果为：7:09 下午（英文状态下显示7:09 pm）；

如<?php the_time(’G:i’); ?>的调用形式显示效果为：19:09。

事实上，除了使用the_time()函数之外，WordPress还提供了一个具有类似功能的get_the_time()函数。该函数除了不具有the_time()函数的显示功能之外，其余功能二者完全相同。使用get_the_time()函数时，如欲将获取的时间显示出来，需要使用专用语句。

下面，我们籍此机会来简单了解一下WordPress中时间的格式。在WordPress中，通常用于控制时间格式的有以下字符：l, F, j, S, Y, G, g, i, a等等，其详细意义如下：

l（小写L）用来显示一周之中每一天的名称，比如星期六，或者在英文中显示Saturday；

F用来显示月份名称，比如六月，或者June；

j用来显示一月之中的某一天，比如13；

Y用来以4位数字形式显示年份，使用y则以末两位数字显示年份，比如2009或09；

G, g, i, a等四个字符通常组合使用，如前例子，有两种形式：

g:i a以形如7:09 下午或7:09 pm的形式显示时间；

G:i以形如19:09的24小时进制形式显示时间。

S通常紧跟在j后面，表示是否在一月之中某天之后添加英文后缀（st, nd, th等）。

The_content()

取出文章的内容，这个可以带一个参数,the_content(“more”),作用是如果在文章中有<!–more–>时，就自动截断显示more连接，可以查看详细信息。

（4）the_category()、the_tags()函数

the_category() 取得文章所属的目录列表 ，可以这样使用the_category(‘|’),如果我们有WordPress WordPress主题 WordPress插件这三个目录那么显示出来是这样的：

WordPress|WordPress主题|WordPress插件，‘|’就是相邻目录之间的分隔符，这个可以根据自己的需要来使用不同的符号把他们分隔开来，默认情况下是使用空格来分隔的的。

the_tags() 取得文章所属的标签。

the_tags( $before = ‘Tags: ‘, $sep = ‘, ‘, $after = ” ) $before在标签前面显示的内容，$sep分隔符，$after标签后显示的内容。

有任何问题可以在此留言，欢迎的大家对教程提出意见和建议。

上一讲，我们讲了如何制作WordPress主题的header部分，到目前为止，我们的主题目录中应该有style.css, header.php, index.php 这些基础文件，今天我们讲一下footer.php的制作。

footer.php 就是负责页面的底部部分，这个部分一般包含的内容主要有版权信息、统计代码、备案信息（在国内）等。现在我们在wpc-tomheng目录在建立一个footer.php文件。在里面写入如下代码：

<div id=”footer”>

<div ><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’);?>Powered by </a><a href=”">WordPress</a></div>

<div >

<div class=”tongji”>在这里可以加入你的统计代码</div>

<div class=”beian”>这里是您的备案信息</div>

<div ><?php echo get_num_queries();?>querys in <?php echo timer_stop() ;?>seconds</div>

</div>

<?php wp_footer(); ?>

</body>

</html>

现在打开浏览器应该可以看到相关的信息。确实很简单吧，it is easy ,it is fun.

Bloginfo()函数就不用说了，如果你不是很明白的话，那么请查看我们上一讲的内容。

（1）get_num_queries()函数

这个函数（不需要任何的参数）的作用就是得到从WordPress初始化到这个函数调用为止，总共进行了多少次sql查询。

（2）timer_stop()函数

这个就是取得当前程序的运行时间，可以大体衡量一下WordPress查询的时间。

这个函数定义在：/wordpress/wp-settings.php -> line 162 有兴趣的朋友可以查看一下。

（3） wp_footer()函数

Wp_footer()是WordPress的一个hook函数，用于插件开发中挂在函数。加上这种函数是自己的主题支持插件开发，同时和更符合规范。

今天涉及的这几个函数比较简单没有复杂的参数选项，相对简单一下，这些函数只要知道他们的作用，具体用在哪里要看自己的设计啦。

欢迎的大家对教程提出意见和建议，我将做出及时的调整。

通过上一讲的说明大家知道了WordPress主题最主要的两个文件是style.css和index.php，他们是最基本的，但是只有他们显然是不完美的，虽然你可以把所有的功能都写到index.php中，但这不符合WordPress主题制作的规范，这一讲我们将学习如何按照规范去制作自己的主题。

从上面的图示我们可以看出一个基本的WordPress页面是由四部分构成的 (header.php, index.php, footer.php, sidebar.php)，他们在WordPress博客中负责不同的页面部分。我们将在下面的课程中讲解这四个文件的制作方法，今天我们就先来看看怎样来制作header.php文件。

（1）首先我们在index.php中写入如下几个简单的函数，这些函数暂时不做讲解，等讲到index.php文件时我们会进行说明的。

代码如下：

<?php get_header()?>

<?php get_footer()?>

（2）然后在wpc-tomheng目录下建立一个header.php文件。写入如下代码：

写入如下代码：

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title> <?php bloginfo(‘name’); ?></title>

<linkrel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

</head>

<body>

<div >

<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>

<div class=”description”><?php bloginfo(‘description’); ?></div>

</div>

</body>

（3）打开浏览器查看主题是不是可以看到显示出博客的名字还有描述啦。

恩，这就是模版函数的功劳了，下面我们就看看这个是如何实现的。

说明：

一、bloginfo()模版函数

Bloginfo()就是个模版函数，通过它我们可以调用你博客相关的信息，我们在header.php中用到了四次这个函数，取出了三个主要的数据：博客的名字bloginfo(‘name’)、样式文件bloginfo(‘stylesheet_url’)、博客描述bloginfo(‘description’)。这里需要特别指出的有两点：

1）Bloginfo()函数具有输出功能，即他不是返回数据，而是直接把数据输出到浏览器。

2）Boginfo()输出不同的数据通过参数配置实现。

Bloginfo()函数的常用配置参数说明

参数名	说明	返回值举例
html_type	文档类型	Text/html
charset	网页编码	Utf8
name	博客的名字	趣味互联网
stylesheet_url	Style.css 的url地址	http://blog.webfuns.cn/wp-content/themes/inove/style.css
comments_rss2_url	评论的rss订阅地址	http://blog.webfuns.cn/comments/feed
description	副标题	webfuns
admin_email	管理员的邮箱	admin@webfuns.cn
version	WordPress 的版本	2.8
language	当地的语言	Zh-cn

二、get_option()函数

我们在这里用这个函数得到了博客链接的地址，这个函数需要注意就一点他返回的是一个url地址变量，所以如果要在页面上显示那么需要在他的前面加上echo函数。

当然我们还应该加上一些样式，但是这超出了我们教程的范围，我在这里只是向大家解释如何使用这些模版函数和主题制作的基本方法，并不会去叫大家如何设计主题，掌握了这些知识再加上丰富的创意才能实现漂亮的主题，这要依赖于你的css知识基础和设计能力而这些不包含在我们教程的内容之中（也许以后wpc会提供相关的教程，请密切关注）

有任何问题可以在此留言，我会及时做出回复。也欢迎的大家对教程提出意见和建议，我将做出及时的调整。

Is is easy ,it is fun.

没错制作主题教程是简单的也是有趣的。上一讲我们对本wordpress主题教程进行了简单说明，现在就让我们先来配置一下我们的开发环境吧。

主题制作基本流程

(1) 在自己的电脑安装WordPress运行的环境（在本机搭建WordPress的安装环境XAMPP===WordPress教程网教程系列 ）；

安装过程中可能会遇到一些问题，一般就是迅雷等软件占用80端口。所以安装之前最好把迅雷给关了。另外phpnow ,appserve ,nertrigo等都可以完成xampp的工作。

(2) 在本机服务器安装WordPress（ 在本机安装WordPress全过程 ===WordPress教程网教程系列 ）。

这个相对简单一些，如果一切顺利这时侯，在自己的浏览器输入http://localhost就可以看到自己装的WordPress啦。

(3) 推荐：准备一些软件，dreamwerver ，fireworks,最好装两个以上的浏览器（包含ie,firefox)当然这些不一定用的着，只是推荐而已，大家根据自己的知识水平准备一下就可以啦。

现在万事俱备，接下来就开始介绍教程制作的相关知识。

(1) 主题的存放位置。

所有的主题都存在于：你的博客所在目录/wp-content/themes下，每一个文件夹就是一个主题。所以我们制作主题的第一步就是在这个目录建立一个文件夹，文件夹的名字可以用主题的名字，您还得先为主题取个好听的名字奥。比如我们就建立一个叫wpc-tomheng的文件夹。

到wordpress后台看一下是不是存在我们的主题。令人失望的是没有看到我们的主题，这是什么问题呢？其实建立一个文件夹只是给我们的主题买了块地皮而已，我们还需要在上面建立一些东西，才能在后台看到的。要在后台看到我们的主题最主要的一步就是在主题目录（我这里是wpc-tomheng,要根据自己的具体情况在相应的目录里，以后我们就直接以wpc-tomheng作为说明，您在操作的时候要具体转化为自己的目录。）

建立一个叫style.css的文件。这个文件是用来存放css样式文件，这里面也包含了关于主题的一些信息。与主题相关的信息都是放在/*主题相关的信息*/里面。我们在里面写入最简单的一个信息-关于主题的名称。在style.css文件里写入如下信息：

/*

Theme Name: wpc-tomheng

*/

说明：在这里可以填入更多的相关信息，但是都要符合WordPress的规范才行。这些信息不是必要，但是我们最好填写一些必备的信息（如：主题的名字，作者，等信息），这样看起来更规范。保存文件。到后台看一下，我们依然没有发现我们的主题，我们的主题却被列入了已损坏的主题里面，提示信息为：缺失模版文件。是的我们的主题确实小但是五脏并未俱全，接下来再建立一个模版文件就好啦。在wpc-tomheng 目录建立一个index.php的文件，这时候我们的主题能在后台的主题选项目录看到，同时我们的主题也可以安装了。

这就是一个新的主题必须具有的最基本的结构（style.css 和index.php文件)。现在我们安装上自己制作的主题，但是我们到前台查看自己的博客时候，什么内容也没有看到。这是为什么呢？

当然，我们的工作刚刚起步。我们还需要给我们的主题继续的添加东西，才可以在前台有个完美的展示。在index.php里写入任何的html标签或者简单的文本都可以在前台显示出来。You may wan to try it .

但是我们怎么把我们在博客里的文章或者其他的信息显示出来呢，这就要靠我们的WordPress template tags

http://codex.wordpress.org/Template_Tags

我们在这里先介绍一个最简单的tag，（在开始的几讲里我们只是介绍一下主题的最基本知识和相关的流程，关于更详细的教程我们会在后续的章节发布出来，请密切关注wpc的动向）。

在index.php里写入如下代码：

<html>

<body>

<?php

bloginfo(‘name’);

?>

</body>

</html>

注：请注意其中的引号，有可能您直接copy过去的话，会变成全角的，应该是半角英文的引号。

现在在博客的首页应该可以看到自己博客的名字了，这就是tag的一个最简单的应用。

现在wpc-tomheng应该算是一个完整的主题，但绝不是一个完美的主题。因为他基本没有展现我们博客的内容，也没有漂亮的外观。展现博客的内容要靠template tags（例如bloginfo())来完成,改变外观要靠style.css来完成。这也是制作主题的关键，最能展示个人创意的地方。

接下来，如果您愿意把自己制作的主题release出来的话，就可以打包成.zip文件，然后提交到WordPress。

恩，现在是不是对WordPress主题制作有个基本的了解了，接下来我们会详细的讲解template tags的相关的知识。

有任何问题可以在此留言，我会及时做出回复。也欢迎的大家对教程提出意见和建议，我将做出及时的调整。

wordpress主题制作教程简单说明

老伍注：很多人开始使用wordpress都是因为看到漂亮的wordpress主题。为了能让每一个WordPress fans都能制作个性化的主题，我们经过精心的准备，终于推出了这套WordPress主题制作入门教程。这套教程主要由tomheng编写，老伍修正，希望大家能从中对wordpress主题制作有一个基本的了解。

WordPress是一个很优秀的开源博客程序，受到全世界网民的追捧。它不但是一个简洁易用的博客应用程序，同时也是个学习的好工具。通过主题的制作你可以学习网页设计相关知识，学习插件开发则可以提高你php编程的能力，如果更深入的了解一下WordPress的框架结构，那对你架构设计能力也是一种提高。我们提供的这套入门教程旨在普及WordPress主题制作的基础知识，面向最基础的入门用户，让大家认识到制作WordPress主题是简单的，有趣的（It is easy ,it is fun这是我们的口号)。这个简单的教程会讲解如何制作WordPress 主题的基本步骤，但是制作漂亮的主题还需要更多的经验和努力才行。

学习我们的教程需要您首先的是一个WordPress的熟练的用户，如果你还不是很熟悉如何使用WordPress，请移步WordPress教程网查看WordPress的基本的使用教程。

教程开始之前还是要说一些网页设计的基本的规范以及一些基本的php常识：

（1）所有html 标签必须关闭

<ul></ul>

（2）Html标签的不能交叉嵌套

<div><span></div></span> 这样是不允许的

<div><span></span></div> 这样是正确的

（3）凡是在<?php ···?>或者在<? ···?>里的内容都是php代码

（4）Php 的两种注释方法

// 单行注释

/**/ 跨行注释

即以/*开头到*/终止的中间部分全部为注释代码

5）css 样式文件的注释方法 只有一种既 /**/ 跨行注释

推荐一些工具和网站

1）php不懂得问题去。Php.net查询

2）与css，html有关的问题去：w3school查询

正式的内容将从下一讲开始，静请期待。