Palmback™菜园地

昨天花了点时间把主题升级了一下，使之支持Widgets，其实就是在sidebar.php和functions.php里加了几行代码。参考WordPress官方的一篇文章，顺手翻译了一下，以直译为主，感觉很别扭，这也许也是我不愿看中文配音的外语片的原因吧。

Widgetizing Themes

这个页面包含了关于升级主题使之能使用widgets（小工具）的技术指南。大多主题能在5到10分钟完成升级。其他主题要花费一两个小时以完成所有的操作。一些主题不管你怎么做都看起来很糟糕。这个文档只负责基本的PHP编辑技巧，但你可能没有必要自己写任何代码。

我是一个主题作者，怎么所有邮件都是要求我升级主题的？

你应该感到高兴他们喜欢你的主题，联系你比更换使用别人的主题好。干得好，使用户满意！现在我们正在使这个插件可用，以示WordPress团队如何喜欢它，同时也给人们写widgets的机会。如果一切进展顺利，这个功能将整合到标准的WordPress分布，任何不支持widgets的主题也将支持，如果你不相信我们的预言，（你的主题）很快就会过失。

我们很抱歉如果这看起来有威胁意味。它伤害我们比伤害你多。请修正你的主题吧。

我投降。我怎么修正我的主题？

首先你应该问自己：我了解关于我的主题吗？它是用无序列表创建边栏的吗？（如果你不能回答以上问题，那在这项任务中你需要深入的帮助，这通常以为着你要支付某人很多钱，或者爽快地到论坛请教吧。更好的，你可以学习HTML。抱歉，我们这不教这个。）

这是一个很好的边栏标签的例子：

<ul id="sidebar">
<li id="about">
<h2>About</h2>
<p>This is my blog.</p>
</li>
<li id="links">
<h2>Links</h2>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
</li>
</ul>注意整个边栏是一个无序列表，而且标题都在<h2>标记里。并非每个主题都这样构建边栏的，也没必要这样做，但是据我观察这是目前主题边栏普遍的标记法，所以我采用了。id=”links”的元素等价于一个基本的小工具（widget）。

激活后，动态边栏插件给你的模板一些类似于模板标记的功能。这些功能使WordPress用一个动态的边栏替代主题的默认边栏，如果禁用插件或者移除所有的小工具，那么动态边栏又恢复到默认的边栏。

这是一个例子，一个基本的边栏升级使用同下标记：

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<li id="about">
<h2>About</h2>
<p>This is my blog.</p>
</li>
<li id="links">
<h2>Links</h2>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
</li>
<?php endif; ?>
</ul>

看到了吧？我们仅仅添加了两行代码到模板中，如果可能将会显示一个动态边栏，否则显示原来的边栏。在管理界面中禁用插件或者移除所有的小工具将显示原来的边栏。

现在对主题还有一件事要做。如果你正在使用WordPress 2.0或者更高版本，这个更改将在主题目录里的functions.php中进行。（WordPress 1.5用户：我们不再鼓励用户使用WordPress 1.5，所以你在这里找不到任何帮助，我们甚至不知道是不是可能，因为没有试过。）

这是一个没有functions.php这个文件的主题的示例（文件的开头和结尾请勿留空白行）：:

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

就是他，仅仅四行。这写代码告诉插件你的主题正好需要一个动态边栏。到此，你的管理界面中的Presentation菜单上应该多出一个额外的条目：Sidebar Widgets。从左边的面板上拖拽一些小工具到标有Sidebar 1的盒子里并保存更改。生效了吗？难以置信。

我的边栏不是一个列表，我该怎么做？

我们了解你所问的。你必须发现你边栏的设计模式，然后用一些额外的参数告诉插件如何设计他们对你的主题起作用，我们将通过一个例子。

这是原始的标记：

<div id="sidebar">
<div class="title">About</div>
<p>This is my blog.</p>
<div class="title">Links</div>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
</div>

是的，你已经看到像这样的标记。这是第二种最普遍的边栏设计模式，这也是我们为什么选择它作为例子的原因。第一个区别是边栏没有构建在 <ul>标记内，这意味着我们不能使用<li>标记作为小工具的容器。第二个区别是标题被放在<div class=”title”>容器内，而不是<h2>标记。

我们宁愿以ul/li/h2标准改变标记，但是API足够强大，我们没有必要那么做。相反的是，我们通过添加一些参数到functions.php代码中以解决这些问题：

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<div class="title">',
'after_title' => '</div>',
));
?>

这是已经插入特别模板标记的sidebar.php标记：

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<div class="title">About</div>
<p>This is my blog.</p>
<div class="title">Links</div>
<ul>
<li><a href="http://example.com">Example</a></li>
</ul>
<?php endif; ?>
</div>

这样也就照顾了你的HTML标记。

这样，主要的得到照顾了。默认的before_widget是一个小点点而不止是 <li>。它包含ID和类Well, 到这里有点复杂。默认的before_widget 包含把字符串格式化为%1$s和 %2$s的指令，分别被ID和类取代。ID由小工具名称生成（这就是为什么应该小心命名小工具，不能在一个HTML文档里重复ID！），类由小工具回调函数生成。举例来说，这确保所有的文本和RSS小工具具备独一无二的ID和相似的类名。此外，每个小工具都有一个“widget”类。

所以，如果你想让你的主题更加灵活，你应该使用以下取代空字符：

'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',

现在真正地照顾到你的HTML标记了。

HTML看起来很好但页面在浏览器里看起来很糟糕！

是的，我知道会发生这样的事。你的主题可能在小工具为诞生之前就写出来了，所以作者不知道她应该使样式表足够灵活以处理边栏中的新标记。如果你懂一些CSS，你应该能够在你的样式表末尾用一些新的规则处理这个问题。在你blog的标记中查找属于你想设计的小工具的选择符（ID或者类）。

如果CSS对你来说是一个神秘的东西，我们很以后不能提供你任何帮助。尽管我们非常想帮助你，它不可能应归于主题的原始变化。联系你主题的作者并要求她升级主题，使之能更好地兼容小工具。

搜索小工具仍然很难看，我想要我主题原始的搜索框作一个小工具。

小工具是CSS可选择的，你可以特别地设计它们。然而，标记不可能符合你的嗜好。如果提供他们自己的小工具替代基本的小工具，很多主题看起来会更好，例如Search和Meta。通常最好的办法就是从拷贝sidebar.php已经存在的标记到 functions.php成了一个新的小工具，然后用注册函数把标准的小工具替换为自定义的。

你可以在你主题边栏的任何部分这样做，或者所有都这样。下面是一个示例：

function widget_mytheme_search() {
?>
<< PASTE YOUR SEARCH FORM HERE >>
<?php
}
if ( function_exists('register_sidebar_widget') )
register_sidebar_widget(__('Search'), 'widget_mytheme_search');

我的主题边栏多于一个，我如何使它们都变成动态的？

噢，这很简单。你应该用register_sidebars(n)替代register_sidebar()，N是边栏的数目。然后把适当的数目放在dynamic_sidebar() 函数中，从1开始。（有很多种其他的方法用这个函数，参见 API）。

你甚至可以给你边栏起名字而不是数字，让你为每个主题保存不同的设置。如果你需要了解那么多关于插件的知识，为何不阅读API或者源代码呢？

更多详情！

请阅读我们其他文档、Widgetizing Plug-ins以及 Widget API。如果它们没有满足你的需求，去读源代码吧！

via：Widgetizing Themes