Xu Yiyang

WordPress Themes 设计手记（一）

我决定静下心来，好好的写一些东西，最好能把我这一年多来设计WordPress主题的体验记录下来，和大家分享。

这会是几篇半教程性质的手记，估计内容会很杂，也很难写成体系，所以我打算写到哪算哪。有兴趣的随便看看吧，兴许能找到一两个有用的点子。

今天先扯开发WordPress主题可能用到的工具和资源，并简单介绍一下WordPress主题的结构……我废话又多了，开始吧。

一、开发工具及相关资源

• 本地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(); ?>


先写这么多吧，下回再续-_-!

参考文献：

1. Stepping Into Templates
2. 海豚的WordPress Theme教程 part1

This entry is filed under themes, tutorial, Wordpress. You can follow any responses to this entry through RSS 2.0 . You can leave a response, or trackback from your own site.