如何为任何 WordPress 页面或帖子类型显示内容感知侧边栏

好的，让我们谈谈内容感知侧边栏。 然而，在我们做之前，我们应该首先谈谈一般的侧边栏。

典型的侧边栏是网页设计和许多 WordPress 主题的主要内容。 它们是显示附加信息的好地方，例如联系表格、您最新或最受欢迎的博客文章、广告或其他任何不是您网站主要吸引力的内容。 虽然近年来，没有侧边栏的单页设计成为趋势，但它们仍然是一个流行元素。

在大多数情况下，无论您在哪个页面上，网站的侧边栏都会显示相同的内容。 然而，这并不总是实现它的最佳方式。 事实上，有很多理由在不同的页面或帖子上显示自定义侧边栏，这些页面或帖子知道它们随附的内容。

因此，在本文中，我们想更多地讨论这个话题。 我们将首先向您展示内容感知侧边栏的用例。 这样，您就会了解它们是否对您有意义。 之后，我们将继续解释如何在您的 WordPress 网站上实现这种类型的侧边栏。

准备好出发？ 然后让我们开始破解。

内容感知侧边栏的意义是什么？

首先，让我们谈谈为什么您甚至会根据侧边栏旁边显示的内容来定制侧边栏。 毕竟，静态侧边栏已经存在了很长时间，而且似乎仍然有效。 为什么要搞乱一个工作系统？

事实证明，在很多用例中，使用内容感知侧边栏是有意义的：

• 入职- 首次访问者可能需要与常客不同的内容。 例如，您的登录用户不需要看到旨在让人们加入您的网站或您的电子邮件列表的“注册”号召性用语。
• 量身定制的信息——某些信息在某些页面上比其他信息更有意义。 示例包括联系页面上的其他联系信息、博客页面上的最佳或最新文章、商店页面上的特别优惠——您了解要点。
• 改进的 SEO — 虽然不是主要因素，但侧边栏内容对于搜索引擎优化仍然很重要（特别是如果小部件标题正确地包含在标题标签中）。 因此，您可以使用内容感知侧边栏来使您的页面更具针对性。
• 号召性用语— 您还可以使用此类侧边栏为网站上的不同位置自定义号召性用语。
• 语言——它们还可以为您网站的不同语言版本创建侧边栏，并针对不同的市场。

如您所见，使用内容感知侧边栏的原因有很多，但此列表远非详尽无遗。 但是，现在让我们将重点转向如何实现它们。

如何在 WordPress 中实现内容感知侧边栏

有三种主要方法可以为帖子和页面设置自定义侧边栏。 它们的共同点是侧边栏的内容会根据它显示在哪个页面或帖子上而改变。 条件包括 WordPress 标签、类别、页面名称或其他属性，例如用户是否登录。

之后，侧边栏通常以三种方式之一进行更改：

• 过滤小部件——一个侧边栏充满了小部件，背景中的某种逻辑决定了哪些小部件出现在哪个位置，哪些是隐藏的
• 设置整个侧边栏——另一种方法是创建完全独立的侧边栏，当满足不同条件时，这些侧边栏会显示在同一位置。 它们可以包含单独的小部件配置。
• 硬编码到主题中——当然，你也可以在你的主题文件中添加自定义侧边栏，如果你有编码的话

我个人认为第二种方法是导致用户界面最有序的方法。 但是，在下文中，我们将详细介绍每种方法，以便您可以自己下定决心。 之后，我们将列出更多选项以在您的 WordPress 网站上实现自定义侧边栏。

使用 Jetpack Widget Visibility 过滤小部件

过滤站点上小部件外观的最简单方法是 Jetpack 中包含的恰当命名的小部件可见性模块。 如果您的站点上已经有了该插件，那么创建自定义侧边栏就像激活模块一样简单（如果它默认尚未激活）。 或者，您也可以使用此独立版本。

完成并转到小部件菜单后，您会在所有小部件上找到一个新的“可见性”按钮。 单击它，您可以通过下拉菜单轻松地为您的小部件实现所需的显示逻辑。

可见性条件如下：

• 类别- 小部件可以出现在某些类别页面或所有类别页面上
• 作者——出现在所有作者页面上或仅限于某些用户
• User - 检查用户是否已登录
• 角色- 根据用户角色控制小部件
• 标签- 像类别页面一样工作，但用于标签
• 日期- 控制存档小部件出现的日期
• 页面— 为首页、帖子页面、存档页面、404 错误页面、帖子类型、帖子类型存档和静态页面设置小部件可见性

对于每个选项，您可以定义是显示还是隐藏小​​部件。 规则必须单独输入，这意味着不能一次输入多个页面。 但是，这种方法仍然比在其他解决方案中根据需要手动输入页面 ID 更方便（更多内容见下文）。 还有一个匹配所有条件复选框，强制仅在所有条件都有效时才显示小部件。

内容感知侧边栏允许您设置自定义侧边栏

我们要讨论的第二个解决方案是 Content Aware Sidebars 插件。 如前所述，此插件允许您设置整个侧边栏，然后您可以使用小部件填充这些侧边栏并分配给帖子和页面。 使用起来非常简单。

安装后，您会在 WordPress 菜单中找到一个名为Sidebars的新菜单项。

当您在此处选择Add New 时，您将进入此屏幕：

在这里，首先要做的是命名您的侧边栏。 之后，是时候设置显示它的条件了。 可用选项类似于 Jetpack：

• 静态页面——选择静态页面来显示侧边栏，如首页、搜索结果或 404 错误页面
• 帖子- 与上面相同的选项，但用于帖子
• 页面- 选择您网站上的哪些页面显示侧边栏
• 媒体- 确定您的侧边栏出现在哪些媒体页面上
• Authors - 将显示限制为作者页面
• 页面模板- 选择页面模板以显示侧边栏
• 类别- 选择某些类别或所有类别档案
• 标签- 相同的选项，但用于标签
• 格式- 同样，格式存档的相同设置
• 日期- 再次用于日期存档
• URLs （仅限专业版）— 将侧边栏显示限制为某些 URL

其他设置：

• 时间表— 设置侧边栏显示的时间。 在免费版本中，您只能使用一整天，而 Pro 版本提供更精细的时间段。
• 设计— 将自定义 CSS 类添加到侧边栏、小部件和小部件标题以操作它们
• 高级- 设置侧边栏的顺序（如果有多个）

除此之外，您还可以将侧边栏相互合并，替换它们，将它们设置为小部件区域并控制它们对登录用户的可见性（Pro 中提供的用户角色）。

完成配置后，新的侧边栏会显示在普通小部件菜单中，您可以在其中填充、激活和停用它，甚至可以查看过去的修订。 整洁而轻松。

手动创建自定义侧边栏

最后，还可以通过编码创建自定义侧边栏。 WordPress为此提供了很多选择，我们将快速完成整个过程。

创建自定义侧边栏要做的第一件事是注册一个新的小部件区域。 为此，只需将以下代码输入到您的（子）主题的functions.php中：

function custom_sidebar_init() {
	register_sidebar( array(
		'name'          => 'New Custom Sidebar',
		'id'            => 'custom_sidebar_1',
		'description'   => 'Add widgets here to appear for single posts.',
		'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', 'custom_sidebar_init' );
[/php
Of course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.

<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />

However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.

In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:

<?php get_sidebar(); ?>

有了这个：

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>
	<aside id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'custom_sidebar_1' ); ?>
	</aside><!-- #primary-sidebar -->
<?php endif; ?>

之后，这是前端的最终结果：

当然，如果您有进一步的开发能力，可以添加更多条件，例如仅对登录用户显示侧边栏。 您还可以使用 WordPress 模板层次结构更详细地了解在何处显示它。 它可能不是最动态的解决方案，但是，它确实有效，并且可以完全在后台工作，而无需安装其他插件。

实现内容感知侧边栏的其他方法

除了上述选项之外，我们还有更多具有类似功能的插件。

小部件逻辑

这个插件的工作原理类似于 Jetpack 解决方案，但是，您需要手动输入 WordPress 条件标签，而不是下拉菜单。 这样，您可以根据需要根据需要确定小部件出现的位置。

但是，要做到这一点，您需要知道页面的 id，总体而言，这比我们上面看到的技术要多一些。 这并不意味着它不起作用并且不是一个强大的插件，但是，技术含量较低的人可能会更好地使用其他东西。

自定义侧边栏

由 WPMU DEV 制作，这里我们有另一种解决方案来设置适用于任何小部件区域的内容感知侧边栏。 该插件可让您在任何帖子、页面、类别存档、帖子类型等上动态显示小部件。 此外，它通过非常强大且易于使用的用户界面完成所有这些工作。 有关完整介绍，请在他们的网站上查看 Tom Ewer 的文章。

简单的页面侧边栏

创建自定义侧边栏的最终解决方案是为了简单起见。 它允许您直接从页面编辑器分配侧边栏并进行批量更改。 完成后，您可以像往常一样在小部件菜单中填充它们。

不幸的是，缺少更高级的自定义选项。 但是，如果您只想为您的页面设置不同的侧边栏，这可能是您正在寻找的解决方案。

内容感知侧边栏简而言之

在您的网站上使用定制的侧边栏有很多很好的理由。 并非所有内容都需要相同的信息才能出现在其旁边。 使用内容感知侧边栏，您可以显示有意义的内容，而不是使用一个标准的侧边栏。

在本教程中，我们学习了几种创建自定义侧边栏的方法。 从过滤小部件到创建全新的侧边栏，再到将它们编码到您的主题中，应有尽有。

有了这些信息，您现在可以只提供您需要的侧边栏内容，以改善用户交互和为您的受众提供服务。 试一试！

您对内容感知侧边栏的体验如何？ 在下面的评论部分让我们知道！

文章缩略图来自 Kit8.net/shutterstock.com