Xu Yiyang

WordPress Themes 设计手记（五）

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 的经典程度。

施主们先来看看 Unnamed 0.4 的后台管理页面截图。

对比 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 及其他相关文章。

参考文献：

1. Wordpress Theme Toolkit

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.