什麼是以及如何建立WordPress側邊欄

什麼是以及如何建立WordPress側邊欄

WordPress側邊欄可以在每個網頁上填充相同的資訊,也可以根據它所在的頁面進行自定義。無論哪種方式,它都是提高您網站上其他內容的知名度、鼓勵社交分享甚至通過廣告創收的好方法。

本文將向您展示如何建立WordPress側邊欄,討論放置它們的最佳位置,並解釋它們應該執行哪些功能。我們還將分享10個最佳WordPress側邊欄外掛。

什麼是WordPress中的側邊欄?

WordPress側邊欄是WordPress網站上主要內容旁邊的一個區域,它顯示額外資訊或導航選單。它通常是頁面兩側的垂直列,但也可以在其他位置找到,例如頁尾下方。

使用站點編輯器建立WordPress側邊欄

新增WordPress側邊欄的最簡單方法是通過站點編輯器。但是,這種方法只能使用WordPress 5.9和基於區塊的主題。

使用最新的側邊編輯器新增側邊欄有兩種可能的方法 – 使用預製區塊樣板或從頭開始建立它們。

使用區塊樣板

WordPress區塊樣板本質上是一個佈局模板,由預定義的塊組成,您可以對其進行編輯以適合您的內容。

要將區塊樣板新增到您的 WordPress 站點,請導航至Appearance -> Site Editor開啟站點編輯器。

 

站點編輯器

在站點編輯器上,單擊螢幕左上角的號( + ) 圖示並選擇Patterns選項卡。

樣板修改

在搜尋框中鍵入側邊欄以查詢包含它的模式。或者,單擊瀏覽以檢視所有可用模式。

單擊要新增到頁面的樣板。

修改樣板

要移動圖案,請從螢幕左上角開啟列表檢視。

樣板列表檢視

找到代表圖案的組區塊並將其拖放到正確的位置。

完成樣板設定後,您可以通過在側邊欄中新增或刪除區塊來開始自定義它。

區塊樣板自定義

從頭開始建立側邊欄

使用塊編輯器新增側邊欄的另一種方法是手動設定所有單獨的區塊。此方法涉及建立一組由查詢迴圈和側邊欄的列組成的區塊。

開啟站點編輯器並轉到要新增查詢迴圈和側邊欄的頁面區域。單擊將滑鼠懸停在該區域上時將出現的加號+ ) 圖示,然後選擇以新增組區塊。

新增組區塊

一個空的組區塊將出現在該位置。單擊區塊內的加號( + ) 圖示並選擇

您必須選擇其中一種列變體。對於側邊欄,我們建議為左側邊欄選擇30/70或為右側邊欄選擇70/30

設定欄目佈局

之後,您將看到兩個空列。

兩列式欄目

您可以新增查詢迴圈區塊和側邊欄專案,例如站點標題、頁面列表或標籤雲。

新增多個區塊至邊欄

使用小工具建立WordPress側邊欄

使用小工具建立WordPress側邊欄對於非技術使用者來說是一個方便的選擇,因為您不必處理程式碼。

WordPress小工具提供了一種向小工具區域新增內容和功能的易於使用的方法,這些區域是您網站上小工具的指定位置。

小工具區域可能因一個WordPress主題而異。它們可以放置在頁首區域、頁尾區域或側邊欄中。

要使用Widgets選單建立WordPress側邊欄,請開啟WordPress儀表盤,然後導航到外觀-> 小工具

小工具管理

您將在左側面板上看到可用的WordPress小工具列表,而右側面板包含小工具區域區塊。

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

除了使用拖放方法外,還可以通過單擊並展開位置選項將小工具新增到小工具區域。

選擇Main Sidebar,然後單擊Add Widget按鈕。

新增小工具至側邊欄

要自定義或刪除小工具,請單擊主側欄列中的小工具部分。

自定義或刪除小工具

WordPress還提供了可訪問性模式。單擊頁面右上角的啟用輔助功能模式連結,您將立即看到帶有新增編輯按鈕的小工具選單。

啟用小工具輔助功能模式

側邊欄有許多有用的WordPress小工具,例如社交媒體按鈕、搜尋欄或顯示最近部落格文章的小工具。

側邊欄也可以包含多個小工具。例如,側邊欄可以同時顯示導航連結、搜尋欄和廣告。

請記住,僅使用可為您的網站增加價值的小工具設定側邊欄。否則,它可能會使您的網站變得混亂,從而導致糟糕的使用者體驗。

使用WordPress定製器建立WordPress側邊欄

WordPress Customizer允許您自定義WordPress主題的元素,例如選單、主頁設定和側邊欄小工具。

自定義程度和可用小工具的數量取決於主題。它確定您的網站是否可以有側邊欄以及它可以位於網站的哪個部分。

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

例如,下面的Austin Kleon的網站有左右側邊欄。

Austin Kleon網站

但是,如果您不想依賴主題的限制,您可以隨時使用Custom Sidebars外掛在您的網站上建立自定義小工具區域。

