侧边栏

什么是侧边栏

侧边栏是主题中一个小工具的区域,小工具区域是主题中用户可以添加自己的小工具的地方。侧边栏在主题中不是必须的,但包含一个侧边栏意味着用户可以通过定制器或小工具管理面板向小工具区域添加内容。

小工具可以用于各种目的,从列出最近的文章到进行实时聊天。

侧边栏这个名字来源于小工具区域通常在博客左侧或右侧的长条中创建的时代。今天,边栏的发展已经超越了其最初的名称。它们可以包含在你网站的任何地方。把侧边栏看作是包含小工具的任何区域。

 

注册侧边栏

要使用侧边栏,必须先在functions.php中进行注册

首先,register_sidebar()有几个参数,无论它们是否被标记为可选,都应该被定义。这些参数包括x、y和z

  • name – 侧边栏的名称,这是用户将会在小工具面板里看到的名称。
  • id – 必须小写,你将在主题中使用dynamic_sidebar函数来调用它。
  • description – 侧边栏的描述,同样的会展示在小工具管理面板。
  • class – 要分配给小工具的HTML的CSS类名。
  • before_widget – 放在每个小工具前面的HTML
  • after_widget – 放在每个小工具后面的HTML,用来关闭before_widget打开的标签。
  • before_title – 放在每个小工具标题前面的HTML,比如标题标签。
  • after_title – 放在每个小工具标题后面的HTML,用来关闭before_title打开的标签。

我们使用register_sidebarwidgets_init函数注册边栏。

add_action( 'widgets_init', 'themename_widgets_init' );
function themename_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Primary Sidebar', 'theme_name' ),
        'id'            => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );

    register_sidebar( array(
        'name'          => __( 'Secondary Sidebar', 'theme_name' ),
        'id'            => 'sidebar-2',
        'before_widget' => '<ul><li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li></ul>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}

注册一个侧边栏,告诉WordPress你正在外观>小工具中创建一个新的小工具区域,用户可以拖动他们的小工具。有两个注册边栏的函数:

第一个函数注册一个侧边栏,第二个可以注册多个。

建议你单独注册侧边栏,因为它允许你给每个侧边栏起独特的、描述性的名字。

 

示例

对于页眉和页脚的小工具区域,将它们命名为 "页眉小工具区域 "和 "页脚小工具区域",而不是 "侧边栏1"和 "侧边栏2"(这是默认的)是有意义的。这为侧边栏的位置提供了一个有用的描述。

以下代码在functions.php中注册侧边栏:

add_action( 'widgets_init', 'my_register_sidebars' );
function my_register_sidebars() {
    /* Register the 'primary' sidebar. */
    register_sidebar(
        array(
            'id'            => 'primary',
            'name'          => __( 'Primary Sidebar' ),
            'description'   => __( 'A short description of the sidebar.' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
    /* Repeat register_sidebar() code for additional sidebars. */
}

该代码的作用如下:

  • register_sidebar – 告诉WordPress你注册了一个边栏
  • 'name' => __( 'Primary Widget Area', 'mytheme' ), – 是小工具区域的名称,将出现在外观>小工具
  • 'id' => 'sidebar-1' – 给侧边栏指定一个ID。WordPress使用"id"来给特定的侧边栏分配小工具
  • before_widget/after_widget – 侧边栏的小工具的封装元素,“%1$s”和“%2$s”应该总是分别留在id和class中,这样插件就可以利用它们了。默认情况下,WordPress将这些设置为列表项,但在上面的例子中,它们已经被改变为div。
  • before_title/after_title – 小工具标题的封装元素,默认情况下,WordPress将其设置为h2,但使用h3会使其更具语义性。

一旦注册好侧边栏,你就可以在主题使用它们了。

 

在主题中显示侧边栏

现在你已经注册好了侧边栏,想要在主题中显示它们,执行以下两个步骤:

  1. 创建sidebar.php模板文件,使用dynamic_sidebar函数显示边栏
  2. 在主题中通过get_sidebar函数进行加载

 

创建侧边栏模板文件

侧边栏模板包含了侧边栏的代码,WordPress可以识别sidebar.php文件和任何名字为sidebar-{name}.php的模板文件。 这意味着你可以组织你的文件,每个侧边栏都在它自己的模板文件中。

 

示例

1. 创建sidebar-primary.php

2. 添加以下代码:

<div id="sidebar-primary" class="sidebar">
    <?php dynamic_sidebar( 'primary' ); ?>
</div>

注意,dynamic_sidebar需要一个参数$index,它可以是侧边栏的名称或id。

 

载入侧边栏

要在主题中载入你的侧边栏,使用get_sidebar函数。必须插入在你想要显示侧边栏的模板文件中,要载入默认的sidebar.php使用以下代码:

<?php get_sidebar(); ?>

要显示Primary侧边栏,传递$name参数:

<?php get_sidebar( 'primary' ); ?>

 

自定义侧边栏

有很多方法可以定制你的侧边栏,以下是一些例子。

 

显示默认的侧边栏内容

如果用户还没有在侧边栏上添加任何小工具,你可能希望显示内容。要做到这一点,可以使用is_sidebar_active()函数来检查侧边栏是否有任何小工具。这个函数接受$index参数,它应该是你想检查的侧边栏的ID。

这段代码检查侧边栏是否处于启用状态,如果不是,则显示一些内容:

<div id="sidebar-primary" class="sidebar">
    <?php if ( is_active_sidebar( 'primary' ) ) : ?>
        <?php dynamic_sidebar( 'primary' ); ?>
    <?php else : ?>
        <!-- Time to add some widgets! -->
    <?php endif; ?>
</div>

 

显示默认的小工具

你可能希望侧边栏默认填充一些小工具。例如,显示搜索、存档和Meta小工具。 要做到这一点,你可以使用:

<div id="primary" class="sidebar">
    <?php do_action( 'before_sidebar' ); ?>
    <?php if ( ! dynamic_sidebar( 'sidebar-primary' ) ) : ?>
        <aside id="search" class="widget widget_search">
           <?php get_search_form(); ?>
        </aside>
        <aside id="archives" class"widget">
            <h3 class="widget-title"><?php _e( 'Archives', 'shape' ); ?></h3>
            <ul>
                <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
            </ul>
        </aside>
        <aside id="meta" class="widget">
            <h3 class="widget-title"><?php _e( 'Meta', 'shape' ); ?></h3>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
            </ul>
        </aside>
   <?php endif; ?>
</div>