WordPress自定义 – 改变默认的Widget

软件网络中文HowTO 13 Comments 4,652 次

06月24日2007年

WordPress2.2默认提供了Widget，其中包括“日历”、“分类”、“存档”、“最新文章”、“最新评论”、“链接”、“相关链接”等默认的小插件。此外你还可以自定义文本内容或者RSS，不过，文本内容目前不支持PHP代码，只能支持HTML/Javascript代码，如果你想把包含PHP的代码片段放到侧边栏的Widget区域中，就需要更改你主题下面的sidebar.php了。

一、在WordPress自带的Widget后面添加自定义的PHP片段：

以Webby-Blue 为例，打开sidebar.php找到下面的代码：

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

这表示如果不启用默认的Widget的话，会在下面显示sidebar中自定义的widget。

如果你要添加自定义的PHP片段，又想使用WordPress自带的Widget，你可以在sidebar.php最后找到下面的代码：

<?php endif; ?>

在这一行的后面，手动把你的PHP代码添加到sidebar.php即可。

【注】：这种办法比起修改widget.php，手动注册自定义Widget来说，更方便一点。
缺点是：你只能把自定义的PHP代码段加到默认Widget组的最开头或者最末尾。

其实，也不是不能办到，下面介绍如何增加多个Widget区域。

二、增加WordPress默认的Widget区域：

WordPress的Widget是在你主题目录下的functions.php中注册的。
以Webby-Blue 为例，打开functions.php，会看到如下代码片断：

<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>

把代码片断中的：

register_sidebar(array(…

换为下面的代码：

// 数字2可以换成你想定义的Widget区域的数目。
register_sidebars(2, array(…

保存，然后，打开sidebar.php,找到下面的代码片段：

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
…
<?php endif; ?>

把它改为：

// 显示第1个Widget组。
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(1) ) : ?>
…
<?php endif; ?>

在第1个Widget组显示完以后，你可以接着显示第2组：

// 显示第2个Widget组。
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(2) ) : ?>
…
<?php endif; ?>

保存文件，在后台管理的“模板”->“Widget”页面，可以看到由默认的一个Widget区域显示为2个。你可以从下面的“当前可用的 Widgets”中拖动到需要的Widget区域。

【注】：“当前可用的 Widgets”中的Widget不能同时出现在任意两个Widget。

三、将自定义的PHP代码片段穿插在WordPress的Widget中：

上面介绍了如何添加自定义的PHP代码片段，以及如何增加系统默认的Widget数目。有了上面的介绍，相信大家已经知道怎样自定义PHP代码片段的位置了。

没错，只需要将自定义的PHP代码片段插在Widget组之间，通过自定义Widget组里面显示的Widget，就可以达到随意调整PHP代码片段的目的。

我把自己的Webby-Blue主题更改为三栏显示，自定义了Widget的显示，呵呵。

本站演示地址：http://www.fadesky.com

widget, wordpress, 自定义

收藏到：QQ 书签 | 百度收藏 | Google书签 | 收客收藏 | Technorati

(8 votes, average: 4.25 out of 5)

Loading ...

猜你也会喜欢下面的文章:

2007年09月21日 -- 中文HowTO网站首页改版，欢迎继续关注！ (9)
2007年08月14日 -- 如何解决Google Docs不能发布到Wordpress的问题 (1)
2007年07月23日 -- 如何才能让你的一天卓有成效 (3)
2007年06月12日 -- WordPress出现504错误的解决办法 (0)
2007年06月9日 -- 如何给你的 WordPress Blog 加上 SiteMap (1)

已经有 13 条留言了, 我也要留言, 本文 Trackback 地址

sofish 说道:
2007年07月03日 19:07:01
上次就是看了你这篇文章,还收藏了…呵呵…不错…

回复
aoyoo 说道:
2007年07月14日 23:07:39
啊
请问博主,你的这个模板是怎么改成3栏的呢
我是了很多次,都改不成3栏
因为我基本不会php…
望指教,谢谢

回复
中文HowTO 说道:
2007年07月15日 13:07:26
这个和PHP基本没什么关系。你需要修改下面两个文件：

1. style.css

把其中的#page中的width改宽，具体值，你可以参考下面的。
#page {
margin: 0px auto;
width: 990px;
}
然后，找到#sidebar，计算一下大致的宽度，参考下面的：
#sidebar {
float: right;
padding: 7px 5px 20px 0px;
width: 390px;
color: #666666;
overflow: hidden;
}

2.sidebar.php
把包含在<div id=”sidebar”>…</div>中的所有DIV的CSS的float属性改为：”float: left”
注意控制宽度就可以了。

你可以多试几次，主要是把握布局的宽度，在firefox下用firebug可以很方便地查看页面元素的CSS、宽度…属性。建议你装一个插件调试。

回复
aoyoo 说道:
2007年07月15日 15:07:30
诶呀
终于改好了
真累,不过不是用的mougua的方法.
因为我的sidebar是用Widgets实现的,修改sidebar.php里面的内容没有效果…
但是收到这篇文章的启发,
我把sidebar改成2列.
美列里面一个widgets,
不过这样其实没有mougua的好,无法实现跨2列的效果.
不过已经满足啦.

回复
aoyoo 说道:
2007年07月15日 15:07:36
诶呀呀
不好意思,说错了说错了
不是mougua,
是fadesky,
因为最近也在和mougua讨论模板的事情,
回复时候就看错了,
fadesky不要见怪

回复
中文HowTO 说道:
2007年07月15日 20:07:10
跨两列也可以的，在sidebar的<div id=”sidebar”>…</div>中，直接插入一个DIV，宽度设为100%就可以了。

如果要控制两列的显示更加整齐一点，也可以先插入一个大的DIV，然后在里面分别插入两个小的DIV，分别把CSS的float属性设为left即可。

回复
aoyoo 说道:
2007年07月16日 19:07:28
嘿嘿“
搞定

回复
keke 说道:
2007年08月29日 14:08:55
我用和你一样的主题，改天整整！

回复
keke 说道:
2007年10月21日 22:10:41
lz，我想请问一下，如何实现侧边栏每一项内容都用那个框框起来？

回复
中文HowTO 说道:
2007年10月22日 10:10:03
TO keke:
如果你的Wordpress使用了Widget，那么每一项的内容输出后的DIV应该应用class=”widget”.
所以，你在所用主题的style.css中，找到widget的CSS定义，添加一个边框的CSS就可以了。

回复
keke 说道:
2007年10月22日 11:10:58
谢谢你。。。。慢慢去研究一下。。。

回复
wordpress的categories feed（分类RSS输出） | 畅想帮说道:
2008年06月20日 09:06:48
[...] 但是我的代码大概与widgets冲突，一直没有改变侧边栏的分类模块，使其显示我们希望的RSS链接。更新：找到了中文HowTO上面提供的解决方法，有效。 [...]
幕幕斜阳说道:
2009年05月01日 02:05:57
我的网站www.kziz.cn的文章页面widget老是会自动调到底部去出现错版，怎样让他上来啊，能帮我看看吧，谢谢

回复

中文HowTO