網生@誌 | zEUS.'Blog

首页 » Wordpress研究 » 2007-08-11 »

WP自带sidebar widget的终极改造

Tag: ,

Update:以下提到的“本主题”是—— i3theme (Right Edition)
collapsible more link很多朋友认为 的自带 widget 功能很鸡肋,其实我也是这么觉得的… 我之前使用的模板 FreedomBlue 就是自己直接写的 sidebar.php 。
大家之所以不喜欢用 widget 是因为它的自定义性比较差,最不爽的就是它不支持 php 语句,也就是说我们无法在 sidebar 调用插件;而且 widget 不能自由的控制不同的 sidebar 内容显示在不同的页面,index 页、page 页和 single 页的 sidebar 内容完全一样… 这样显示的内容就非常有限了。虽然它的自由拖拽功能很方便,但也无法挽回被大家抛弃的下场…

由于我所使用的这个模板的特殊性(sidebar 里的模块可以自由拖动和收起),我没有选择自己写 sidebar(比较麻烦 -___-||||),直接就使用了 wordpress 自带的 widget。但是它功能的限制着实让我不爽,所以我就花了些时间对它进行了一些改造!改造的结果如下:
1、widget 的 TEXT 模块上限增加到了15(理论上可以增加无限个…);
2、single 页和 page 页的 sidebar 内容相同,但 index 页和搜索结果页的 sidebar 内容和它们有所不同;
3、sidebar 变相支持 PHP 语句。

这里先说说如何让 widget 的 sidebar 在不同页面显示不同内容。以我现在的模板为例,它默认有2个 sidebar 文件:sidebar.phpsidebar-left.php,一个显示在左侧,一个显示在右侧。然后我新建了另2个 sidebar 文件:sidebar-2.phpsidebar-3.php,新的 sidebar 文件中的代码和默认的 sidebar 文件的代码基本一样,复制粘贴即可,不过得修改它们的序号。你在默认的 sidebar 文件里可以看到下面2条代码:


在新建的 sidebar 文件中我们需要将序号改成相应的 dynamic_sidebar(3) dynamic_sidebar(4) 改好之后上传到对应的主题文件夹下。
如何让新的 sidebar 显示再其它的页面呢?首先得需要让自己的模板支持更多的 sidebar.php 。打开 functions.php 文件,找到下面的代码(以我的模板代码为例,不同模板,代码会有些不一样):

