wordpress側(cè)邊欄可以在每個網(wǎng)頁上填充相同的信息，也可以根據(jù)它所在的頁面進行自定義。無論哪種方式，它都是提高您網(wǎng)站上其他內(nèi)容的知名度、鼓勵社交分享甚至通過廣告創(chuàng)收的好方法。

本文將向您展示如何創(chuàng)建WordPress側(cè)邊欄，討論放置它們的最佳位置，并解釋它們應該執(zhí)行哪些功能。我們還將分享10個最佳WordPress側(cè)邊欄插件。

• 什么是WordPress側(cè)邊欄？
• 使用站點編輯器創(chuàng)建WordPress側(cè)邊欄
• 使用小工具創(chuàng)建WordPress側(cè)邊欄
• 使用WordPress定制器創(chuàng)建WordPress側(cè)邊欄
• WordPress側(cè)邊欄 – 左與右
• 最佳WordPress側(cè)邊欄插件
• 側(cè)邊欄區(qū)域的實際用途

什么是WordPress中的側(cè)邊欄？

WordPress側(cè)邊欄是WordPress網(wǎng)站上主要內(nèi)容旁邊的一個區(qū)域，它顯示額外信息或?qū)Ш讲藛?。它通常是頁面兩?cè)的垂直列，但也可以在其他位置找到，例如頁腳下方。

使用站點編輯器創(chuàng)建WordPress側(cè)邊欄

添加WordPress側(cè)邊欄的最簡單方法是通過站點編輯器。但是，這種方法只能使用WordPress 5.9和基于區(qū)塊的主題。

使用最新的側(cè)邊編輯器添加側(cè)邊欄有兩種可能的方法 – 使用預制區(qū)塊樣板或從頭開始創(chuàng)建它們。

使用區(qū)塊樣板

WordPress區(qū)塊樣板本質(zhì)上是一個布局模板，由預定義的塊組成，您可以對其進行編輯以適合您的內(nèi)容。

要將區(qū)塊樣板添加到您的 WordPress 站點，請導航至Appearance?->?Site Editor打開站點編輯器。

在站點編輯器上，單擊屏幕左上角的加號(?+ ) 圖標并選擇Patterns選項卡。

在搜索框中鍵入側(cè)邊欄以查找包含它的模式。或者，單擊瀏覽以查看所有可用模式。

單擊要添加到頁面的樣板。

要移動圖案，請從屏幕左上角打開列表視圖。

找到代表圖案的組區(qū)塊并將其拖放到正確的位置。

完成樣板設(shè)置后，您可以通過在側(cè)邊欄中添加或刪除區(qū)塊來開始自定義它。

從頭開始創(chuàng)建側(cè)邊欄

使用塊編輯器添加側(cè)邊欄的另一種方法是手動設(shè)置所有單獨的區(qū)塊。此方法涉及創(chuàng)建一組由查詢循環(huán)和側(cè)邊欄的列組成的區(qū)塊。

打開站點編輯器并轉(zhuǎn)到要添加查詢循環(huán)和側(cè)邊欄的頁面區(qū)域。單擊將鼠標懸停在該區(qū)域上時將出現(xiàn)的加號(?+ ) 圖標，然后選擇組以添加組區(qū)塊。

一個空的組區(qū)塊將出現(xiàn)在該位置。單擊區(qū)塊內(nèi)的加號(?+?) 圖標并選擇列。

您必須選擇其中一種列變體。對于側(cè)邊欄，我們建議為左側(cè)邊欄選擇30/70或為右側(cè)邊欄選擇70/30。

之后，您將看到兩個空列。

您可以添加查詢循環(huán)區(qū)塊和側(cè)邊欄項目，例如站點標題、頁面列表或標簽云。

使用小工具創(chuàng)建WordPress側(cè)邊欄

使用小工具創(chuàng)建WordPress側(cè)邊欄對于非技術(shù)用戶來說是一個方便的選擇，因為您不必處理代碼。

