WordPress 小工具是什麼?側邊欄與區塊小工具入門

逛部落格的時候,你大概都看過這種畫面:文章正文在中間,旁邊一條窄窄的欄位放著搜尋框、最新文章列表、分類連結,頁面最底部還有一排聯絡資訊與社群圖示。這些「跟著每一頁跑、但又不屬於文章本文」的小區塊,在 WordPress 裡就叫做小工具(Widget)。

很多新手第一次進到後台,會在「外觀」選單底下看到「小工具」這個項目,點進去卻被一堆灰色區塊跟陌生名詞卡住,不知道哪個對應到網站前台的哪一塊。更麻煩的是,有些人裝了新版佈景主題後,連「小工具」這個選單都找不到,懷疑是不是自己把功能弄壞了。

這篇會把 WordPress 小工具從頭講清楚:它是什麼、會出現在側邊欄與頁尾的哪些位置、WordPress 5.8 之後的區塊小工具跟舊版傳統小工具差在哪、怎麼新增你的第一個小工具,以及為什麼有些網站根本沒有「小工具」選單。看完你就能分辨自己的網站屬於哪一種狀況,再決定要怎麼動手。

WordPress 小工具是什麼,又出現在網站哪裡

WordPress 小工具是一個個可以重複使用的功能模組,用來在文章本文以外的固定區域顯示內容,例如搜尋框、最新文章列表、分類目錄、聯絡資訊或社群連結。你把小工具放進某個區域後,它就會跟著網站的每一頁(或符合條件的頁面)一起顯示,不需要每篇文章重寫一次。

換個方式理解:文章與頁面是「會變動的主內容」,小工具則是「相對固定的輔助內容」。一篇文章只屬於它自己那一頁,但放在側邊欄的搜尋框,會出現在整個部落格的每一篇文章旁邊。這就是小工具存在的意義,讓你一次設定、全站套用。

小工具本身不會自己決定要出現在哪裡。真正決定位置的是你的佈景主題,主題會預先劃好幾個「小工具區域」(也常被叫做 Sidebar,即使它實際上在頁尾),你只是把小工具拖進這些區域而已。所以同一個小工具,換了主題之後可能就跑到不同的位置,甚至因為新主題沒有提供對應區域而消失。

小工具會出現的三個位置:側邊欄、頁尾與頁首

小工具最常出現的位置有三個,分別是側邊欄、頁尾與頁首,其中又以側邊欄與頁尾最普遍。

側邊欄(Sidebar)指的是文章本文旁邊那條窄欄,通常在右側,也有主題放在左側。部落格類型的網站最常用它,裡面常見的內容是搜尋框、最新文章、熱門文章、分類目錄與廣告。要注意的是,WordPress 在後台常把所有小工具區域統稱為「Sidebar」,所以你看到區域名稱寫著 Sidebar,不代表它一定顯示在頁面側邊。

頁尾(Footer)是每一頁最底部的橫向區域,通常會放版權聲明、聯絡方式、網站地圖式的連結,或幾欄並排的補充資訊。許多現代主題的設計重心在頁尾而不在側邊欄,因為頁首的選單放不下太多連結,重要資訊就被挪到頁尾收尾。一個主題的頁尾可能切成好幾欄,每一欄都是獨立的小工具區域。

頁首(Header)則是頁面最上方、Logo 與主選單附近的區域。不是每個主題都開放頁首小工具,有提供的話通常用來放一行公告、一組社群圖示或一個小型搜尋框。

實際有哪些區域、各自叫什麼名字,完全看主題怎麼定義。在手機等小螢幕上,因為響應式設計(RWD)的關係,側邊欄通常會被擠到文章內容的下方,這是正常現象,不是設定錯誤。

區塊小工具與傳統小工具有什麼不同

兩者最大的差別在於編輯介面。從 WordPress 5.8 開始,官方把小工具的設定畫面改成了區塊編輯器,也就是跟你寫文章時用的古騰堡(Gutenberg)編輯器同一套操作邏輯;在這之前的版本,用的是「傳統小工具」那種一塊一塊欄位、靠拖放填寫的舊介面。

區塊小工具的好處是自由度高。過去你只能用 WordPress 預先提供的那幾種小工具,現在因為整個介面區塊化,理論上能放進區塊編輯器的內容,幾乎都能塞進側邊欄或頁尾,例如段落、圖片、按鈕、自訂 HTML,可運用的元素比舊版多很多。

代價是初次接觸需要一點適應時間。如果你已經習慣用區塊編輯器寫文章,那編輯小工具對你來說會很直覺;但如果你是從更早的版本一路用過來、習慣了舊介面,剛切換時可能會覺得不太順手。這也是為什麼官方同時保留了「傳統小工具」這條退路,後面會說明怎麼切換。

要補充的是,區塊化並不是 5.8 才突然出現的方向。WordPress 從 2018 年的 5.0 版導入古騰堡區塊編輯器開始,就一路往「萬物皆區塊」推進,小工具的區塊化只是這個過程的其中一步。

怎麼在「外觀 > 小工具」新增第一個側邊欄小工具

新增小工具的入口在後台的「外觀 > 小工具」。進去之後你會看到主題提供的幾個區域(例如 Main Sidebar、Footer),每個區域右上角都有一個「+」號,點下去就能挑選要加入的小工具。

以最常見的「在側邊欄加一個搜尋框」為例,操作節奏是這樣:

  • 第一、進入後台,點「外觀 > 小工具」。
  • 第二、找到「Main Sidebar」之類的側邊欄區域,點該區域內的「+」號。
  • 第三、在跳出的區塊清單裡找到「搜尋」,點一下就會加進去;清單很長時可以直接用上方的搜尋框輸入關鍵字找。
  • 第四、需要的話幫這個搜尋框加一個標題。做法是再插入一個「標題」區塊放在它上面,輸入文字後選 H4 之類的層級。
  • 第五、確認無誤後,按右上角的「更新」鈕儲存,前台才會生效。

