wordpress侧边栏_如何自动调整WordPress侧边栏以匹配内容高度

wordpress侧边栏

Widgets make it super easy to add cool things to our WordPress sidebar. However, sometimes your sidebars can become much longer than the actual content area. Recently a user asked if there was a way to automatically make the sidebar height the same as the content area to make it symmetrical. In this article, we will show you how to auto adjust WordPress sidebar to match the content height.

小部件使向WordPress 侧边栏添加酷的东西变得非常容易。 但是，有时您的侧边栏可能会比实际内容区域长得多。 最近，用户询问是否有一种方法可以自动使侧边栏的高度与内容区域的高度相同，以使其对称。 在本文中，我们将向您展示如何自动调整WordPress侧边栏以匹配内容高度。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明，请继续阅读。

First you need to install and activate the SidebarAutomizer plugin. Upon activation, go to Settings » sidebarAutomizer to configure the plugin.

首先，您需要安装并激活SidebarAutomizer插件。 激活后，转到设置»sidebarAutomizer来配置插件。

You can auto adjust the height of your sidebar by entering the div ID or Class for the content and sidebar containers. These values are different for each theme which is why the plugin cannot auto detect them. Finding these values is easy. All you need to do is open your website in Google Chrome, and open Inspect Element by right clicking anywhere on your website.

您可以通过输入内容和侧边栏容器的div ID或类来自动调整侧边栏的高度。 每个主题的这些值都不同，这就是插件无法自动检测到它们的原因。 找到这些值很容易。 您需要做的就是在Google Chrome中打开您的网站，然后通过右键单击网站上的任意位置来打开Inspect Element。

This will split your browser screen into three sections. On the bottom left screen, you will be able to see the HTML source code for your page. Moving your mouse over different elements in the HTML source will highlight them in the upper window. You need to find the div containing the main content area.

这会将您的浏览器屏幕分为三个部分。 在左下方的屏幕上，您将能够看到页面HTML源代码。 将鼠标移到HTML源代码中的不同元素上将在上部窗口中突出显示它们。 您需要找到包含主要内容区域的div。

As you can see, in the screenshot above the div containing the content area uses the ID primary and class site-content.

如您所见，在包含内容区域的div上方的屏幕截图中，使用了ID主要和类别site-content。

Repeat the inspect element process once again to find the div ID or Class used for sidebar and for the single widget element.

再次重复检查元素过程，找到用于侧边栏和单个小部件元素的div ID或类。

That’s all. You can now save your settings. Visit a page on your website where the sidebar height is supposed to be longer than the content area. You will notice that the plugin will automatically hide the extra widgets to adjust the sidebar height.

就这样。 您现在可以保存设置。 访问您网站上侧边栏高度应该比内容区域长的页面。 您会注意到，该插件将自动隐藏额外的小部件以调整边栏高度。

We hope this article helped you auto adjust WordPress sidebar to match content height. You may also want to check out how to show / hide widgets on specific WordPress pages.

我们希望本文能帮助您自动调整WordPress侧边栏以匹配内容高度。 您可能还想了解如何在特定的WordPress页面上显示/隐藏窗口小部件 。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Google+上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-auto-adjust-wordpress-sidebar-to-match-content-height/

wordpress侧边栏