因为它是许多WordPress网站的组成部分,在本文中,我们将带您了解有关WordPress侧边栏的所有信息。
这是我们将介绍的所有内容:
有很多要讲的,所以让我们开始吧。
虽然主要内容会在页面之间变化,但每个页面的侧边栏通常都是相同的(尽管您可以使用一些策略来自定义侧边栏)。
一幅图片价值一千个单词,所以让我们看一些侧边栏的例子来说明这一点。在每个示例中,我们将用红色框突出显示侧边栏区域:
默认情况下,您的WordPress侧边栏受所选主题的控制。开箱即用,您的主题将控制:
但是,按照我们将在本文中向您展示的策略,您可以将边栏添加到任何WordPress主题中,即使默认情况下您的主题没有附带侧边栏也是如此。
要将内容添加到侧边栏,可以使用WordPress小工具。这就是为什么有些人也将您的侧边栏称为“小工具区域”的原因。
每个小工具都是一个内容。例如,您可以使用一个小工具添加搜索框,使用另一个小工具添加电子邮件订阅表单,依此类推。稍后我们将详细向您显示。
侧边栏可以以多种不同方式使用。这里有些例子:
在本文的后面,我们将向您展示如果您的主题不包含侧边栏(或没有足够的侧边栏),则如何创建自定义侧边栏。但是,现在,让我们假设您的WordPress主题已经支持侧边栏,并讨论一些可以控制侧边栏工作方式的常用方法。
这些示例并非适用于所有WordPress主题,但它们适用于大多数现代WordPress主题。
注意–如果您使用的是免费的Hello主题,则默认情况下,Hello主题故意不包括侧边栏,以使内容轻巧。在本文的后面,我们将向您展示如何将边栏添加到Hello(和其他主题)。
可以控制主题的侧边栏的第一个地方是WordPressCustomizer(外观-自定义)。如果您的主题包含侧边栏和用于自定义主题的功能,则通常会在此处。
确切的设置区域取决于主题,但是通常您会希望查找诸如“布局设置”、“常规设置”、“站点范围设置”等内容。
例如,使用OceanWP主题,您可以在常规设置中从不同的侧边栏配置中进行选择。您可以使用右侧边栏,左侧边栏或左侧和右侧的侧边栏。
您还可以配置侧边栏的宽度:
如果找不到这些设置,请尝试在WordPressCustomizer中探索其他区域。或者,请查阅主题开发人员的支持文档。
如果您的主题具有此功能,则在WordPress编辑器中工作时应该会看到这些选项。它们可能显示为编辑器下方的meta框。或者,某些主题也将它们添加到“文档”侧边栏中。
同样,并非所有主题都包括这些类型的页面级侧边栏控件。
侧边栏是您网站上的一个区域。但是要将内容添加到该区域,您需要使用WordPress小工具。
您可以通过两种方式将小工具(内容)添加到主题的现有侧边栏中:
两个区域都会自动同步,因此完全可以使用任何一个。但是,使用WordPressCustomizer的优点是,您可以在网站的实时预览中实时查看小工具的外观。
要通过WordPress定制程序管理侧边栏小部件,请转到外观→自定义。
然后,选择“小工具”菜单选项。首先,系统将提示您选择要管理的小工具区域。根据您的主题,您可能只会看到一个选项。或者,您可能会看到多个选项,包括非侧边栏区域(如页脚):
然后,您可以单击“添加小工具”按钮以开始将小工具添加到侧边栏中。添加小工具后,可以使用侧栏中的选项进行配置:
添加新的小工具时,您会立即看到它们出现在您的网站的实时预览中。您还可以使用拖放来重新排列现有小工具的顺序。
除了自定义程序外,WordPress还包括一个专用的小工具区域,您可以通过转到外观→小工具进行访问。
在这里,您将看到所有可用的小工具以及主题的所有侧边栏区域(以及其他小工具区域,如页脚)。
要添加小工具,只需将它们拖到侧边栏部分。然后,您可以通过扩展小工具的选项来自定义其内容:
您还可以通过拖放来重新排列侧边栏中小工具的顺序。
如果您具有ElementorPro,则可以使用Elementor的可视化拖放界面来设计包含在侧栏中的内容。
为此,请转到模板→新建模板并创建一个新的Section模板。例如,您可以创建一个包含电子邮件选择加入表格或号召性用语(CTA)的模板。完成后,请确保发布模板。
接下来,将Elementor库小工具添加到要在其中显示模板的侧边栏。然后,使用“选择模板”下拉菜单选择要添加到侧边栏中的特定模板:
到目前为止,我们假设您的主题已经支持侧边栏,并为您提供了内置设置来控制它们。
但是,如果不是这种情况怎么办?您遇到的某些情况可能是:
值得庆幸的是,创建侧边栏非常轻松。这里有两个基本步骤:
在可以将小工具添加到侧边栏并将其显示在WordPress网站的前端之前,您需要在WordPress中注册侧边栏。
注册WordPress自定义侧边栏后,当您转到外观→小工具时,它将显示出来,您将能够使用上一部分中的方法添加小工具。
要注册您的自定义侧边栏,您需要做的就是向其中一个添加一个小代码段:
这是您需要的代码片段:
functionmy_custom_sidebar(){register_sidebar(array('name'=>__('CustomSidebarArea','your-theme-domain'),'id'=>'custom-side-bar','description'=>__('Thisisthecustomsidebarthatyouregisteredusingthecodesnippet.Youcanchangethistextbyeditingthissectioninthecode.','your-theme-domain'),'before_widget'=>'
一旦注册了侧边栏,您应该在转到外观→小工具时将其显示为一个选项。如果需要,您可以开始将小工具添加到自定义侧边栏中,就像我们之前向您展示的那样:
但是,您尚未完成–您仍然需要配置WordPress,以使其在网站的前端显示自定义侧边栏(及其小工具)。
在这里,您有两个选择:
使用Elementor,您可以为主题的任何部分创建新模板。例如,如果您为“页面”创建一个新模板,则所有页面将自动使用该模板。
首先,转到模板→主题生成器。然后,选择要首先添加侧边栏的位置-SinglePost或SinglePage:
如果您选择从头开始设计模板,只需确保使用两列,然后在希望显示自定义侧边栏的位置添加侧边栏小工具。
然后,编辑补充工具栏小工具,然后使用“选择补充侧边栏”下拉菜单选择您在上一步中注册的自定义补充侧边栏。
完成此操作后,您应该可以实时预览已添加的所有小工具:
当您通过WordPress定制程序或专用小工具区域添加新小工具时,它们将自动显示在此侧边栏区域中。
要结束,请确保发布模板。完成后,可以使用显示条件来控制侧边栏模板的显示位置。您可以将其显示在所有内容上(以在整个网站上使用侧边栏)。或者,您可以使用显示规则仅将侧边栏添加到特定内容。
除非您习惯使用HTML/CSS/PHP,否则应坚持使用上面的Elementor方法。
要显示带有代码的WordPress自定义侧边栏,您需要直接编辑主题的模板文件。因为您要直接编辑主题,所以使用WordPress子主题至关重要。这将防止您在更新主题时所做的更改被覆盖。
创建子主题之后,将single.php文件从父主题的文件夹复制到子主题的文件夹。然后,编辑single.php文件,并在要显示自定义边栏的位置添加以下代码段: