如何為任何 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