WordPress 让不同页面显示不同小工具栏

最近重新开始写博客了，文章里放了不少代码块。但是在实际阅览过程中发现由于右侧存在小工具栏，导致文章显示范围特别小。尤其是代码块基本上显示不了什么内容，需要频繁左右滑动才能浏览完整，对阅读造成了不便。

文章页面显示范围狭窄示意图 — 可以看出文章页面显示范围非常狭窄，根本显示不了多少代码

那么要怎么做才能增加文章页面的显示范围呢？

1. 思路一：将右侧小工具栏移至页脚处

既然侧边栏会缩小显示范围，那我们把他从右侧边栏移动到页脚处就行了吧？
这当然是最简单的解决方法了，但实际测试后发现文章页面的显示范围虽然大了，但主页的显示就变得很奇怪了，而且右侧没有小工具栏的话也不方便用户查看近期文章及互动

移除右侧工具栏后主页显示不美观 — 移除右侧工具栏后主页内容也全部向右侧移动了，看起来很不美观

2. 思路二：让不同页面显示不同的小工具栏

既然直接移动小工具栏的做法不可行，那么能不能在主页只显示侧边栏小工具栏而文章页面只显示页脚小工具栏呢？

查询相关资料后发现 WordPress 官方确实有提供小工具相关的钩子 Search Results for “widget” | WordPress Developer Resources，再进一步查询后发现 sidebars_widgets 钩子可以对小工具进行过滤，似乎可以满足我们的需求（而且下面还有好心人放了示例代码）。

查阅了几篇文章后知道了大概的用法，于是在 ChatGPT 的帮助下，得到了可以对小组件栏进行过滤的代码。

但在使用前我们需要先找出在所使用主题中侧边栏和页脚栏的 id，这一步可以通过搜索关键词 register_sidebar 来解决。千夏使用的是 twentyseventeen 主题，相关内容在 wp-content/themes/twentyseventeen/functions.php 文件中。

function twentyseventeen_widgets_init() {
	register_sidebar(
		array(
			'name'          => __( 'Blog Sidebar', 'twentyseventeen' ),
			'id'            => 'sidebar-1',
			'description'   => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		)
	);

	register_sidebar(
		array(
			'name'          => __( 'Footer 1', 'twentyseventeen' ),
			'id'            => 'sidebar-2',
			'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		)
	);

	register_sidebar(
		array(
			'name'          => __( 'Footer 2', 'twentyseventeen' ),
			'id'            => 'sidebar-3',
			'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
			'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', 'twentyseventeen_widgets_init' );

functions.php

观察以上代码后我们不难发现，侧边栏在这里的注册 id 为 sidebar-1，而页脚栏在这里的注册 id 为 sidebar-2 和 sidebar-3，那么只需要将下面代码中的相关变量更改为对应的 id 就好了。

WordPress 也提供了很多 Conditionals 供判断页面类型，比如管理界面是 is_admin()，主页是 is_home()，文章页面是 is_singular()，搜索页面是 is_search() 等等等，具体可以参考 Conditional Tags « WordPress Codex。那么我们只需要将相关判断条件加入其中即可。

/**
 * 移除文章页面右侧侧边栏小组件
 */
function remove_widgets_from_right_sidebar($sidebars_widgets) {
	// 判断页面类型， 排除后台页面并仅包含文章页面
    if (!is_admin() && is_single()) {
        // 定义右侧侧边栏的名称或 id
        $right_sidebar = 'sidebar-1'; // 右侧边栏的名称或 id (在 register_sidebar 中的) 

        // 从 widget_list 中检查每个侧边栏中的小工具
        foreach ($sidebars_widgets as $widget_area => $widget_list) {
            // 如果是右侧侧边栏， 将小工具列表清空
            if ($widget_area == $right_sidebar) {
                $sidebars_widgets[$widget_area] = array();
            }
        }
    }

    return $sidebars_widgets;
}
add_filter('sidebars_widgets', 'remove_widgets_from_right_sidebar');

/**
 * 移除主页左右两侧页脚中的小组件
 */
function remove_widgets_from_left_and_right_footer($sidebars_widgets) {
	// 判断页面类型， 排除后台页面、自定义预览页面和文章页面
    if (!is_admin() && !is_customize_preview() && !is_single()) {
        // 定义左侧和右侧页脚栏的名称或 ID
        $left_footer = 'sidebar-2'; // 左侧页脚栏的ID
        $right_footer = 'sidebar-3'; // 右侧页脚栏的ID

        // 从 widget_list 中检查每个侧边栏中的小工具
        foreach ($sidebars_widgets as $widget_area => $widget_list) {
            // 如果是左/右侧页脚， 将小工具列表清空
            if ($widget_area == $left_footer || $widget_area == $right_footer) {
                $sidebars_widgets[$widget_area] = array();
            }
        }
    }

    return $sidebars_widgets;
}
add_filter('sidebars_widgets', 'remove_widgets_from_left_and_right_footer');

functions.php

将以上代码加入主题文件夹中的 functions.php 文件末尾（如果有 php 结束标签 ?> 的话则放在这一行之前）（如果不想主题更新后 functions.php 被还原，则可以考虑创建子主题的方式）
保存后刷新一下页面，我们就能看到效果了。

3. 效果展示

文章页面效果

主页效果

参考资料
特定のウィジェットを非表示にするコード【ワードプレス】
3 Ways To Remove Sidebar Widgets
WordPress不同页面显示不同小工具 | 烟草的香味