侧栏与小工具（下）：before_widget 与 before_title
小工具输出来的 HTML 长什么样
你在后台拖一个“最新文章”进侧栏，前台会输出什么？
结构是这样的：
<div class="panel panel-primary"> <!-- before_widget -->
<div class="panel-heading">最新文章</div> <!-- before_title + 标题 + after_title -->
<ul>
<li><a href="...">文章一</a></li>
<li><a href="...">文章二</a></li>
</ul>
</div> <!-- after_widget -->四个“包装参数”分别对应：
| 参数 | 包的是 | caogenbj 的值 |
|---|---|---|
before_widget |
整个小工具的开头 | <div class="panel panel-primary"> |
after_widget |
整个小工具的结尾 | </div> |
before_title |
标题的开头 | <div class="panel-heading"> |
after_title |
标题的结尾 | </div> |
为什么这么设计
好处是：小工具本身不用管样式。
“最新文章”这个小工具，它只负责输出一个 <ul><li>...</li></ul>。外面包什么 div、什么 class，全由主题在 register_sidebar 里定。
所以你换主题时，小工具的内容不变，外观自动跟着新主题走。这就是为什么同一批小工具在不同主题里长得不一样。
一个常见的坑
如果你的 before_widget 和 after_widget 没配对（比如开头是 <div class="panel">，结尾忘了写 </div>），整页的 div 嵌套就乱了，后面的布局会崩。
这种问题很难查——页面不报错，只是“样式错位”。所以改 register_sidebar 时，一定要检查标签配对。
标题的标签
before_title 里，很多人喜欢放 <h3>：
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',但要注意：每个小工具都会输出一个标题标签。侧栏放 5 个小工具，页面上就多 5 个 <h3>。这会影响页面的标题层级（SEO 上的 h1/h2/h3 结构）。
caogenbj 用的是 <div class="panel-heading">，不占标题层级。这是个好选择——侧栏的“标题”本来就不该跟正文标题抢层级。
小工具里放自定义 HTML
后台“外观 → 小工具”里有个“自定义 HTML”小工具，可以直接粘贴 HTML（比如广告代码、统计代码）。
注意：只有管理员能编辑，普通用户看不到。所以放统计代码是安全的。
小结
一句话记住：before_widget/after_widget 包整个小工具，before_title/after_title 包标题；它们决定外观，小工具本身只负责内容。
下一篇讲搜索表单——searchform.php 到底管什么。
本系列导航
相关文章
搜索文章：
联系方式：
近期文章