加「最新文章」清單的做法完全一樣,只是把第三步選的區塊換成「最新文章」。新增之後,可以在右側的區塊設定面板裡,決定要不要顯示文章日期、摘要、作者與縮圖。每一種小工具點開後右側都會有自己的設定選項,例如調整顯示數量、排序方式或對齊。

一個關鍵習慣:改完一定要按「更新」。區塊小工具不像舊介面會即時暫存,沒按更新就離開,剛剛的調整不會留下來。

找不到「小工具」選單時的排查方向

如果你在「外觀」底下完全找不到「小工具」這個項目,先別急著重裝,最常見的原因是你用的是區塊主題(Block Theme),它根本不靠小工具來管理側邊欄與頁尾。

WordPress 的主題現在分成兩大類。一類是傳統(非區塊)主題,這類主題才有「外觀 > 小工具」的設定畫面;另一類是支援全站編輯(Full Site Editing)的區塊主題,它把頁首、頁尾、側邊欄全部交給「外觀 > 編輯器」這個全站編輯介面處理,於是「小工具」選單就被拿掉了。換句話說,選單不見不是壞了,是你的主題用了另一套機制。

遇到這種狀況,排查方向有幾個:

  • 先看「外觀」底下有沒有「編輯器」選項。有的話,代表你用的是區塊主題,要在那裡編輯頁尾與側邊欄,而不是找小工具。
  • 如果你確實想用傳統的小工具介面,可以換一個傳統主題,或安裝官方的傳統小工具外掛(下一節說明)。
  • 假如選單還在、但某些小工具區域不見了,可能是新主題沒有提供對應區域。每個主題能放小工具的位置都不一樣,換主題後原本放在舊區域的小工具會被收進「未啟用的小工具」裡,不會直接刪除,換回支援的主題就會回來。

另外,裝了某些外掛(例如電商外掛)後,反而會多出新的小工具區域,這也是正常的,代表那個外掛替你的網站增加了可放小工具的地方。

想換回舊介面時,傳統小工具外掛怎麼用

如果你不習慣區塊小工具的操作,或升級之後原本的小工具設定出現紅色錯誤、無法正常編輯,可以安裝官方維護的「Classic Widgets(傳統小工具)」外掛,把介面還原成舊版的樣子。

這個外掛的好處是幾乎不用設定。流程很單純:

  • 第一、到後台「外掛 > 安裝外掛」,搜尋「Classic Widgets」。
  • 第二、找到後按「安裝」並「啟用」。
  • 第三、回到「外觀 > 小工具」,畫面就會變回舊版那種拖放式介面。

啟用後不需要任何額外調整,停用它就會切回區塊小工具,所以你可以放心試。要留意的是,這個外掛是在傳統(非區塊)主題下才有意義,它解決的是「介面回退」的需求,而不是替沒有小工具功能的區塊主題補上小工具。

什麼時候該用它?如果你的主題或某個外掛還沒支援區塊小工具,導致原本設定好的小工具編不動、跳錯誤,那暫時用傳統小工具撐著是合理的。但如果你是全新架站、之前沒有舊小工具的使用包袱,建議直接適應新版的區塊介面,長期來看會比較省事,畢竟官方的更新方向是往區塊走。

常見的小工具類型與電商網站多出來的區域

WordPress 內建與主題提供的小工具種類非常多,但新手實際會用到的大概就那幾種。把它們對照前台會出現的效果,比較好挑。

小工具 用途
搜尋 讓訪客在站內搜尋文章
最新文章 列出近期發布的文章標題
分類 顯示文章分類目錄供點選
彙整 依月份列出歷史文章
自訂 HTML 貼入廣告碼、社群外掛或表單
圖片 / 段落 放個人簡介、Logo 或一段說明文字

挑選的原則是對應你的網站目的,而不是把區域塞滿。一個側邊欄放三到四個小工具通常就夠了,太多反而讓訪客找不到重點。

如果你的網站裝了 WooCommerce 這類電商外掛,後台會多出專屬的小工具,以及「WooCommerce Sidebar」或「Product Sidebar」這種額外的小工具區域,方便你在商品頁旁邊放購物相關的模組。這些電商小工具能在側邊欄顯示商品篩選、依價格或銷量排序的商品清單、目前購物車內容等,讓逛商品的訪客操作更順。這裡只是說明這些區域與小工具的存在,實際的收款與結帳設定屬於另一個範疇,不在小工具的討論範圍內。

從看懂位置到動手設定,新手該抓的順序

理解 WordPress 小工具,順序其實很清楚:先認得側邊欄與頁尾這些位置是主題定義的、不是你能憑空變出來的;再分清楚自己的網站是用區塊小工具還是傳統小工具、是傳統主題還是區塊主題;最後才是進「外觀 > 小工具」動手新增、調整、儲存。

把這條脈絡走過一遍,你就不會再被「找不到小工具選單」「換主題後小工具不見」這類狀況嚇到,因為你知道那多半是主題機制的差異,而不是網站壞掉。先從在側邊欄加一個搜尋框跟最新文章開始,熟悉新增與儲存的流程,之後要再放分類、社群連結或自訂內容,都是同一套操作。動手試一次,比看十篇教學都有用。

相關文章
標籤: 側邊欄, WordPress 小工具, 區塊小工具, 傳統小工具, 頁尾小工具