Codex

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

zh-cn:令主题支持小工具

我是主题作者。为什么我收到了很多要求我升级主题的邮件呢?

您应当为此庆幸,因为很多人非常喜欢您的主题,因此没有改用其他人的主题。您的主题非常好!很抱歉,也许用户的邮件看起来吓人。请对您的主题进行一些调整。“小工具”现已成为 WordPress 的内置功能之一,因此,为了让更多的用户能够正常使用您的主题,您应当使您的主题支持它,同时保留对老式边栏的支持。

好吧。那如何入手呢?

首先请问自己:“我了解我的主题么?它使用 <ul> 标签来创建边栏么?”(如果您不能回答这个问题,那您大概需要花些钱来请人帮您修改主题,或是在一些论坛友善地进行求助。或者您可以自己开始学习 HTML。但很抱歉,暂时不在这里介绍关于 HTML 的知识。)

这是一个简单的边栏代码:

<ul id="sidebar">
 <li id="about">
  <h2>关于</h2>
  <p>这是我的博客。</p>
 </li>
 <li id="links">
  <h2>链接</h2>
  <ul>
   <li><a href="http://example.com">例子</a></li>
  </ul>
 </li>
</ul>

请注意,在本例中,整个边栏都使用了 <ul>,标题在使用 <h2> 标签。并不是每个主题都是这样处理边栏的,但是通过调查发现,大部分主题都这样做,所以我们采用了这种方式。有着 id=”links” 的元素就等于是一个基本的小工具。

小工具接口提供了几个新的函数。您可以用类似模板标签的方法来使用它们。这些函数让 WordPress 可以动态将您主题的边栏替换成小工具,又在没有小工具的时候可以显示您主题提供的边栏。

升级后的代码像这样:

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
 <li id="about">
  <h2>关于</h2>
  <p>这是我的博客。</p>
 </li>
 <li id="links">
  <h2>链接</h2>
  <ul>
   <li><a href="http://example.com">例子</a></li>
  </ul>
 </li>
<?php endif; ?>
</ul>

您大概注意到了,我们只添加了两行代码就实现了动态边栏。如果可能,这段代码将显示出一个动态的边栏,否则将显示旧的边栏。在管理界面将所有小工具都移除,您设计的边栏就会显示出来了。

还有一个小修改要做:若您在使用 WordPress 2.0 以上的版本,您需在主题根目录中的 functions.php 中进行修改。

NOTE: 如下的一些例子包含修改您主题的 functions.php 的部分。若修改不当,可能导致后台页面无法显示等后果。做出更改前,请尽量先备份 functions.php。

如下是一个全新的 functions.php 的示例(请确保文件首尾没有空行):

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


是的,只有四行。这段代码告诉插件,您的主题需要一个动态边栏。修改后,您的控制板的“外观”页面应多出一项:“小工具”。尝试通过拖拽的方式来管理小工具吧。不错吧?

我的边栏不是通过列表实现的,怎么办?

这是原始的代码:

本文已被标记为未完成状态。您可以将其补充或翻译完整,以此帮助完善 Codex。
<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>

就像是这样的代码。这是第二流行的侧边栏设计模式,也是我们为什么选择它作为例子。第一个不同是sidebar没有内嵌在一个UL标签之中,那也意味我们不应该将我们的的小工具放在LI标签里面。第二个不同是我们的title包含在 <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代码了。 That’s it. Your HTML markup is taken care of.

Well, mostly taken care of. The default before_widget is a little bit more than just <li>. It includes an id and class. Well, sort of, but this is where it gets complicated. The default before_widget includes sprintf directives %1$s and %2$s, which are replaced by the id and class, respectively. The id is generated by sanitizing the widget name (which is why you should name your widget carefully: you don’t want duplicate id’s in one HTML document!) and the class is generated from the widget’s callback. This ensures all Text and RSS widgets, for instance, have unique id’s and similar classnames. Additionally, there is a “widget” class for each widget.

So, if you want your theme to be most flexible you should use this instead of the empty strings shown above:

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

Now your HTML markup is REALLY taken care of.

HTML 代码没问题,但是为什么页面在浏览器里那么难看呢!

Yeah, we knew that would happen. Your theme was probably written before widgets were born so the author didn’t know she should make the stylesheet flexible enough to handle new markup in the sidebar. If you know some CSS, you should be able to handle the problems with a few new rules at the end of your stylesheet. Look in your blog’s markup for the selectors (id and/or class) belonging to each widget you want to style.

If CSS is a mystery to you, we regret that we can’t offer you any help. As much as we’d like to help you with this, it just isn’t possible due to the wild variations of themes. Contact your theme’s author and ask her to update the theme for better compatibility with widgets.

“搜索”小工具还很难看。我想将我自己主题的搜索框做成小工具。

The widgets are CSS-selectable so that you can style them very specifically. However, the markup might not be to your liking. Many themes will look better if they supply their own widgets to replace some of the basic widgets, such as Search and Meta. It’s usually best to copy the existing markup from sidebar.php into a new widget in functions.php, then use the registration functions to replace the standard widget with the custom one.

You can do this with any part of the theme’s sidebar, or all of them. Here’s an example of how to do this:

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

我的主题有多个边栏,如何将它们都做成动态的?

Oh, that’s easy. Instead of register_sidebar() you should use register_sidebars(n) where n is the number of sidebars. Then place the appropriate number in the dynamic_sidebar() function, starting with 1. (There are several other ways to use these function. See the API).

You can even give your sidebars names rather than numbers, which lets you maintain a different set of saved sidebars for each theme. But if you need to know so much about the plugin, why aren’t you reading the API?

相关内容

Widgets: is_active_widget(), the_widget(), register_widget(), unregister_widget(), wp_register_widget_control(), wp_unregister_widget_control(), wp_convert_widget_settings(), wp_get_widget_defaults(), wp_widget_description()