WordPress小工具提供了一種向小工具區(qū)域添加內(nèi)容和功能的易于使用的方法，這些區(qū)域是您網(wǎng)站上小工具的指定位置。

小工具區(qū)域可能因一個wordpress主題而異。它們可以放置在頁眉區(qū)域、頁腳區(qū)域或側(cè)邊欄中。

要使用Widgets菜單創(chuàng)建WordPress側(cè)邊欄，請打開WordPress儀表盤，然后導航到外觀-> 小工具。

您將在左側(cè)面板上看到可用的WordPress小工具列表，而右側(cè)面板包含小工具區(qū)域區(qū)塊。

在這個例子中，我們使用了免費的Astra主題，它有六個小工具區(qū)域。將所需的小工具從左側(cè)拖放到右側(cè)的主側(cè)邊欄塊中，然后排列順序。

除了使用拖放方法外，還可以通過單擊并展開位置選項將小工具添加到小工具區(qū)域。

選擇Main Sidebar，然后單擊Add Widget按鈕。

要自定義或刪除小工具，請單擊主側(cè)欄列中的小工具部分。

WordPress還提供了可訪問性模式。單擊頁面右上角的啟用輔助功能模式鏈接，您將立即看到帶有添加和編輯按鈕的小工具菜單。

側(cè)邊欄有許多有用的WordPress小工具，例如社交媒體按鈕、搜索欄或顯示最近博客文章的小工具。

側(cè)邊欄也可以包含多個小工具。例如，側(cè)邊欄可以同時顯示導航鏈接、搜索欄和廣告。

請記住，僅使用可為您的網(wǎng)站增加價值的小工具設(shè)置側(cè)邊欄。否則，它可能會使您的網(wǎng)站變得混亂，從而導致糟糕的用戶體驗。

使用WordPress定制器創(chuàng)建WordPress側(cè)邊欄

WordPress Customizer允許您自定義WordPress主題的元素，例如菜單、主頁設(shè)置和側(cè)邊欄小工具。

自定義程度和可用小工具的數(shù)量取決于主題。它確定您的網(wǎng)站是否可以有側(cè)邊欄以及它可以位于網(wǎng)站的哪個部分。

一些WordPress主題允許您在同一頁面上顯示多個側(cè)邊欄，而其他主題則不允許。

例如，下面的Austin Kleon的網(wǎng)站有左右側(cè)邊欄。

但是，如果您不想依賴主題的限制，您可以隨時使用Custom Sidebars插件在您的網(wǎng)站上創(chuàng)建自定義小工具區(qū)域。

如果您的主題將側(cè)邊欄作為其小工具區(qū)域之一，請使用WordPress Customizer調(diào)整您的側(cè)邊欄。打開您的WordPress儀表盤，然后導航到外觀 -> 自定義。

轉(zhuǎn)到左側(cè)面板并選擇Widgets。它將向您顯示您網(wǎng)站的小工具區(qū)域列表。

選擇主邊欄。名稱可能因WordPress主題而異，但通常包含“側(cè)邊欄”一詞。

您將看到當前擁有的所有側(cè)邊欄小工具的列表。單擊任何小工具部分以展開自定義選項。

您可以重新排列小工具的順序，刪除任何側(cè)邊欄小工具，并在此面板中更改小工具標題。

開始在可用的標題部分輸入，您將立即在側(cè)邊欄看到結(jié)果。一旦您對更改感到滿意，請單擊完成。

如果您需要另一個自定義側(cè)邊欄小工具，請單擊添加小工具并瀏覽可用的WordPress小工具列表。

單擊所需的小工具，然后進行必要的調(diào)整，例如排列小工具順序或為其命名。

在此示例中，我們添加了一個沒有任何標題的日歷小工具。如果您想保持原樣，請單擊完成。

完成自定義小工具后，點擊定制器左上角的發(fā)布按鈕。

WordPress側(cè)邊欄 – 左與右

