一、开发工具及相关资源
本地WordPress架设：Xampp（WordPress官方也推荐了这一软件组合，方便实用）。
代码：Dreamweaver（我选择它仅仅是出于习惯，你完全可以选择一个更称手的）。
图像：Photoshop、Illustrator、Fireworks之类之类。
版本控制：Google Code，在教育网利用svn往google code上传东西实在是太慢了，不过还是推荐。
浏览器测试：Firefox（当然，少不了Web Developer Toolbar）、Internet Explorer 7、Mutiple IEs（包含可独立运行的IE3——IE6）、Opera、Swift（基于WebKit引擎的浏览器，用于Safari兼容性测试）。
相关站点：
WordPress Codex
WordPress Hooks
WordPress Theme Viewer
二、WordPress主题结构——模板文件及其调用
传统的网页通常使用HTML来控制页面结构，并通过样式表（CSS）来控制页面的表现。WordPress也使用样式表来控制网页的表现，但其页面内容则 是由几个模板文件（Template Files）共同构建而成的。其中一些模板文件是全局性的，比如头信息和页脚模块，而有一些则只用于特殊场合。 这些模板文件通常由XHTML和简单的PHP代码构成，只要你有一些基本的网页知识，并且知道什么是“if…else…”，就不用太担心代码问题——当 然，掌握一些基本的XHTML、CSS、PHP和Javascript知识，还是大有好处的。在文章中，我会尽量少涉及模板之外的代码，很多东西，不是拿 来谈论的，比如网页标准，我们遵循它，使用它，就可以了。我们习惯性的将网页分解为 “头信息（Header）”、“内容（Content）”、“侧边栏（Sidebar）”、“页脚（Footer）”这几个主要部分，而这也是主要 WordPress模板文件划分的依据。通常一个普通的WordPress主题会包含一下几个模板文件：样式表：style.css
头信息模块：header.php
内容模块：index.php、page.php、single.php、archive.php、search.php、404.php
侧边栏模块：sidebar.php
页脚模块：footer.php
评论模块：comments.php
搜索表单模块：searchform.php
其中，style.css用于定义主题的外观；头信息模块定义了网站的基本信息，比如标题、关键词等等；站点的主要内容使用index.php输 出，page.php用于输出分页内容，而single.php则被用于单篇汇整，404模块用于返回站点404错误信息；sidebar.php包含了 网站的一些次要内容，比如订阅、分类、链接等等；页脚信息通常会包含站点的版权等相关信息；而其他模块所含内容视情况而定，比如comments.php 用于控制评论输出，而searchform.php则包含了搜索表单。当然，WordPress也允许用户调用自己定义的模块。注意：当 archive.php和search.php不存在时，WordPress会自动调用index.php中的内容，因此这两个模板文件已经不是必需的 了，在此不作介绍。
在WordPress中，主要的模板文件都有自己专用的调用代码：
style.css：<?php bloginfo(’stylesheet_url’); ?>
header.php：<?php get_header(); ? >
sidebar.php：<?php get_sidebar(); ? >
footer.php：<?php get_footer(); ? >
comments.php：<?php comments_template();? >
而其他辅助模块则可以使用相关语句来调用，比如你要在侧边栏里调用搜索模块，就可以在sidebar.php的相关位置输入：<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>该语句也可用于调用你自己创建的模板文件。举个例子，比如在index.php中，我们需要头信息、正文、侧边栏和页脚信息，那么该模板的结构 就是：
<?php get_header(); ?>
…主体内容…
<?php get_sidebar(); ?>
<?php get_footer(); ?>先写这么多吧，
参考文献：
Stepping Into Templates
海豚的WordPress Theme教程 part1
三、模板文件解析
首先提一下WordPress的模板标签（Template Tags）。WordPress提供的模板标签十分丰富，你几乎可以利用它们把主题做成任何你想要的样子。了解并掌握重要标签的形式和用法是进行 WordPress主题开发的重要环节。WordPress Codex给出了大部分Template Tags的说明，我就不做重复劳动了。
进入正题，我们以WordPress Default 1.6为例，尽可能详细的分析模板文件中所用到的相关代码及技巧。
3.1 Header.php
我们从头开始好了。打开Header.php，在这里我们可以看到不少常用的模板标签，其中<?php language_attributes(); ?>是WordPress 2.1新增加的标签，用于在头部输出“lang=’zh-CN’”这样的语言标记，站点语言可以在后台定义。 在这里，你可以看到<?php bloginfo() ?>是一个被使用多次的模板标签，用于显示一些站点的相关信息，比如标题、网页类型、字符集、样式表链接、Rss链接等等。其用法 是：<?php bloginfo(’show’); ?>Show是你想要显示的内容，可以是：name、description、url、charset、stylesheet_url等等，另 外，<title> </title>之间的代码用于输出网页的标题，先看WP默认模板的标题输出：除了用<?php bloginfo(’name’); ?>输出Blog的名字之外，该模板还使用了”is_single()”函数来判断当前页面是否是单篇汇整页面，如果是，则输出<?php if ( is_single() ) { ?>…<?php } ?>之间的语句。 这是一个非常常用的技巧，它允许你使用一段代码控制不同页面的输出效果，简便且灵活。除了is_single()之外，常用的还有：is_home()、 is_page()、is_paged()、is_archive()、is_search()、is_404()、is_tag()。意思都很好理 解，is_paged()就是某个存档的除第一页外的后n页（这个解释很别扭，俗称“上一页”…） 如果非再要举个例子，那就来一个豪华的，K2的 theloop.php。有别于普通WP模板按网页结构和存档性质划分模板文件的方法，K2使用theloop.php来定义全部页面的正文内容输出，主 要手段就是通过上面提到的那些函数来判断当前页面的性质以输出相应的内容。尽管原理很简单，但这种处理模板文件的形式大大简化了代码编辑工作，因为你只需 要通过一个模板文件中的几行代码就可以改变几乎任何一个页面上的内容。如果你想要某页面不显示某些内容，只要在is前加上感叹号表示否定即可，
例如：
<?php if ( !is_home() ) { ?>…<?php } ?>
最后，在</head>之前，一定会有一个<?php wp_head(); ?>，wp_head()用于获取一些插件或者主题所需的功能，这些功能通常是在后台就定义好的，比如在一些主题和插件里你可以看到 add_action(’wp_head’, ‘函数名’);这样的语句。大部分主题将导航栏也放在header.php中，就简单提一点：WordPress对当前页定义的CSS Class是current_page_item，而其他页面则是page_item，也就是说，你可以在CSS中定义 current_page_item和page_item以区分当前页和其他页面的样式。
比如：li.current_page_item {
…
}
li.page_item {
…
}wp_list_pages()也是一个很有讲究的模板标签，具体用法参见Codex。
参考文献：
Template Tags: bloginfo
Hooks: wp_head
The Loop
3.2 Index.php
以WordPress默认模板的index.php为例。我们先来看看它的结构：首先，通过<?php get_header(); ?>获得头信息；然后是一个循环体（The Loop，不知这样叫对不对）；最后通过<?php get_sidebar(); ?>和<?php get_footer(); ?>加载侧边栏和页脚。熟悉The Loop的用法能够让你随心所欲的控制文章的输出，因此我们来着重了解一下The Loop： WordPress使用一个循环体来控制正文内容的显示，文章将按循环体内代码所定义的格式输出到当前页面上。部分模板标签必须在循环体内使用，如每篇文 章的标题（the_title()），时间（the_time()）和分类（the_category()） 。
简单表示如下：<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
…找到相关内容则按格式输出正文…
<?php endwhile; else: ?>
…否则输出错误信息…
<?php endif; ?> The Loop的用法非常灵活，比如你可以将其和分类标签结合起来以限定某个页面或某一部分只显示某个或几个分类的内容，这就是一个最简单的Asides。有兴 趣的自己不妨找找相关插件或模板来看看。我在这里仅举两个简单的例子。
比如，如果你想要某一页面只显示分类x（x代表该分类的ID）的内容，
你可以这样写：<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if ( in_category(’x’) ) { ?>
…正文内容…
<?php } else { ?>
…其他内容…
<?php } ? >
<?php endwhile; else: ?>
…出错信息…
<?php endif; ?>
进一步，来看一个Asides的例子。假设你需要在某个页面的某一位置（比如侧边栏）输出某个分类的前x篇文章，你可以这样做：
<?php $temp_query = $wp_query; ?>
<?php query_posts(’category_name=分类名字&showposts=x’); ?>
<?php while (have_posts()) : the_post(); ?>
…Asides内容…
<?php endwhile; ?>
<?php $wp_query = $temp_query; ?>
在这里，我们在Asides的循环体重使用变量temp_query来代替wp_query，以避免同正文部分的循环体发生冲突。更多的例子你可一在文后的参考文献中找到，代码大同小异。另外Durable的index.php也是一个不错的样板。
3.3 Sidebar.php
侧边栏的内容没有太多好说的，记住如果你想自己的侧边栏在不同页面显示不同内容，可以用3.1中提到的方法。我倾向于让用户使用Sidebar widgets或SBM(Sidebar Modules)来自行定义侧边栏的内容，这就是为什么Unnamed默认侧边栏内容偏少的原因。在这里简单解释一下如何让主题支持Sidebar Widgets或SBM：
首先你需要建立一个functions.php，这个文件通常用于控制主题的后台内容，包括一些后台功能和管理页面。然后在functions.php中加入下述代码：
if (function_exists(’register_sidebar’)) { register_sidebars(x,array(’name’=>’Sidebar %d’)); }x代表sidebar的数量。
最后，修改Sidebar.php，以双侧边栏为例：
<div id=”sidebar”>
<div class=”left-sidecolumn”>
<ul>
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar(1) ) : else : ?>
<li> … </li>
<?php endif; ?>
</ul>
</div>
<div class=”right-sidecolumn”>
<ul>
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar(2) ) : else : ?>
<li> … </li>
<?php endif; ?>
</ul>
</div>
</div>
参考文献：
The Loop
Widgetizing Themes
四、杂项
4.1 Custom Image Header
Custom Image Header 是WordPress 2.1增加的一个新功能，支持该功能的主题允许用户自定义Header图片。所以今天贫僧来介绍如何让施主们的WordPress主题支持该牛逼闪闪的功 能。本文中涉及的相关代码可以在Unnamed Special Edition 的functions.php中找到。首先，各位施主请看如下几行代码，它们分别定义了header部分的字体颜色、默认背景图片以及图片尺寸：
define(’HEADER_TEXTCOLOR’,’FFFFFF’);
define(’HEADER_IMAGE’,’%s/images/bg_header.jpg’);
define(’HEADER_IMAGE_HEIGHT’,150);
define(’HEADER_IMAGE_WIDTH’,960);
这段代码告诉我们一个道理：Unnamed SE的header部分字体颜色为白色（FFFFFF），默认背景图片为bg_header.jpg，背景图片尺寸为960*150。再来看下面这段代 码，在这里，函数custom_css()包含了定义主题header样式所需的CSS，它会被输出到模板的头部（如果施主不想在页面头部生成过多代码， 可以考虑和Unnamed一样将CSS写入php文件，不过贫僧不推荐这样做，尽管好处大大地，但弊端也很是不少）。
<?php
function custom_css() {
?>
<style type=”text/css”>
#header {
height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;
background:url(<?php header_image() ?>) transparent repeat top center;
}
<?php if (get_header_textcolor()==’blank’ ) { ?>
#header h1, .description {
display:none;
}
<?php } else { ?>
#header h1 a,.description {
color:#<?php header_textcolor() ?>;
}
<?php } ?>
</style>
<?php } ?>
其中，#header部分定义了header图片的高度（HEADER_IMAGE_HEIGHT）和url（header_image()）；而后一部 分则判断header的文字部分是否需要隐藏；header_textcolor()则用于定义字体颜色。用户们都喜欢所见即所得，所以，为用户着想的施 主们需要在管理页面中设置当前header样式的预览。为了与模板中的样式保持一致，我们用admin_header_style()定义预览部分的样式 （代码意义与前一段基本相同）：<?php function
admin_header_style() {
?>
<style type=”text/css”>
#headimg {
background-image:url(<?php header_image() ?>);
background-repeat:repeat !important;
height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;
width:<?php echo HEADER_IMAGE_WIDTH; ?>px;
margin:0 0 10px;
}
#headimg h1 {
font-size:2.2em;
text-align:left;
margin:0;
padding:45px 0 0 20px;
}
#headimg h1 a {
color:#<?php header_textcolor() ?>;
text-decoration: none;
border-bottom: none;
}
#headimg #desc {
color:#<?php header_textcolor() ?>;
font-size:1em;
text-align:left;
padding:0 0 5px 20px;
}
<?php if (’blank’ == get_header_textcolor()) { ?>
#headimg h1,#headimg #desc {
display:none;
}
#headimg h1 a,#headimg #desc {
color:#<?php echo HEADER_TEXTCOLOR ?>;
}
<?php } ?>
</style>
<?php } ?>
最后，我们通过add_custom_image_header()来输出CSS到主题和管理页面的头部。<?php add_custom_image_header(’custom_css’, ‘admin_header_style’); ?>这样，当该WordPress主题被激活时，系统会自动加载Custom Image Header管理页面，用户可以通过该页面上传和处理header背景图片。更多内容可以参考/wp-admin/custom-header.php。 4.2 后台管理页面 先来介绍一下今天的主角——Wordpress Theme Toolkit 和 Unnamed 0.4.1：Wordpress Theme Toolkit 是著名 WordPress 达人 Ozh 开发的专用于编写 WordPress 模板后台管理页面的工具（Ozh 开发了很多经典且实用的WordPress插件和工具，施主可以在这里找到更多好玩的东西）。尽管已经有很久没有更新，但经过测试，发布于九个月前的、将 该工具性能压榨殆尽的 Unnamed 0.4 至今仍能非常稳定的工作在 WordPress 2.3-Alpha 平台下，足见 Theme Toolkit 的经典程度。Download Unnamed 1.22
对比 Unnamed 1.2 的后台管理页面，施主们可以发现，这九个月来，Unnamed 虽然一直在进步，但其基本框架是在 0.4 时代就定型了的。从Unnamed 0.5 起，贫僧开始自己编写后台页面，代码最多时达到700余行，而 0.4 的后台管理页面只有区区200行代码，简练易读。贫僧认为，对于初学者，Theme Toolkit 提供的方便而强大的开发环境可以让施主事倍功半。OK，现在我们来介绍 Theme Toolkit 的使用方法。1. 调用themetoolkit.php
首先，我们利用下面这条语句将所需的themetoolkit.php加入functions.php中：
<?php include(dirname(__FILE__).’/themetoolkit.php’); ?>然后，我们来看如何在 functions.php 定义模板所需要的功能：
<?php
themetoolkit(
‘mytheme’, array(
‘option1′ => ‘Text for Option One’,
‘option2′ => ‘Text for Option Two’,
‘option3′ => ‘Text for Option Two’,
),
__FILE__
);
?>
其中，mytheme 为主题的别名，这无关紧要，数组 array() 中的内容才是关键，
第一部分 “option1”为模板某个选项的名称，而 “=>” 之后的部分定义了 option1 的说明文字、样式（比如单选框、复选框、输入框和文本框，不支持下拉选框）和选项状态（比如enable或者disable）。
2. 单选框 （radio） 来看Unnamed 0.4中控制Live Search选项的代码：
‘live_search’ => __(’Live Search’,’unnamed’).’ {radio|enable|’.__(’Enable Live Search(Default)’,’unnamed’).’|disable|’.__(’Disable Live Search’,’unnamed’).’} ## ‘ 这是一个典型的单选框应用，__(’…’,’unnamed’) 为本地化代码请直接忽略，我们将代码化简一下得到：
‘live_search’ => ‘Live Search {radio|enable|Enable Live Search(Default) |disable| Disable Live Search} ‘ 这便是调用单选框的基本格式，即：
‘选项名称’ => ‘选项标题 { radio | 选项1 | 说明文字1 | 选项2 | 说明文字2 }’
3. 复选框 （checkbox）复选框的调用方法基本类似：
‘选项名称’ => ‘选项标题 { checkbox | 选项1 | 说明文字1 | 选项2 | 说明文字2 | 选项3 | 说明文字3… }’
4. 输入框 （input field）施主可以在Unnamed 0.4中找到如下代码，它通过输入框来定义Unnamed文字字体的大小：
‘font_size’ => __(’Text Size’,’unnamed’).’ ## ‘.__(’Type in pixel size of the text. ‘,’unnamed’)我们很容易看出输入框的调用格式为：
‘选项名称’ => ‘ 选项标题 ## 说明文字 ‘
5. 文本框 （textarea）文本框的调用格式为：
‘选项名称’ => ‘选项标题 {textarea|行数|列数} ## 说明文字’
6. 设置默认值
我们需要为各个功能设定它们的默认值，开看看Unnamed是怎么做的：if (!$unnamed->is_installed()) {
$set_defaults[‘live_search’] = ‘enable’;
$set_defaults[‘ajax_commenting’] = ‘enable’;
$set_defaults[‘sliding_menu’] = ‘enable’;
$set_defaults[‘header’] = ‘header’;
$set_defaults[‘sidebar_align’] = ‘right’;
$set_defaults[‘width_type’] = ‘3′;
$result = $unnamed->store_options($set_defaults);
} 注意$unnamed为模板的别名，即前面的”mytheme”，代码很好理解，就不多解释了。
7. 利用函数控制和输出功能
在了解如何调用各种样式来控制模板功能之后，我们需要将这些功能添加到模板中去，我们需要自己编写一些简单的函数来控制和输出这些功能。比如，当 Live Search 选项为 enable 时，模板的 Live Search 可用，否则禁用。在模板中，这就相当于是否加载 livesearch.js。九个月前的贫僧是这样做的：在 functions.php 中，定义 unnamed_livesearch() 函数，判断 live_search 选项是否为 enable，若是，则返回真值。function unnamed_livesearch() {
global $unnamed;
if ($unnamed->option[‘live_search’] == “enable”) {
return true;
} else {
return false;
}
}
在 header.php 中施主可以看到如下代码，当 live_search 为 enable 时，即 unnamed_livesearch() 的值为真时，调用livesearch.js.php，Live Search 功能被加载，否则该功能被禁用。
<?php if(function_exists(’unnamed_livesearch’) and unnamed_livesearch()) { ?>
<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/js/livesearch.js.php”></script><?php } > 实际上施主还可以写的更简单一些。 还可以利用 Theme Toolkit 来改变模板的样式，比如 header 图片，字体，色彩，宽度等等，具体施主可以看unnamed_options_css () 这个函数是怎么写的，由于和上一节 Custom Image Header 类似，在此就不赘述了。8. 其他
Theme Toolkit 会自动生成删除选项，令施主们没有后顾之忧。施主还可以对themetoolkit.php做一些改动，让它符合自己的特定需求。如果有兴趣自己编写后台 管理页面，贫僧强烈建议施主去读 Codex 上的 Plugin API 及其他相关文章。参考文献：
Wordpress Theme Toolkit
