WordPress 主题教程 #6e：窗体化侧边栏
2007年06月13日
窗体化侧边栏是从零开始创建 WordPress 主题系列教程的第六篇的第五部分，一个支持 Widget 的侧边栏或者说是窗体化（widgetized）的侧边栏几乎是 WordPress 主题的标准。
首先，什么是窗体化（widgetizing）呢？简单的说，窗体化就是能够通过拖拉就能够整理侧边栏的模块。比如我们需要更改分类和存档的位置，只需要简单把分类和存档列表拖到它们的位置即可，根本不用去修改侧边栏的代码。
第1步：创建 functions.php 文件
打开记事本，然后把空白文件保存为 functions.php。把 functions.txt 文件中所有的内容拷贝到 functions.php 中。
回顾一下，现在在“tutorial”主题文件夹下应该有4个文件。
第2步：窗体化侧边栏
直接在侧边栏的第一个 <ul> 标签输入以下代码：
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
直接在 </ul> 标签之前输入以下代码：
<?php endif; ?>
保存 index.php 文件，然后我们到 WordPress 后台 => 外观 => Widget 就可以把 Widget 拖到侧边栏了。
WordPress 主题教程
- WordPress 主题教程：从零开始制作 WordPress 主题
- WordPress 主题教程 #1：介绍
- WordPress 主题教程 #2：模板文件和模板
- WordPress 主题教程 #3：开始 Index.php
- WordPress 主题教程 #4a：Header 模板
- WordPress 主题教程 #4b：Header 模板 2
- WordPress 主题教程 #5：主循环
- WordPress 主题教程 #5b：日志内容
- WordPress 主题教程 #5c：日志元数据
- WordPress 主题教程 #5d：Else，日志 ID，链接标题
- WordPress 主题教程 #5e：日志导航链接
- WordPress 主题教程 #6：侧边栏
- WordPress 主题教程 #6b：页面链接列表
- WordPress 主题教程 #6c：存档和链接列表
- WordPress 主题教程 #6d：搜索框和日历
- WordPress 主题教程 #6e：窗体化侧边栏
- WordPress 主题教程 #7：尾部
- WordPress 主题教程 #8：验证 XHTML
- WordPress 主题教程 #9：Style.css 和 CSS 介绍
- WordPress 主题教程 #10：十六进制颜色代码和样式化链接
- WordPress 主题教程 #11：宽度和布局
- WordPress 主题教程 #12：日志样式化和其他杂项
- WordPress 主题教程 #13：样式化侧边栏
- WordPress 主题教程 #14：底部和拆分 Index
- WordPress 主题教程 #15：子模板文件
- WordPress 主题教程 #16：留言模板
- erdaoo 的 WP Theme 教程学习笔记
- WordPress 主题教程电子书下载
翻译自：http://www.wpdesigner.com/2007/03/06/wp-theme-lesson-6e-widgetizing-sidebar/，并根据中文习惯和个人理解做了修改！
20 条评论 添加你的评论 →
1. 白驼山人 | 2007:08:11 - 02:32:26 | #
谁把这句话解释下？谢谢
2. 白驼山人 | 2007:08:11 - 02:45:46 | #
3. jane | 2007:08:13 - 23:16:54 | #
学完这章之后，
最后得到的效果和前一章是一样的。
后台我也设置了widget
没有任何变化 是正常的吗？
4. Fallout | 2007:10:14 - 22:50:47 | #
请问如何窗体化侧边栏多个sidebar？
5. Persephone | 2007:12:04 - 16:26:07 | #
Warning: Cannot modify header information – headers already sent by (output started at D:\xampplite\htdocs\wordpress\wp-content\themes\tutorial\functions.php:1) in D:\xampplite\htdocs\wordpress\wp-includes\pluggable.php on line 391
我在启用插件的时候，突然页面空白，上面出现了些字，什么意思啊？
求楼主解答！
6. Persephone | 2007:12:05 - 08:55:38 | #
?楼主大人能不能拨空解答一下小女子的疑问呢？
因为又到瓶颈了，做不下去了，拜托了！
顺便献上十二万分的感激！
7. Persephone | 2007:12:05 - 13:20:03 | #
在这一节里，关于那个 Widget 插件，我用的是2.3.1的版本，也就是楼主提供下载的版本，根据这一节所说2.2版本之后都不需要安装 Widget 这个插件的，可是我在后台并没有看到这个插件啊！也无法启用。而且根据所有步骤做下来，跟前一章节都一样的。
然后我去下了这个插件，但是却显示：Warning: Cannot modify header information – headers already sent by (output started at D:\xampplite\htdocs\wordpress\wp-content\themes\tutorial\functions.php:1) in D:\xampplite\htdocs\wordpress\wp-includes\pluggable.php on line 391
实在不明白原因啊！望高手解答！谢谢！
8. Denis | 2007:12:06 - 20:02:24 | #
@Persephone 2.2 之后内置 widget 到核心代码中，在插件栏看不到，你碰到的问题是 你的 functions.php 中的代码有问题，清仔细查阅下！
9. Persephone | 2007:12:12 - 13:19:31 | #
非常感谢楼主大人拨空回答小的的问题！
我的确在插件栏里没有看到，后来无意中在主题，即Presitation中看到了Widgets，就在theme后面一个标签。
我点它之后，有看到SIDE BAR，根据它上面说的，我把最下面的内容，比如日历拖到SIDE BAR中，保存后回网站看效果，并没有出现边栏，就连本来在最下面显示的日历也没有了。这是怎么回事呢？
10. Persephone | 2007:12:12 - 13:25:02 | #
functions.php 中的代码有问题？
为什么？我是直接复制楼主提供的代码啊！并没有做任何修改，怎么会有问题呢？
还望楼主大人明示。
另外，再次对楼主大人的翻译与解答深表感激！
11. Persephone | 2007:12:12 - 13:49:01 | #
另外，三楼的JANE问道：
学完这章之后，
最后得到的效果和前一章是一样的。
后台我也设置了widget
没有任何变化 是正常的吗？
这个问题我也很好奇答案。
因为我是跟着楼主翻译的课程一步步学的，之前的课程中没有提到栏的问题，会不会显不出SIDE BAR是因为我的基础栏数一直是一栏的缘故呢？
12. Persephone | 2007:12:12 - 14:01:15 | #
还有一个问题（请原谅小的比较愚笨，问题比较多。）显不出两栏会不会是之前的模板没有提到“栏”的问题？
我们一直在一栏的模式下面写程序的，会不会改成两栏就会显出来了呢？
另外三楼的JANE问道：学完这章之后，
最后得到的效果和前一章是一样的。
后台我也设置了widget
没有任何变化 是正常的吗？
这个答案是？
13. 胡戈戈 | 2008:01:31 - 10:50:08 | #
为你这种好问的精神感动哇
14. jxmoon | 2008:04:04 - 22:07:00 | #
@Persephone 2.2 之后内置 widget 到核心代码中，在插件栏看不到，你碰到的问题是 你的 functions.php 中的代码有问题，清仔细查阅下！
我以碰到相同问题.
能不能请 雪山飞猪 提供一下2.5. functions.txt
15. 玖伍贰柒 | 2008:11:21 - 11:45:34 | #
我根据水煮鱼的WP Theme 教程学习Theme的制作，前面的都可以，但在第6节写了代码而达不到教程所说的效果
原文 WP Theme 教程 #6e ：窗体化侧边栏
http://fairyfish.net/2007/06/04/so-you-want-to-create-wordpress-themes-huh/
1、按照教程做好了4个文件，就是主题没有窗体化侧边栏的效果
2、index.php中的代码：
<?php wp_list_pages(‘depth=2&title_li=页面’); ?>
这段代码这样写对吗？？
3、functions.php中的代码：
4、请高手们帮忙看看，谢谢！
16. guomian | 2009:02:06 - 17:33:48 | #
水煮鱼：
我按照你说的步骤完成了functions.php文件的建立，然后按照步骤正确输入，但是我刷新页面却出现Parse error: syntax error, unexpected $end in C:\xampp\htdocs\wordpress\wp-content\themes\tutorial\index.php on line 82字样！请问这是为什么？我是用的是wordpress2.7！
期待您的解答！多谢！~
17. Denis | 2009:02:06 - 17:39:02 | #
PHP 语法错误，自己学习 PHP！
18. guomian | 2009:02:06 - 17:55:05 | #
输入的就是
哪里有语法错误啦？
19. 阿星 | 2009:04:17 - 20:44:19 | #
所有呆码一点问题都没有，如果有问题请返回检查呆码，主要是引号会出问题。
20. Blue3D | 2009:12:11 - 14:59:04 | #
文章第一段：（译者注：WordPress 2.2 已经内置了 Wodgets）里面wodgets写错了一个字母。
谢谢博主的无私奉献！