if ( function_exists('register_sidebars') )
register_sidebars(4, array(
'before_widget' => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
?>

这里的关键是:

register_sidebars(4, array(

一般来说,如果你有2栏的 sidebar 那么你这里的数字4应该是2,可能大家已经明白了,这是定义 sidebar 个数的函数。我这样定义后,widget 的后台就可以看到4栏的 sidebar 了。在给新的 sidebar 添加一些内容之后,下一步就开始让它们显示在 single 页面。
打开 single.php ,可以在这页代码的最下面看到



这是调用页脚的函数,在它上面的那条语句就是调用默认 sidebar 的函数,我们将调用默认 sidebar 的函数删除并添加:




那么新添加的2栏 sidebar 就出现在了 single 页面。如此我们可以完全自定义 index、page、single 等页面的 sidebar 内容了。

下面介绍如何让 widget 变相支持 PHP 语句。
我先想到是有些插件附带支持 widget ,我们可以直接在后台将它们拖到 sidebar 上,例如 WP-UserOnline Widget,这些支持 widget 的插件其实就是把 PHP 语句写在了 widget 模块里。换句话说,我们就是写一个 PHP 文件,让 WP 将其识别成 widget 插件,激活后便可以在 widget 后台拖动了。但我在写单个 widget 插件的时候遇到了困难,这里要感谢 Denis 为我提供了代码。下面就是 widget 插件的写法(以添加一个新的日历为例):

/*
Plugin Name: Wp_Widget_Calenda
Plugin URI: http://zeuscn.net/
Description: add anoter wp_widget_calenda in your sidebar
Version: 1.0
Author: zEUS. Tong
Author URI: http://zeuscn.net/
*/

function wp_widget_calenda_2_hook() {
function wp_widget_calenda_2($args) {
extract($args);
?>




}
register_sidebar_widget('Wp_Widget_Calenda', 'wp_widget_calenda_2');
}
add_action('plugins_loaded', 'wp_widget_calenda_2_hook');
?>

我想,凡是接触一点 PHP 语句的朋友应该可以理解上面这段代码。开头的部分是对这个插件的注释(我“无耻”的写上了自己的名字 :-P ),然后用 function 定义了新的函数: wp_widget_calenda_2 ,中间的



就是调用 WP 默认的日历的语句。根据自己的需要可以在这里使用不同 PHP 语句。

register_sidebar_widget(‘Wp_Widget_Calenda’, ‘wp_widget_calenda_2′);

这句中的 Wp_Widget_Calenda 就是在 widget 后台里显示的模块名称。
如此,我们可以添加新的存档、最新日志、分类等 widget 模块。我们为什么要添加这些新的模块呢?
那是因为默认的这些模块都各只有1个,我们将它们拖到默认的 sidebar 上之后就无法再拖到其它 sidebar 上了。
有些插件支持 PHP 语句的调用,那么我们就可以使用上面的格式,将调用语句写进去,并用 function 定义新的函数名,做一些相应的修改后,将其上传到插件目录下,进入插件后台便能看到自己新添加的 widget 单体插件了,激活后再进入 widget 后台,是不是看到新的 widget 模块了呢?按照自己的想法随意拖动吧 :-)
在添加了新的模块之后我们需要对其样式化,也就是添加相应的 CSS 效果,不同的模板 CSS 定义会不一样,这就需要大家自己动手了…

关于如何添加更多的 TEXT 模块,这里我就不具体解说了,有兴趣的朋友可以自己看下 wordpress 安装目录 wp-include 下的 widget.php 文件,这其中有定义 TEXT 个数的函数,对其做一点小修改就 OK 了。而且新的存档、最新日志、分类和日历的 widget 模块里的 PHP 调用语句都是我从这个文件里提取的。

以上就是对 wordpress 自带 sidebar widget 的改造过程,我写得比较啰嗦,希望大家能看的懂 :-P
最后附送的是 新建的存档、最新日志、分类和日历的 widget 模块,以及 sidebar-2.phpsidebar-3.php 的打包文件,下载点 这里
若是和我使用相同主题的朋友直接将他们上传到相应的目录下即可使用了,但是别忘记修改 functions.phpsingle.php 这2个文件哦~以及应用与本主题的新模块的 CSS 代码:
新的存档模块:

/* wp_widget_archives widget */
#wp_widget_archives ul li {
background: url(images/mini-archive.gif) no-repeat;
}

新的分类模块:

/* wp_widget_categories */
#wp_widget_categories ul li {
background: url(images/mini-category.gif) no-repeat;
}

新的最新日志模块:

#widget_recent_entries ul li {
background: url(images/mini-page.gif) no-repeat;
}

新的日历栏模块:

/* wp_widget_calenda */
#wp_widget_calenda table {
margin: 0px auto;
}
#wp_widget_calenda td {
padding: 0px 4px;
}

基本上就这么多,若有不清楚的地方还请留言 :-)
欢迎大家对此方法提出意见和建议,若您有更好的方法,希望能一起进行讨论!

zEUS.

« »

已经有36人发表了评论

  1. :mrgreen: 希望尽快吧
    PR更新鸟~

    • 确实不能下载了…
      我的这些模块仅仅只是支持 itheme 主题的,所以不一定适合你的主题…
      我尽快介绍一下模块的写法,届时你就可以自己为主题添加了~

  2. @jackie:呵呵,谁都有开始,慢慢来,有兴趣就多学一点。使用 WP 有什么问题,直接留言就行了 :smile:

  3. 谢谢您竟然那么快给我答复!我在vista下,IE应该是IE7,我用三个浏览器IE,Firefox和apple safari,就发现在IE7下的问题,很奇怪,在其他页面又是正常的,我自己解决不了;另外你的http://zeuscn.net/themes/这个sidebar太好了,能否分享一下?

  4. 我是新手,不懂php,就首页的sidebar的下沉就整整花了两天,解决不了,能否把你修改好的sidebar.php供喜欢贵站的fans下载?谢谢!

  5. :mrgreen: 果然很棒的教程,受教啦 :)

  6. @lei:呵呵,这个修改时又点麻烦…

  7. 不好意思,我看的睡着了。

  8. @onvip:不客气~ :smile:

文章反相链接 Pingback/Trackback

  1. JoK的臆想世界 | 平顶山 | 回来干活了

发表您的看法