一些人認為最好將側(cè)邊欄放在右側(cè)，因為大多數(shù)人是從左到右閱讀的。我們閱讀的自然習慣使我們在向下滾動之前查看頁面的右上角。

例如，假設(shè)您的WordPress網(wǎng)站是一個博客。在這種情況下，將相關(guān)或推薦的文章作為您右側(cè)的自定義側(cè)邊欄內(nèi)容可能會鼓勵訪問者閱讀更多您的內(nèi)容。

另一方面，電子商務網(wǎng)站在左側(cè)有一個導航側(cè)邊欄會更好。

類別和過濾部分是電子商務網(wǎng)站的關(guān)鍵功能。您可以通過在產(chǎn)品頁面左側(cè)放置帶有導航結(jié)構(gòu)的自定義側(cè)邊欄來立即吸引訪問者的注意力。

在您的WordPress網(wǎng)站上運行A/B測試，看看左側(cè)邊欄還是右側(cè)邊欄更適合您：

1. 啟動同一網(wǎng)站的兩個版本 – 一個在左側(cè)帶有側(cè)邊欄，一個在右側(cè)。
2. 跟蹤兩個站點上的用戶行為，直到您收集到足夠的數(shù)據(jù)。
3. 檢查哪個網(wǎng)站表現(xiàn)更好，哪個側(cè)邊欄位置獲得更多點擊。使用A/B測試計算器來幫助您。

最佳WordPress側(cè)邊欄插件

現(xiàn)在您已經(jīng)知道如何創(chuàng)建側(cè)邊欄了，是時候添加一些功能了。幸運的是，WordPress的目錄中有許多小工具插件，它們具有各種功能來改進您的自定義側(cè)邊欄功能。

以下是我們推薦的適用于任何主題的最佳WordPress側(cè)邊欄插件的安裝建議：

1.SiteOrigin Widgets Bundle

SiteOrigin Widgets Bundle提供了一個小工具庫，提供從號召性用語 (CTA) 按鈕到定價表的廣泛功能。

此插件中的所有小工具都構(gòu)建在相同的框架上，確保了一致的設(shè)計和功能。為了更好地優(yōu)化您的網(wǎng)站性能，請僅啟用您要使用的小工具。

SiteOrigin Widgets Bundle是一個免費插件。升級到 SiteOrigin Premium 以訪問其他附加組件和快速電子郵件支持。

高級計劃從一個站點每年29美元到無限站點每年99美元起。

2.Recent Post Widget Extended

Recent Post Widget Extended使您能夠在側(cè)邊欄上顯示最近的博客文章。它鼓勵人們閱讀更多您的內(nèi)容，同時降低跳出率。

這個插件是WordPress內(nèi)置的最近文章小工具的擴展。您最近的文章將顯示縮略圖、文章摘錄和發(fā)布日期。

最近的文章小工具擴展提供了基于特定文章類型、類別或標簽顯示內(nèi)容的選項。

它還允許更高級的用戶通過其內(nèi)置的迷你CSS編輯器自定義小工具的樣式。

3.Maps Widget for Google Maps

Maps Widget for Google Maps有助于在地圖上顯示物理位置。它具有可自定義的地圖尺寸和縮放級別，允許您創(chuàng)建自定義圖釘。

這個插件使用谷歌地圖靜態(tài)地圖API，它只需要一個HTTP請求，可以快速加載。

高級版提供高級功能，例如自定義地圖配色方案以匹配您的WordPress網(wǎng)站設(shè)計和Google Analytics事件集成以了解人們?nèi)绾问褂媚牡貓D。

提供三種高級計劃。年度計劃適用于一個站點，費用為29美元/年。終身計劃包括一個個人站點的49美元/許可和無限數(shù)量的站點的79 美元/許可。

4.Content Aware Sidebars

Content Aware Sidebars側(cè)邊欄可讓您自定義側(cè)邊欄小工具以伴隨訪問者查看的特定內(nèi)容。這意味著，特定類別的文章將顯示帶有一組特定小工具的側(cè)邊欄。

