這篇文章是「 WordPress小工具 」介面的使用+設定教學。
小工具頁面是透過區塊編輯器形式,讓站長們進行內容編輯(例如:網站側邊欄、網站頁尾工具等 ..)。更多 WordPress 後台教學。
WordPress 小工具其實也有舊版編輯模式,對一些 WordPress 老手來說可能會覺得比較熟悉,如果想還原到原來的介面,在文章後半段也會教學,站長該如何做操作。
本文會著重於介紹目前的 WordPress 小工具功能,讓你用最簡單的流程,快速上手!
1. 設定側邊欄功能
這個章節,我們會帶領大家了解小工具功能,運用區塊編輯器,完成 Blog 網站 常見的側邊欄設定。文中會用實際步驟,嵌入常用的小工具到網站側邊欄。
整體使用流程,也跟新增 WordPress 文章、WordPress 頁面 的方法差不多,那我們開始囉:)
Step1:打開小工具面板
首先,前往到後台的「 外觀 > 小工具 」,會看見小工具區塊編輯器介面。
Step2:搜尋小工具
接下來我們先在側邊欄新增一個「 搜尋工具 」。
打開 Main Sidebar(主側邊欄)> 點上列表的「+」按鈕 > 在搜尋列中輸入「 搜尋 」尋找該小工具 > 拖曳或點選元素按鈕,即可將「 搜尋 」小工具加進頁面。
調整「 搜尋 」小工具的細項,可以直接點選右頁的「 搜尋 」小工具區塊編輯。
可以調整的範圍包括:「 搜尋 」按鈕樣式、上標題文字、搜尋引擎內文字··等等。
都設定好之後,如果覺得上標題與搜尋列的編排過於緊密,可以將上標題的預設字刪除,再自行新增一個小標題,讓間距看起來寬一些。
小標題新增方法:在搜尋小工具上方,新增一個「 標題 」區塊 > 輸入文字 > 大小選擇「 H4 」。
設定結束,我們到前台檢查,可以看到「 搜尋 」工具新增完成啦~
Step3:所有文章分類
這一個步驟要新增的是「 所有文章分類 」的小工具。
我們從區塊列找出「 分類 」按鈕,點選或拖曳新增至右頁預覽畫面。
確認分類內容無誤之後,我們來幫「 所有文章分類 」加個小標題(預設是沒有的)。
在小工具區塊列 > 找到標題 > 拖曳或點選進「 所有文章分類 」區塊上。
新增之後,輸入標題文字 > 大小選擇「 H4 」。
一樣切換到前台檢查。
預設沒辦法設定文章分類排序的條件,那有辦法自己設定嗎?
我們有分享 改變分類排序的方法 文章,可以參考看看唷~
Step4:嵌入 FB 粉專 / 社團
使用區塊編輯器的「 自訂 HTML 」元素,並貼上 Facebook 粉專的程式碼,就可以順利在 WordPress 嵌入粉專囉!
想知道怎麼嵌入,可以參考教學:如何嵌入 Facebook 粉專+臉書社團 。
最後總結
以上就是 WordPress 小工具(區塊編輯器)的教學啦,基本上新增小工具的方式都很類似。
找到你想要的元素,放入右邊的預覽畫面,然後設定細節,就 OK 了!
2. 其他欄位設定
頁尾小工具設定
一般的網站頁尾設定,同樣可以到「 外觀 > 小工具 」內,找到有標示 Footer 的位置,就可以設計頁尾樣式囉!
但依據每個人下載的主題不同,像是 Astra 就有自己的頁尾編輯器,如果要修改頁尾就需使用 Footer Builder(頁尾編輯器)才有辦法調整唷。更多 Astra 主題教學。
備註:簡單來說,可先用 WordPress 預設小工具區塊調整。如果調整後發現頁尾沒變化,那可能是你套用的主題,有自帶頁尾編輯的功能,就需要去那邊做調整:)
WooCommerce 電商側邊欄
小工具區塊編輯器,也有適用電商平台使用的 WooCommerce 側邊欄小工具,像是:所有商品、最新商品、熱門商品等 .. 分類。
搜尋 WooCommerce 就會有非常多電商元素,選擇你喜歡的新增到「 WooCommerce Sidebar 」或是「 Product Sidebar 」欄位,這 2 個都是電商相關的,就會順利顯示啦!
新增成功,點選區塊也可進行細節編輯。
「 顯示商品數量 」可以選擇要在側邊欄顯示幾項商品;「 排序依 」選擇顯示商品的條件;「 排序 」則可以選擇升序或降序。
設定好之後,來到 WordPress 前台的商品相關頁面,看一下顯示成果。太棒啦~果然順利出現了!
3. 恢復傳統小工具畫面
有些習慣使用舊版 WordPress 小工具的站長,可能會覺得舊版介面比較好用,或是單純覺得舊版小工具比較習慣,就能安裝 WordPress 官方開發的 Classic Widgets(傳統小工具),就會回到原來的畫面囉!
下面簡單帶大家操作一下。
Step1:安裝 Classic Widgets 外掛
前往 WordPress 後台的「 外掛 > 安裝外掛 」,搜尋 Classic Widgets 然後安裝+啟用。
接著,再度前往「 外觀 > 小工具 」,就會看到我們熟悉的小工具設定介面,又再度回來啦~~
若你沒有使用過舊版小工具的經驗,基本上會建議使用現有的新版小工具就可以囉!
常見問題
對於 WordPress 的後台不太熟悉,有基礎教學嗎?
犬哥網站有 給新手的WordPress 後台教學 ,結合這篇新的後台小工具教學,相信聰明的你一定很快就會熟悉 WordPress 後台操作啦!
想要調整側邊欄的文章 / 商品排序,有推薦的外掛嗎?
Category Order and Taxonomy Terms Order 外掛可以幫助網站的文章分類、商品分類進行排序,讓訪客可優先點選指定選項。
具體教學,可以參考:在 WordPress 更改分類排序 文章。
除了嵌入 FB 粉專 / 社團,還想要嵌入 Google Map ?
WordPress 功能性非常的強大,如果想在網站嵌入 Google Map 地圖,讓訪客能順利找到實體地址,可參考 Google Map 嵌入教學。
聯絡犬哥網站
在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!
接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。
資源一:犬哥網站(專業 WordPress 網頁設計&SEO 行銷公司)
如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&SEO 行銷公司),請專家協助你會更容易!
我們有多年網頁設計、SEO 網站排名經驗,加上上百個高質感作品、SEO 實戰案例,絕對能滿足您的需求!
資源二:WordPress 高手架站課+SEO 排名飆升課(線上課程)
如果想學習更深入的 WordPress 架站技巧,或是想透過 SEO 關鍵字提升網站流量?
可以參考犬哥近期推出的這兩門課程,課程非常的扎實,都是犬哥自己實戰出來的經驗分享,不打高空只教你做出成績!
- WordPress 高手架站課:
從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等豐富內容,一次教會你。
課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能! - SEO 排名飆升課:
教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等,大幅提升行銷能力。
帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!