WordPress如何注册第二侧边栏并仅在屏宽大于1682px时显示

注册侧边栏不生效的核心原因 #

Skeleton主题将所有侧边栏注册逻辑封装在skeleton_widgets_init函数中，统一挂载到WordPress的widgets_init钩子执行。你之前在函数外部单独写register_sidebar、register_sidebars(2)代码，要么执行优先级低于主题原有逻辑被覆盖，要么没挂载到正确钩子上，所以后台「外观-小工具」页看不到新增项。

具体操作步骤 #

1. 正确注册Sidebar-Aries侧边栏 #

打开主题目录下的functions.php，找到skeleton_widgets_init函数的定义位置，不要在函数外部加注册代码，直接在函数内部原有侧边栏注册代码段的末尾，追加如下代码：

// 注册大屏左侧第二侧边栏
register_sidebar( array(
	'name'          => 'Sidebar-Aries',
	'id'            => 'sidebar-aries',
	'description'   => '宽度>1682px设备显示的左侧侧边栏，固定宽度336px',
	'before_widget' => '<section id="%1$s" class="widget %2$s">',
	'after_widget'  => '</section>',
	'before_title'  => '<h3 class="widget-title">',
	'after_title'   => '</h3>',
) );

代码里的before_widget、after_widget、before_title参数直接复制主题原有侧边栏的对应配置即可，避免样式不统一。

2. 新建独立侧边栏模板 #

在主题根目录新建sidebar-aries.php文件，写入如下代码，给侧边栏加上独立class方便后续做响应式控制：

<?php
// 侧边栏没有添加小工具时直接不输出
if ( ! is_active_sidebar( 'sidebar-aries' ) ) {
	return;
}
?>
<aside class="widget-area sidebar-aries">
	<?php dynamic_sidebar( 'sidebar-aries' ); ?>
</aside>

3. 全局引入侧边栏 #

你之前只在single.php加调用代码无法覆盖所有页面，找到主题控制公共布局的位置（通常是主容器div开始的位置，在index.php、page.php、archive.php、single.php等模板中主内容区代码之前，或者主题预留的布局前置钩子位置），加入如下引入代码：

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

如果主题是通过钩子渲染布局，直接把get_sidebar('aries')通过add_action挂到对应前置钩子即可，不用逐个修改模板文件。

4. 添加响应式样式 #

把如下CSS代码加到主题自定义样式面板或者主题样式表中：

/* 小屏默认隐藏第二侧边栏 */
.sidebar-aries {
	display: none;
}
/* 宽度大于1682px的大屏设备显示侧边栏 */
@media screen and (min-width: 1683px) {
	.sidebar-aries {
		display: block;
		width: 336px;
		float: left;
		/* 可根据主题原有布局的间距，补充margin-right等参数调整位置 */
	}
	/* 同步调整主内容区、原有右侧边栏的宽度、浮动属性，适配三栏布局即可 */
}

效果校验 #

• 保存所有文件修改后刷新后台「外观-小工具」页面，即可看到新增的Sidebar-Aries侧边栏区块，拖入需要的小工具保存
• 前台拖动浏览器窗口调整宽度，验证小于1682px时侧边栏自动隐藏、大于1682px时侧边栏在左侧正常展示即可

内容的提问来源于stack exchange，提问作者CrazyJack