該插件還提供對側(cè)邊欄部分設(shè)計的完全控制，并提供更改HTML和CSS類的選項。

Content Aware Sidebars插件是免費的，但它還提供了一個高級計劃，其中包括您網(wǎng)站的粘性側(cè)邊欄功能。計劃范圍從一個站點的49美元/年到100個站點的199美元/年。

5.Compact Archives

Compact Archives提供了一種更緊密的方式來顯示您的內(nèi)容檔案，這要歸功于它的塊設(shè)計。

默認情況下，內(nèi)置的WordPress存檔小工具將在長列表中顯示您的內(nèi)容存檔。如果您有多年的網(wǎng)站內(nèi)容，它將占用大量空間，使您的側(cè)邊欄看起來很混亂。

Compact Archive通過以整潔且易于瀏覽的方式顯示內(nèi)容存檔來解決此問題。

這個插件還支持進一步的CSS樣式。通過修改樣式表，您可以調(diào)整存檔樣式以匹配您的頁面和網(wǎng)站設(shè)計。

6.Widget Options

Widget Options允許您通過顯示或隱藏不同分類（例如頁面、文章或類別）上的小工具來創(chuàng)建自定義側(cè)邊欄。

此插件還允許您控制小工具在不同屏幕尺寸（包括臺式機、平板電腦和其他移動設(shè)備）上的顯示。它在較小的屏幕上顯示較少的小工具并應用自定義小工具對齊方式，因此您的訪問者可以輕松瀏覽您的網(wǎng)站。

這是一個免費的WordPress插件，其付費版本從一個站點每年19美元到無限站點每年149美元不等。

7.Ninja Forms

Ninja Forms可以幫助您創(chuàng)建一個可以增加您的郵件列表并產(chǎn)生潛在客戶的表單。它帶有不同的表單選項，例如訂閱、注冊和捐贈表單，可以輕松集成到您的側(cè)邊欄中。

該插件還可以讓您創(chuàng)建更復雜的表單，并具有出色的設(shè)計以匹配網(wǎng)站的外觀。它提供了許多自定義選項，并支持文件上傳等高級功能。

此外，Ninja Forms 可讓您通過各種安全支付網(wǎng)關(guān)接受付款。您可以設(shè)置是要接受單筆付款還是定期訂閱，或者要求提供固定或可變金額的捐款。

它是一個免費插件，但它還提供了29美元至129美元/許可證的個人高級附加組件和49美元至249美元/年的會員計劃。

8.Contextual Related Posts

Contextual Related Posts創(chuàng)建一個博客文章列表，其中包含旨在吸引人們注意力的縮略圖。它會根據(jù)您的文章標題和內(nèi)容算法發(fā)現(xiàn)相關(guān)文章，并將它們展示給可能會覺得它們有趣的訪問者。

上下文相關(guān)文章還提供了編輯CSS樣式的選項，為更高級的用戶提供更靈活的設(shè)計選項。它還具有內(nèi)置緩存，可減少服務器上的負載。

9.Smash Balloon Social Photo Feed

Smash Balloon Social Photo Feed允許您顯示來自您的Instagram帳戶的圖像。它可以讓您自定義許多元素，例如照片數(shù)量、圖像大小和背景顏色，讓您可以將其與您的網(wǎng)站設(shè)計風格相匹配。

Smash Balloon社交照片供稿還帶有一個關(guān)注Instagram按鈕，有助于提高人們對您的Instagram帳戶的認識。

除了免費版本，Smash Balloon還提供高級計劃，從單個站點每年49美元到無限站點每年299美元不等。

高級計劃包括高級功能，例如隱藏或顯示特定文章的選項，可讓您自定義Instagram Feed在側(cè)邊欄上的顯示方式。

10.Meks Smart Author Widget

Meks Smart Author Widget可幫助您為網(wǎng)站的小工具空間（包括側(cè)邊欄）創(chuàng)建作者簡介。通過展示您的簡歷或貢獻者的簡歷，您可以鼓勵人們更好地與您的品牌建立聯(lián)系。

