Npcink Blog
切换菜单

怎么添加自定义侧边栏？ - wordpress 开发

侧栏是主题的任何窗口小部件区域。小部件区域是主题中用户可以添加自己的小部件的位置。您不需要在主题中包含侧边栏

最后更新于
本页目录11 节

侧栏是主题的任何窗口小部件区域。小部件区域是主题中用户可以添加自己的小部件的位置。您不需要在主题中包含侧边栏，但是包含侧边栏意味着用户可以通过“定制程序”或“微件管理面板”将内容添加到微件区域。

小工具可用于多种目的，从列出最近的帖子到进行实时聊天。

背景图片

快速开始：

在 functions.php 中添加以下代码：

function lifet_widgets_init() {
  register_sidebar( array(
    'name'          => esc_html__( '小工具', 'lifet' ),
    'id'            => 'sidebar-1',
    'description'   => esc_html__( '添加小工具到这里', 'lifet' ),
    'before_widget' => '<section id="%1$s" class="widget %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );
}
add_action( 'widgets_init', 'lifet_widgets_init' );

在需要调用的地方添加以下代码：

<?php dynamic_sidebar( 'sidebar-1' ); ?>

自定义侧边栏：

添加下列代码到 functions.php 文件中第一个<?php 之后:

function xitou_widgets_init2() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar-single', 'xitou' ),
        'id'            => 'sidebar-2',
        'description'   => esc_html__( ' Sidebar of single', 'xitou' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'xitou_widgets_init2' );

在主题的根目录创建文件夹 sidebar，在 sidebar 文件夹内创建名为：sidebar-single.php 文件，填入下列代码：

<?php
/**
 *
 * Single页的工具栏
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * https://developer.wordpress.org/themes/functionality/sidebars/
 *
 * @package xitou
 */




if ( ! is_active_sidebar( 'sidebar-2' ) ) {
    return;
}
?>




<aside id="secondary" class="widget-area">
    <?php dynamic_sidebar( 'sidebar-2' ); ?>
</aside><!-- #secondary -->

在 single.php 中相应位置添加下列代码调用：

<?php dynamic_sidebar( 'sidebar/single' );?>

官方文档：

小部件可用于多种目的，从列出最近的帖子到进行实时聊天。

注册侧边栏

要使用侧边栏，您必须在中注册它们functions.php。

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

  • 名称 -侧边栏的名称。这是用户将在“窗口小部件”面板中看到的名称。
  • id –必须为小写。您将使用dynamic_sidebar函数在主题中调用它。
  • description-边栏的描述。这也将显示在管理窗口小部件面板中。
  • class –分配给小部件的 HTML 的 CSS 类名称。
  • before_widget –每个小部件之前放置的 HTML。
  • after_widget –放置在每个小部件之后的 HTML。应该用来关闭中的标签before_widget。
  • before_title –放在每个小部件标题之前的 HTML，例如标头标记。
  • after_title –每个标题之后的 HTML。应该用来关闭中的标签before_title。

要注册侧边栏，我们使用register_sidebar和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，您正在“ 外观”>“窗口小部件”中创建一个新的窗口小部件区域，用户可以将其窗口小部件拖动到其中。有两个注册边栏的功能：

第一个让您注册一个侧边栏，第二个让您注册多个侧边栏。

建议您单独注册侧边栏，因为它可以为每个侧边栏赋予唯一的描述性名称。

范例

对于页眉和页脚中的窗口小部件区域，将它们命名为“ Header Widget Area”和“ Footer Widget Area”，而不是“ Sidebar 1”和“ Sidebar 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(); ?>

要显示主要侧边栏，请将$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>

显示默认小部件

您可能希望默认情况下在侧边栏中填充一些小部件。例如，显示搜索，存档和元窗口小部件。为此，您可以使用：

</p>
<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>