原文:The WordPress Theme Sidebar Template
原文作者:Ian Stewart
译文作者:Young
我知道你们在耐心地等待这个,大家都喜欢侧边栏模板,但是我们创建的侧边栏将和别人的有所不同,我们的会更漂亮一点。
自定义侧边栏功能
重要的事情先做。对 WordPress 侧边栏模板,我们需要确保它是支持小工具 (Widget) 的。我们的侧边栏将会有两个小工具区域,这样我们就可以把代码重复利用于两栏或者三栏的主题,其中两栏主题的侧边栏是堆在一起的,其中一个在另一个的上面。
代码相当直接了当。在 functions.php 文件中插入以下代码:
-
// Register widgetized areas
-
function theme_widgets_init() {
-
// Area 1
-
register_sidebar( array (
-
-
‘name’ => ‘Primary Widget Area’,
-
‘id’ => ‘primary_widget_area’,
-
‘before_widget’ => ‘<li id="%1$s" class="widget-container %2$s">’,
-
-
‘after_widget’ => "</li>",
-
‘before_title’ => ‘<h3 class="widget-title">’,
-
-
‘after_title’ => ‘</h3>’,
-
) );
-
-
// Area 2
-
-
register_sidebar( array (
-
‘name’ => ‘Secondary Widget Area’,
-
‘id’ => ‘secondary_widget_area’,
-
‘before_widget’ => ‘<li id="%1$s" class="widget-container %2$s">’,
-
-
‘after_widget’ => "</li>",
-
‘before_title’ => ‘<h3 class="widget-title">’,
-
-
‘after_title’ => ‘</h3>’,
-
) );
-
} // end theme_widgets_init
-
-
-
add_action( ‘init’, ‘theme_widgets_init’ );
现在我们有两个小工具区域:Primary Widget 区域和 Secondary Widget 区域,他们的名字并不代表哪个重要哪个次要。在某些布局中,它们甚至并不用于侧边栏,但是它们仍然是小工具区域。
在 functions.php 我们还将添加两段超酷的自定义代码。
首先,我们将预设默认小工具:搜索框、静态页面、分类目录、日志存档、链接和元。我们不需要把这些默认小工具的代码写在 sidebar.php 里,我们将令 WordPress 自动把它们添加到小工具区域(这里要感谢 Ptah Dunbar)。
-
$preset_widgets = array (
-
-
‘primary_widget_area’ => array( ‘search’, ‘pages’, ‘categories’, ‘archives’ ),
-
-
‘secondary_widget_area’ => array( ‘links’, ‘meta’ )
-
);
-
if ( !isset( $_GET['activated'] ) ) {
-
-
update_option( ‘sidebars_widgets’, $preset_widgets );
-
}
-
// update_option( ‘sidebars_widgets’, NULL );
现在,在我们的 Primary Widget 区域 (primary_widget_area),会自动显示搜索、静态页面、分类目录以及日志存档这四个小工具。而在 Secondary Widget 区域 (secondary_widget_area) 将会显示链接和元这两个小工具。只要激活 WordPress 主题,这些小工具就会自动显示。
看见最后一行 “ // update_option( 'sidebars_widgets', NULL ); ” 了吗?如果您想重启小工具的话,就把前面的两斜杠去掉(并替代前面那一行?)。我想您能猜到 “NULL” 表示没有小工具。
其次,我们将创建一个新的条件以便检测已有的小工具区域是否有小工具,这对我们以后写侧边栏代码很有帮助(谢谢 Chaos Kaizer)。
-
// Check for static widgets in widget-ready areas
-
function is_sidebar_active( $index ){
-
global $wp_registered_sidebars;
-
-
-
$widgetcolums = wp_get_sidebars_widgets();
-
-
if ($widgetcolums[$index]) return true;
-
-
-
return false;
-
} // end is_sidebar_active
现在我们需要让这些自定义代码发生作用。
编写侧边栏模板代码
在已有的动态小工具区域和预设小工具的基础上,我们创建的侧边栏模板将是您见过的最简单的模板之一。但是要记住,我们同时也通过 is_sidebar_active() 的 IF 语句把侧边栏固定。
下面就是侧边栏模板的代码:
-
<?php if ( is_sidebar_active(‘primary_widget_area’) ) : ?>
-
-
<div id="primary" class="widget-area">
-
<ul class="xoxo">
-
<?php dynamic_sidebar(‘primary_widget_area’); ?>
-
-
</ul>
-
</div><!– #primary .widget-area –>
-
<?php endif; ?>
-
-
-
<?php if ( is_sidebar_active(‘secondary_widget_area’) ) : ?>
-
<div id="secondary" class="widget-area">
-
-
<ul class="xoxo">
-
<?php dynamic_sidebar(‘secondary_widget_area’); ?>
-
</ul>
-
-
</div><!– #secondary .widget-area –>
-
<?php endif; ?>
现在如果您进入 WordPress 后台的小工具页面,把任一小工具区域的小工具全部移除,那么这个条件语句就失效,侧边栏那个小工具区域就没有小工具了。
如何创建 WordPress 主题
这篇文章是如何创建 WordPress 主题教程系列的其中一部分,该系列将会教您如何从零开始创建强大的 WordPress 主题。建议您从头开始阅读这个系列并自己动手编写一些漂亮的代码。
- 介绍;
- WordPress 主题开发工具;
- 创建一个 HTML 结构;
- 模板和目录结构;
- Header 模板;
- Index 模板;
- Single、Attachment 和 404 模板;
- Comments 模板;
- Search 和 Page 模板
- Archive、Author、Category 和 Tag 模板;
- Sidebar 模板;
- 创建主题的CSS和定义主题布局
原创文章,转载请注明: 转载自精品博客
本文链接地址: WordPress 主题之侧边栏模板
相关博文:

4 条评论
HI,我想请教一下
我做的模板不支持小工具怎么办
是不是得添加一段代码
@卡卡罗特 这个我不无法给你答案,不过我想你既然能够自己做一个模板,那么你一定也有办法使得模板支持小工具。
你好博主,我的侧边栏在后台不能拖动,也不能改名了,请博主指导一下怎么在源代码改一下名,我有几个错别字改动不了了
比如,随机日志写成随即日志了
日志分类还没有名字
@wanfone 可能只是浏览器的问题,你试一下清除浏览器 cookie,如果你的 WP 有使用加速工具,可以试试清除缓存。