如果您的主題將側邊欄作為其小工具區域之一,請使用WordPress Customizer調整您的側邊欄。開啟您的WordPress儀表盤,然後導航到外觀 -> 自定義。

自定義側邊欄

轉到左側面板並選擇Widgets。它將向您顯示您網站的小工具區域列表。

站點編輯器側邊欄自定義

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

修改側邊欄不同區域

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

您可以重新排列小工具的順序,刪除任何側邊欄小工具,並在此面板中更改小工具標題。

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

完成側邊欄自定義操作

如果您需要另一個自定義側邊欄小工具,請單擊新增小工具並瀏覽可用的WordPress小工具列表。

新增小工具至側邊欄區域

單擊所需的小工具,然後進行必要的調整,例如排列小工具順序或為其命名。

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

新增日曆小工具

完成自定義小工具後,點選定製器左上角的釋出按鈕。

WordPress側邊欄 – 左與右

一些人認為最好將側邊欄放在右側,因為大多數人是從左到右閱讀的。我們閱讀的自然習慣使我們在向下滾動之前檢視頁面的右上角

例如,假設您的WordPress網站是一個部落格。在這種情況下,將相關或推薦的文章作為您右側的自定義側邊欄內容可能會鼓勵訪問者閱讀更多您的內容。

部落格文章詳情側邊欄效果演示

另一方面,電子商務網站在左側有一個導航側邊欄會更好。

類別和過濾部分是電子商務網站的關鍵功能。您可以通過在產品頁面左側放置帶有導航結構的自定義側邊欄來立即吸引訪問者的注意力。

Nike官網側邊欄演示

在您的WordPress網站上執行A/B測試,看看左側邊欄還是右側邊欄更適合您:

  1. 啟動同一網站的兩個版本 – 一個在左側帶有側邊欄,一個在右側。
  2. 跟蹤兩個站點上的使用者行為,直到您收集到足夠的資料。
  3. 檢查哪個網站表現更好,哪個側邊欄位置獲得更多點選。使用A/B測試計算器來幫助您。

最佳WordPress側邊欄外掛

現在您已經知道如何建立側邊欄了,是時候新增一些功能了。幸運的是,WordPress的目錄中有許多小工具外掛,它們具有各種功能來改進您的自定義側邊欄功能。

以下是我們推薦的適用於任何主題的最佳WordPress側邊欄外掛的安裝建議:

1.SiteOrigin Widgets Bundle

SiteOrigin Widgets Bundle

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

此外掛中的所有小工具都構建在相同的框架上,確保了一致的設計和功能。為了更好地優化您的網站效能,請僅啟用您要使用的小工具。

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

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

2.Recent Post Widget Extended

Recent Post Widget Extended

Recent Post Widget Extended使您能夠在側邊欄上顯示最近的部落格文章。它鼓勵人們閱讀更多您的內容,同時降低跳出率。

這個外掛是WordPress內建的最近文章小工具的擴充套件。您最近的文章將顯示縮圖、文章摘錄和釋出日期。

最近的文章小工具擴充套件提供了基於特定文章型別、類別或標籤顯示內容的選項。

它還允許更高階的使用者通過其內建的迷你CSS編輯器自定義小工具的樣式。

3.Maps Widget for Google Maps

Maps Widget for Google Maps

Maps Widget for Google Maps有助於在地圖上顯示物理位置。它具有可自定義的地圖尺寸和縮放級別,允許您建立自定義圖釘。

這個外掛使用谷歌地圖靜態地圖API,它只需要一個HTTP請求,可以快速載入。

高階版提供高階功能,例如自定義地圖配色方案以匹配您的WordPress網站設計和Google Analytics事件整合以瞭解人們如何使用您的地圖。

提供三種高階計劃。年度計劃適用於一個站點,費用為29美元/年。終身計劃包括一個個人站點的49美元/許可和無限數量的站點的79 美元/許可。

4.Content Aware Sidebars

Content Aware Sidebars

Content Aware Sidebars側邊欄可讓您自定義側邊欄小工具以伴隨訪問者檢視的特定內容。這意味著,特定類別的文章將顯示帶有一組特定小工具的側邊欄。

該外掛還提供對側邊欄部分設計的完全控制,並提供更改HTML和CSS類的選項。

Content Aware Sidebars外掛是免費的,但它還提供了一個高階計劃,其中包括您網站的粘性側邊欄功能。計劃範圍從一個站點的49美元/年到100個站點的199美元/年。

5.Compact Archives

Compact Archives

Compact Archives提供了一種更緊密的方式來顯示您的內容檔案,這要歸功於它的塊設計。

預設情況下,內建的WordPress存檔小工具將在長列表中顯示您的內容存檔。如果您有多年的網站內容,它將佔用大量空間,使您的側邊欄看起來很混亂。

Compact Archive通過以整潔且易於瀏覽的方式顯示內容存檔來解決此問題。

這個外掛還支援進一步的CSS樣式。通過修改樣式表,您可以調整存檔樣式以匹配您的頁面和網站設計。

