主题widget优化

0条评论

我是个WordPress模板主题制作者,为什么有人给我发送邮件要求我升级主题?

这说明你制作的主题很受欢迎,别人愿意花时间请你进一步优化主题,而不是寻找其它主题。恭喜你!为了能让你的主题用户更好地使用你开发的主题,现在就开始升级主题吧。Widget现在已经正式成为WordPress博客的一部分,你的主题也应该在支持旧式侧边栏的同时兼容widget,这样才可能获得更多用户。

好吧,那我要怎么修改主题呢?

首先你需要问问你自己,“我是不是完全了解自己所用的主题?这个主题是用无序列表来创建侧边栏的吗?”(如果你回答不出这个问题,那么你需要寻找进一步帮助了,你可以选择花很多钱请人提供专业帮助,也可以到WordPress论坛上提问。当然你还可以自学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。

Widgets API介绍了一些可以用在模板中的函数,可以把这些函数当作模板标签使用。通过这些函数,WordPress用一个动态侧边栏取代原先的侧边栏,万一你移除所有widget,则恢复使用原有侧边栏。

下面是一个简单的侧边栏升级示例,以上个示例中的侧边栏标记为基础:

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

看见了么?我们只是在模板中添加了两行代码,现在它就可以尽可能地显示动态侧边栏了(如果无法显示动态侧边栏,则仍然显示原有的侧边栏)。若在管理面板中删除侧边栏的所有widget,显示的将是原有侧边栏。

接下来还需要做一件事。如果你使用的是WordPress 2.0或以上版本,请在主题目录的functions.php中进行以下改动。

注意:下面有些例子可能涉及对主题functions.php文件的修改,修改不当会导致管理界面无法显示。建议做任何改动前,先备份functions.php。

下面是一个没有侧边栏文件的主题中的functions.php文件示例(注意文件前后不能有空行):

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

是的,只有四行。这四行代码告诉插件,你的主题需要一个动态侧边栏。这时在你的管理面板的外观菜单下,会多出一个选项——侧边栏widget。你可以试着将左侧的一些widget拖拽到标记为Sidebar 1的方框中,然后保存修改。侧边栏发生变化了么?很好。

我的侧边栏不是列表形式的,怎么办?

首先你需要知道自己侧边栏的设计样式,然后利用一些参数告诉widget怎样让他们配合主题工作。下面我们来看一个例子。

下面是原始标记:

<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>标签包装任何widget。此外,这里的标题包裹在 <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>

OK,现在你的HTML标记也处理完毕。

不过只是基本处理完毕。默认的before_widget比<li>要略微复杂。before_widget包含了某种id和类,正是它们使得before_widget变得复杂。默认的before_widget包含sprintf指令%1$s 与 %2$s,分别被id和类所取代。通过过滤widget名称得到id(因此为widget命名时一定要谨慎,你不希望在一个HTML文档里出现重复的id吧?);而类则是通过回调widget而生成的。这确保所有文本widget和RSS widget具备唯一id和相同类名称。此外,每个widget都有一个“widget”类。

因此,如果希望自己的主题尽可能灵活易用,最好用下面的代码代替上面的空字符串:

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

现在HTML标记算是完全处理成功了。

HTML代码一切正常,但是在浏览器中查看页面却乱了套!

这种问题也时有发生。你可能是在widget出现之前开始编写主题,所以你不会想到以后要在侧边栏中加入新标记,也就不会把样式表编写得更具有灵活性。如果你熟悉CSS知道,可以在样式表的结尾处加入一些新规则,借这种方式解决问题。在博客标记语言中查看你需要重新设计的选择符(id或类)。

如果你对CSS一窍不通,很遗憾,我们也无能为力。你可以联系主题作者,请他升级主题,让主题能够更好地兼容widget。

这个搜索widget太难看了,我想用主题的原始搜索框作为widget

widget是可以进行CSS选取的,因此你可以对widget进行非常细致的设计。但标记语言却不能如此。如果所有主题都自带若干能够取代基本widget(像是搜索widget和meta widget)的widget,那么很多主题都会更加完美。通常你可以将sidebar.php中已有的标记复制到functions.php中的新widget里,然后利用注册函数,以自定义的新widget代替标准widget。

你可以在主题侧边栏的任何部分进行操作,下面是一个操作实例:

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

我的主题有不止一个侧边栏,要怎样才能让所有侧边栏都变成动态的?

这并不难。只要在应该使用register_sidebar()的地方使用register_sidebars(n),其中n是你的侧边栏个数。然后将相应的个数填充到dynamic_sidebar()函数,最小值为1。

当然你也可以不使用侧边栏个数而使用侧边栏名称,这样每个主题都会有一套不同的侧边栏。