如何自動調整WordPress側邊欄以匹配內容高度


小部件使向WordPress側邊欄添加有趣的東西變得非常容易。 但是,有時您的側邊欄可能會比實際內容區域長得多。 最近,用戶詢問是否有一種方法可以自動使側邊欄的高度與內容區域相同,以使其對稱。 在本文中,我們將向您展示如何自動調整WordPress側邊欄以匹配內容高度。

冗長的側欄

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

首先,您需要安裝並激活SidebarAutomizer插件。 激活後,轉到 設置»sidebarAutomizer 配置插件。

側邊欄自動設置

您可以通過輸入內容和側邊欄容器的div ID或類來自動調整側邊欄的高度。 每個主題的這些值都不同,這就是插件無法自動檢測到它們的原因。 找到這些值很容易。 您需要做的就是在Google Chrome瀏覽器中打開網站,然後右鍵單擊網站上的任意位置以打開Inspect Element。

使用檢查元素工具查找div ID或類

這會將您的瀏覽器屏幕分為三個部分。 在左下方的屏幕上,您將能夠看到頁面的HTML源代碼。 將鼠標移到HTML源代碼中的不同元素上將在上部窗口中突出顯示它們。 您需要找到包含主要內容區域的div。

如您所見,在包含內容區域的div上方的屏幕截圖中,使用了ID主要和類別site-content。

再次重複檢查元素過程,以找到用於側邊欄和單個小部件元素的div ID或類。

就這樣。 您現在可以保存設置。 訪問您網站上側邊欄高度應該比內容區域長的頁面。 您會注意到,該插件將自動隱藏額外的小部件以調整邊欄高度。

側欄高度調整

我們希望本文能幫助您自動調整WordPress側邊欄以匹配內容高度。 您可能還想了解如何在特定的WordPress頁面上顯示/隱藏小部件。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Google+。