如何创建自定义 WordPress 侧边栏

大多数的 WordPress 网站都有侧边栏,通过侧边栏可以展示更多丰富的内容。有的 WordPress 主题可以添加自定义侧边栏。但有有一些没有。如果当前主题不能添加自定义侧边栏,可以安装插件来实现,也可以按照本文介绍的方法添加。

如何创建自定义 WordPress 侧边栏
如何创建自定义 WordPress 侧边栏

在子主题中创建侧边栏

创建主题的子主题,这样就可以对主题进行定制化。如果你的主题还没有创建子主题,可以按照如何创建WordPress主题的子主题介绍的方法,来创建一个子主题。

注册侧边栏

要添加新的侧边栏,可以将下面的 PHP 代码,添加到子主题的 functions.php 文件中,以注册新的侧边栏。

/**
 * Added by Apple Rinquest
 * Added on 4/2/2020
 * desc: add custom sidebar widget
 */
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>',
	));
        */
}

通过上面的代码,我们将注册一个 ID 为“ ar-news-sidebar ”的新的侧边栏。在 before_widget、after_widget、before_title 和 after_title 属性中添加的 HTML 代码,用来匹配当前主题。

在此示例中,只注册一个侧边栏,我们可以根据需要,注册更多的侧边栏。我们使用“ widgets_init ”钩子,以在所有小工具都注册后触发。回调函数名称必须是唯一的,我们将其命名为“ ar_news_sidebars ”。

在主题上显示侧边栏

为了在前端显示新侧边栏,我们还需在模板中添加一些代码。在本例中,我们将新的侧边栏添加到新闻分类模板(archive-news.php)中。在模板中添加下面的 PHP 代码:

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

以插件形式添加侧边栏

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

第 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');
}
?>

作者:牛奇网,本站文章均为辛苦原创,在此严正声明,本站内容严禁采集转载,面斥不雅请好自为之,本文网址:https://www.niuqi360.com/wordpress/how-to-create-a-custom-wordpress-sidebar/

(0)
牛奇网牛奇网
上一篇 2022年1月16日 上午11:24
下一篇 2022年1月16日 下午1:23

相关推荐

发表回复

登录后才能评论