該插件適用于具有一個或多個作者的網(wǎng)站。它還可以自動檢測文章的作者并自動顯示他們的簡歷。

側(cè)邊欄區(qū)域的實際用途

現(xiàn)在您已經(jīng)知道如何創(chuàng)建WordPress側(cè)邊欄、放置它的位置以及在其中放置哪些小工具，讓我們討論一下側(cè)邊欄本身的實際用途。

我們精心挑選了適用于任何類型網(wǎng)站的側(cè)邊欄區(qū)域的五種實際用途。讓我們一一來看看。

一、閱讀推薦

不要讓您的訪問者在僅閱讀一篇文章后離開 – 將他們的注意力引導到您的熱門文章或相關(guān)文章上。這將有利于SEO并推動更多流量。

還要記住，訪客停留的時間越長，他們轉(zhuǎn)化為客戶或回頭客的機會就越高。

推薦插件：WordPress Popular Posts和Jetpack

2. 電子郵件訂閱

如果您的訪問者喜歡您的內(nèi)容，他們很可能希望聽到您的更多信息。在側(cè)邊欄上放置時事通訊訂閱表格，以便他們可以快速注冊您網(wǎng)站上的新更新。

簡要說明讀者可以從您的時事通訊中獲得哪些內(nèi)容，并包括您的時事通訊訂閱者的數(shù)量作為社交認可。

這也是為您未來的營銷活動增加電子郵件列表的好方法。

推薦插件：OptinMonster和MailChimp

3.社交媒體功能

在您的側(cè)邊欄上放置社交分享按鈕，讓人們將您的內(nèi)容傳播到他們的網(wǎng)絡。

如果您有多個社交媒體渠道，請?zhí)砑宇~外的小工具，將您的訪問者引導至您的社交資料。這也將增加增加社交媒體受眾的機會。

推薦插件：?Simple Social Icons和Easy Social Share

4. 社交認可

社會證明增加了您網(wǎng)站的可信度。例如，您的社交媒體關(guān)注者、訂閱者數(shù)量或推薦信的統(tǒng)計數(shù)據(jù)表明您的業(yè)務和品牌是合法的。

展示社交證明可以幫助您贏得人們的信任，尤其是當他們是您網(wǎng)站的新手時。

推薦插件：Social Count Plus和Testimonials Widgets

5. 固定側(cè)邊欄

如果您有很多長文章，固定側(cè)邊欄效果最好。它允許訪問者隨時方便地訪問側(cè)邊欄菜單，即使他們已經(jīng)向下滾動很遠。

推薦插件：Q2W3 Fixed Widget和Sticky Menu (or Sticky Header) on Scroll

小結(jié)

邊欄是顯示人們可能想知道的其他信息的絕佳方式，例如相關(guān)文章的鏈接、作者的簡歷和注冊表單。您可以使用三種方法添加側(cè)邊欄——通過新的站點編輯器、小工具菜單或WordPress定制器。

市場上還有許多用于側(cè)邊欄的小工具和小工具插件，但請記住，您應該只安裝有用的小工具。

首先，我們建議安裝這些插件：

• SiteOrigin Widgets Bundle?– 包括您網(wǎng)站可能需要的各種小工具。
• Recent Post Widget Extended– 幫助訪問者看到更多您的內(nèi)容。
• Ninja Forms?– 幫助建立電子郵件列表、提供訂閱或提供會員注冊。

僅當它們可以為您的網(wǎng)站做出重大貢獻時才添加更多插件。請記住，您安裝的小工具和插件越少，您的網(wǎng)站就會運行得越好。此外，簡潔的側(cè)邊欄將自動改善用戶體驗。

您在WordPress中添加側(cè)邊欄的能力還取決于您使用的主題。雖然默認WordPress主題通常不包含側(cè)邊欄，但許多第三方主題都支持它們。