原文：The WordPress Theme Sidebar Template
原文作者：Ian Stewart
译文：WordPress 主题之侧边栏模板
译文作者：Young
我知道你们在耐心地等待这个，大家都喜欢侧边栏模板，但是我们创建的侧边栏将和别人的有所不同，我们的会更漂亮一点。
自定义侧边栏功能
重要的事情先做。对 WordPress 侧边栏模板，我们需要确保它是支持小工具 （Widget) 的。我们的侧边栏将会有两个小工具区域，这样我们就可以把代码重复利用于两栏或者三栏的主题，其中两栏主题的侧边栏是堆在一起的，其中一个在另一个的上面。
代码相当直接了当。在 functions.php 文件中插入以下代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | // 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）。
1 2 3 4 5 6 7 8 9 10 11 | $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)。
1 2 3 4 5 6 7 8 9 10 11 12 | // 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 语句把侧边栏固定。
下面就是侧边栏模板的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?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和定义主题布局 (待译）
-------------------------------------
© 逛逛精品博客，看看博客精品。| 转载请遵循"署名-非商业性使用"的创作共用协议。
没有评论:
发表评论