6.Widget Options

Widget Options

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

此外掛還允許您控制小工具在不同螢幕尺寸(包括桌上型電腦、平板電腦和其他移動裝置)上的顯示。它在較小的螢幕上顯示較少的小工具並應用自定義小工具對齊方式,因此您的訪問者可以輕鬆瀏覽您的網站。

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

7.Ninja Forms

Ninja Forms

Ninja Forms可以幫助您建立一個可以增加您的郵件列表併產生潛在客戶的表單。它帶有不同的表單選項,例如訂閱、註冊和捐贈表單,可以輕鬆整合到您的側邊欄中。

該外掛還可以讓您建立更復雜的表單,並具有出色的設計以匹配網站的外觀。它提供了許多自定義選項,並支援檔案上傳等高階功能。

此外,Ninja Forms 可讓您通過各種安全支付閘道器接受付款。您可以設定是要接受單筆付款還是定期訂閱,或者要求提供固定或可變金額的捐款。

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

8.Contextual Related Posts

Contextual Related Posts

Contextual Related Posts建立一個部落格文章列表,其中包含旨在吸引人們注意力的縮圖。它會根據您的文章標題和內容演算法發現相關文章,並將它們展示給可能會覺得它們有趣的訪問者。

上下文相關文章還提供了編輯CSS樣式的選項,為更高階的使用者提供更靈活的設計選項。它還具有內建快取,可減少伺服器上的負載。

9.Smash Balloon Social Photo Feed

Smash Balloon Social Photo Feed

Smash Balloon Social Photo Feed允許您顯示來自您的Instagram帳戶的影象。它可以讓您自定義許多元素,例如照片數量、影象大小和背景顏色,讓您可以將其與您的網站設計風格相匹配。

Smash Balloon社交照片供稿還帶有一個關注Instagram按鈕,有助於提高人們對您的Instagram帳戶的認識。

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

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

10.Meks Smart Author Widget

Meks Smart Author Widget

Meks Smart Author Widget可幫助您為網站的小工具空間(包括側邊欄)建立作者簡介。通過展示您的簡歷或貢獻者的簡歷,您可以鼓勵人們更好地與您的品牌建立聯絡。

該外掛適用於具有一個或多個作者的網站。它還可以自動檢測文章的作者並自動顯示他們的簡歷。

側邊欄區域的實際用途

現在您已經知道如何建立WordPress側邊欄、放置它的位置以及在其中放置哪些小工具,讓我們討論一下側邊欄本身的實際用途。

我們精心挑選了適用於任何型別網站的側邊欄區域的五種實際用途。讓我們一一來看看。

一、閱讀推薦

閱讀推薦例子

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

還要記住,訪客停留的時間越長,他們轉化為客戶或回頭客的機會就越高。

推薦外掛WordPress Popular PostsJetpack

2. 電子郵件訂閱

電子郵件訂閱例子

如果您的訪問者喜歡您的內容,他們很可能希望聽到您的更多資訊。在側邊欄上放置時事通訊訂閱表格,以便他們可以快速註冊您網站上的新更新。

簡要說明讀者可以從您的時事通訊中獲得哪些內容,幷包括您的時事通訊訂閱者的數量作為社交認可

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

推薦外掛OptinMonsterMailChimp

3.社交媒體功能

社交媒體功能例子

在您的側邊欄上放置社交分享按鈕,讓人們將您的內容傳播到他們的網路。

如果您有多個社交媒體渠道,請新增額外的小工具,將您的訪問者引導至您的社交資料。這也將增加增加社交媒體受眾的機會。

推薦外掛: Simple Social IconsEasy Social Share

4. 社交認可

 

社交認可資料展示

社會證明增加了您網站的可信度。例如,您的社交媒體關注者、訂閱者數量或推薦信的統計資料表明您的業務和品牌是合法的。

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

推薦外掛:Social Count PlusTestimonials Widgets

5. 固定側邊欄

固定側邊欄演示

如果您有很多長文章,固定側邊欄效果最好。它允許訪問者隨時方便地訪問側邊欄選單,即使他們已經向下滾動很遠。

推薦外掛Q2W3 Fixed WidgetSticky Menu (or Sticky Header) on Scroll

小結

邊欄是顯示人們可能想知道的其他資訊的絕佳方式,例如相關文章的連結、作者的簡歷和登錄檔單。您可以使用三種方法新增側邊欄——通過新的站點編輯器、小工具選單或WordPress定製器。

市場上還有許多用於側邊欄的小工具和小工具外掛,但請記住,您應該只安裝有用的小工具。

首先,我們建議安裝這些外掛:

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

僅當它們可以為您的網站做出重大貢獻時才新增更多外掛。請記住,您安裝的小工具和外掛越少,您的網站就會執行得越好。此外,簡潔的側邊欄將自動改善使用者體驗。

您在WordPress中新增側邊欄的能力還取決於您使用的主題。雖然預設WordPress主題通常不包含側邊欄,但許多第三方主題都支援它們。

評論留言