WordPress--用代码的方式添加侧边栏-CSDN博客

本文链接：https://blog.csdn.net/feiying0canglang/article/details/129937986

原文网址：WordPress--用代码的方式添加侧边栏_IT利刃出鞘的博客-CSDN博客

简介

本文介绍WordPress如何用代码的方式来增加侧边栏。

1.注册侧栏部件

修改主题的functions.php文件，这里增加了两个侧边栏，我命名为：Sidebar1和Sidebar2。这时在Wordpress后台中点开外观=> 小工具，可以看到多了两个侧边栏：Sidebar1和Sidebar2。

到目前为止，我们仅注册了动态边栏。只有在诸如sidebar.php类的模板中或要显示它们的位置调用它们后，这些工具栏才会出现在网站上。

function wpb_widgets_init() {
	register_sidebar( array(
		'name' => 'Sidebar1',
		'id'   => 'sidebar-1',
		'description'   => __( 'The main sidebar appears on the right on each page except the front page template', 'wpb' ),
		'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' => 'Sidebar2',
		'id'   => 'sidebar-2',
		'description'   => __( 'Appears on the static front page template', 'wpb' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
}
 
add_action( 'widgets_init', 'wpb_widgets_init' );

参数解析

name：侧边栏名称
id：侧边栏 ID，必须为小写，默认为递增的数组 ID
description：侧边栏描述
class：给其中的小工具的额外 class
before_widget：里边的小工具的开头 Html 代码
after_widget：里边的小工具的末尾的 Html 代码
before_title：里边的小工具的标题的开头 Html 代码
after_title：里边的小工具的标题的末尾的 Html 代码

2.在模板中调用侧边栏

添加这些小部件区域，请在要显示它们的位置编辑模板文件（比如：sidebar.php），然后粘贴以下代码：

<aside>
    <div>	
        <?php 
            if(get_post_type() == 'blog'){
                if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar-1')) : endif; 
            }elseif(get_post_type() == 'task'){
                if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar-2')) : endif; 
            }else{
                if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar-3')) : endif; 
            }
        ?>
	</div>	    
</aside>

3.在页面相应位置使用

比如：在page.php、footer.php中加入如下代码：

get_sidebar();

get_sidebar() 用来引入侧边栏模板。

如果指定名称则引入当前主题根目录的 sidebar-{name}.php 文件，不指定则引入当前主题根目录的 sidebar.php 文件，如果文件不存在则引入 wp-includes/theme-compat/sidebar.php 文件。

用法

get_sidebar( $name );

参数

$name

(字符串)(可选)引入模板的名称，如果指定则引入当前主题根目录的 sidebar-{$name}.php 文件。

默认值：None

备注

不一样的主题修改位置不一样。比如：对于某个模板，它修改的文件如下：

修改base.php，添加更多register_sidebar语句以注册侧边栏
修改sidebar.php，使用dynamic_sidebar("xxx")以引入侧边栏

其他方案

也可以用插件的方式，添加新的侧边栏。

第 1 步：在 Plugins 文件夹下，创建一个新的文件夹。可以随意命名，这里将其命名为“ar-sidebars”。

第 2 步：创建一个名为“ar-sidebar.php”的 PHP 文件。

第 3 步：将下面的代码复制到“ar-sidebar.php”文件中。

<?php
   /*
    Plugin Name: Custom Sidebar Plugin
    description: create new sidebar
    Version: 1.0
    Author: <a href="https://applerinquest.com/">Apple Rinquest</a>
   */  

// add new sidebar
add_action('widgets_init', 'ar_news_sidebars');
function ar_news_sidebars()
{
    register_sidebar(array(
        'name' => __('News Sidebar'),
        'id' => 'ar-news-sidebar',
        'description' => __('Show news on sidebar'),
        'description'   => '',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));

        /** 
        // add another new sidebar
        register_sidebar(array(
        'name' => __('Another New Sidebar'),
        'id' => 'ar-another-sidebar',
        'description' => __('Another New Sidebar'),
        'description'   => '',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
        */
}

第 4 步：保存文件然后在Wordpress后台激活该插件。

第 5 步：将下面的 PHP 代码，添加到要显示侧边栏的模板文件中。

<?php
if (is_active_sidebar('ar-news-sidebar')) {
     dynamic_sidebar('ar-news-sidebar');
}
?>