Archive for May, 2007

毕业纪念衫

2 Comments
May 25th, 2007 by Xu Yiyang

哎。
Graduation Shirt: Blue
Graduation Shirt: Pink

, , .

Unnamed 1.2

35 Comments
May 17th, 2007 by Xu Yiyang

WordPress 2.2 的延期，使得我有更充分的时间来完善 Unnamed 1.2。这个版本，可能和很多人期待的有所不同：在这一个多月的时间里我着力改进的是兼容性，而非功能。Unnamed 的功能已经够用了，一味的求大求全不是我想要的，也非我精力所能顾及的。

我从未想过，一个WordPress模板，竟会花掉我10个月的时间。尽管因此失去了很多东西，但我想这10个月的付出，还是值得的。我希望那些接触过 Unnamed 的人们会说，这是一个舒服的模板，无论是看着，还是用着。尽管离这个目标还很远，但我一直很努力的在实现它。

主要更新包括：

  • 改进的样式表结构，通过style.css和custom-css.php分别存储静态和动态内容，以期解决最饱受诟病的样式表无法加载问题。
  • 裁掉了自定义皮肤功能，改为两栏/三栏切换，Unnamed 复杂的架构不适合 Skins 的应用。
  • 改进的外观细节：
    • 使用精致的 Sweetie Icons v3 替换原来版本。
    • 重新设计了两栏样式，和三栏一样，使用了透明的PNG背景图片以配合自定义色彩的应用。
    • 统一了 IE 6 和其他浏览器的背景图片。
  • 增加自定义正文背景功能——这意味着你已经可以完全改变Unnamed的配色，你可以把主题改成黑色、红色、蓝色或者任何一种你想要的色调。
  • 增加自定义背景图片功能。
  • 增加一个小功能：隐藏特定导航栏页面。
  • 暂时同时支持 WordPress 2.3 Tag 系统和 UTW，但优先支持 UTW。
  • 优化代码以提高对 WordPress 2.2 的兼容性。
  • 简体中文包同步更新。

Main Changes:

  • Improve the strucure of the stylesheet, hope to solve the stylesheet loading problem (there is sometimes no style applied to the site in some speicific conditons).
  • Remove custom skins. Add two/three-column mode switch.
  • Presentation improved:
    • Use the wonderful Sweetie v3 to replace the original icons.
    • Redesign the two column skin.
    • IE 6 now uses the same background images as the other browsers.
  • You can now completely change the colors of Unnamed.
  • Add a function to customize the background images.
  • Add a function to exclude certain pages from navigation bar.
  • Add support for WordPress 2.3 tagging system.
  • Some code cleaning.

Unnamed Project Page

Download Unnamed 1.2

下载 Unnamed 简体中文包

因为刚刚忙完答辩，这个版本出的有点赶，若有问题请及时告知：）

Update:

  • 修正在”Advanced”模式下无法修改背景色的错误，感谢 Xi 的报告。
, , , .

WordPress Themes 设计手记（五）

9 Comments
May 7th, 2007 by Xu Yiyang

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
, , .

海报一张

13 Comments
May 1st, 2007 by Xu Yiyang

这是 Unnamed 1.2 的后台管理页面截图（点击放大），这个版本会在WordPress 2.2正式发布后放出。祝各位五一休息好。

点击浏览图片

, , .