WordPress 主题之侧边栏模板

想要一个既简单又稳定而且还便宜的云服务器吗?那就选择 DigitalOcean 吧,仅需 5 块钱一个月,现在注册还可以马上获赠 10 美元。

原文:The WordPress Theme Sidebar Template

原文作者:Ian Stewart

译文:WordPress 主题之侧边栏模板

译文作者:Young

我知道你们在耐心地等待这个,大家都喜欢侧边栏模板,但是我们创建的侧边栏将和别人的有所不同,我们的会更漂亮一点。

自定义侧边栏功能

重要的事情先做。对 WordPress 侧边栏模板,我们需要确保它是支持小工具 (Widget) 的。我们的侧边栏将会有两个小工具区域,这样我们就可以把代码重复利用于两栏或者三栏的主题,其中两栏主题的侧边栏是堆在一起的,其中一个在另一个的上面。

代码相当直接了当。在 functions.php 文件中插入以下代码:

  1. // Register widgetized areas
  2. function theme_widgets_init() {
  3.         // Area 1
  4.         register_sidebar( array (
  5.  
  6.         ‘name’ => ‘Primary Widget Area’,
  7.         ‘id’ => ‘primary_widget_area’,
  8.         ‘before_widget’ => ‘<li id="%1$s" class="widget-container %2$s">’,
  9.  
  10.         ‘after_widget’ => "</li>",
  11.         ‘before_title’ => ‘<h3 class="widget-title">’,
  12.  
  13.         ‘after_title’ => ‘</h3>’,
  14.   ) );
  15.  
  16.         // Area 2
  17.  
  18.         register_sidebar( array (
  19.         ‘name’ => ‘Secondary Widget Area’,
  20.         ‘id’ => ‘secondary_widget_area’,
  21.         ‘before_widget’ => ‘<li id="%1$s" class="widget-container %2$s">’,
  22.  
  23.         ‘after_widget’ => "</li>",
  24.         ‘before_title’ => ‘<h3 class="widget-title">’,
  25.  
  26.         ‘after_title’ => ‘</h3>’,
  27.   ) );
  28. } // end theme_widgets_init
  29.  
  30.  
  31. add_action( ‘init’, ‘theme_widgets_init’ );

现在我们有两个小工具区域:Primary Widget 区域和 Secondary Widget 区域,他们的名字并不代表哪个重要哪个次要。在某些布局中,它们甚至并不用于侧边栏,但是它们仍然是小工具区域。

在 functions.php 我们还将添加两段超酷的自定义代码。

首先,我们将预设默认小工具:搜索框、静态页面、分类目录、日志存档、链接和元。我们不需要把这些默认小工具的代码写在 sidebar.php 里,我们将令 WordPress 自动把它们添加到小工具区域(这里要感谢 Ptah Dunbar)。

  1. $preset_widgets = array (
  2.  
  3.         ‘primary_widget_area’  => array( ‘search’, ‘pages’, ‘categories’, ‘archives’ ),
  4.  
  5.         ‘secondary_widget_area’  => array( ‘links’, ‘meta’ )
  6. );
  7. if ( !isset( $_GET[‘activated’] ) ) {
  8.  
  9.         update_option( ‘sidebars_widgets’, $preset_widgets );
  10. }
  11. // 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. // Check for static widgets in widget-ready areas
  2. function is_sidebar_active( $index ){
  3.   global $wp_registered_sidebars;
  4.  
  5.  
  6.   $widgetcolums = wp_get_sidebars_widgets();
  7.  
  8.   if ($widgetcolums[$index]) return true;
  9.  
  10.  
  11.         return false;
  12. } // end is_sidebar_active

现在我们需要让这些自定义代码发生作用。

编写侧边栏模板代码

在已有的动态小工具区域和预设小工具的基础上,我们创建的侧边栏模板将是您见过的最简单的模板之一。但是要记住,我们同时也通过 is_sidebar_active() 的 IF 语句把侧边栏固定。

下面就是侧边栏模板的代码:

  1. <?php if ( is_sidebar_active(‘primary_widget_area’) ) : ?>
  2.  
  3.                 <div id="primary" class="widget-area">
  4.                         <ul class="xoxo">
  5.                                 <?php dynamic_sidebar(‘primary_widget_area’); ?>
  6.  
  7.                         </ul>
  8.                 </div><!– #primary .widget-area –>
  9. <?php endif; ?>        
  10.  
  11.  
  12. <?php if ( is_sidebar_active(‘secondary_widget_area’) ) : ?>
  13.                 <div id="secondary" class="widget-area">
  14.  
  15.                         <ul class="xoxo">
  16.                                 <?php dynamic_sidebar(‘secondary_widget_area’); ?>
  17.                         </ul>
  18.  
  19.                 </div><!– #secondary .widget-area –>
  20. <?php endif; ?>

现在如果您进入 WordPress 后台的小工具页面,把任一小工具区域的小工具全部移除,那么这个条件语句就失效,侧边栏那个小工具区域就没有小工具了。

如何创建 WordPress 主题

这篇文章是如何创建 WordPress 主题教程系列的其中一部分,该系列将会教您如何从零开始创建强大的 WordPress 主题。建议您从头开始阅读这个系列并自己动手编写一些漂亮的代码。

  1. 介绍
  2. WordPress 主题开发工具
  3. 创建一个 HTML 结构
  4. 模板和目录结构
  5. Header 模板
  6. Index 模板
  7. Single、Attachment 和 404 模板
  8. Comments 模板
  9. Search 和 Page 模板
  10. Archive、Author、Category 和 Tag 模板
  11. Sidebar 模板;
  12. 创建主题的CSS和定义主题布局
喜欢就分享!
发布在博客技术 已有标签 , , , . 将该链接存入书签
  • :: 《100 个免费翻墙工具》免费电子书

    100 个免费翻墙工具