WordPress 教學基礎介紹（外觀）：佈景主題、自訂、小工具與選單
重點整理
WordPress 後台的「外觀」負責網站的樣式與版面：佈景主題用來安裝與切換主題；自訂可以即時預覽修改網站名稱、色彩與附加 CSS；小工具與選單則決定側邊欄、頁首與頁尾要放什麼內容。實際的選項會依佈景主題而有所不同。
本文目錄
還記得在裡有一篇 WordPress主題選用 的教學文章嗎？在那一篇教學裡面我說明了佈景主題的重要性，也推薦各位初心者們如果想要建立一個專業的、實用的、吸睛的、引人入勝的網站，可以購買好的主題來佈置網站。那麼在這一篇 WordPress 教學 基礎介紹五（外觀） 的教學中，又要教大家什麼呢？
在 WordPress 外觀選項中，有更多針對網站佈置上細節的設定，如果說套用一個主題是把網站的框架建立起來，在外觀選項的其他設定就是加入更多的元素讓整個網站更趨於完整。由於主題的檔案是由不同的團隊開發的，所以在網站外觀的設定上也會有不同的設計，在這一篇必須先讓大家了解在 WordPress 外觀選項中最基本的介面操作方式以及功能解釋，這樣以後初心者們在應用不同的主題後，想根據主題的設定去建立網站功能或設定外觀，才能夠事半功倍！
從WordPress控制台的側邊選單進入外觀選項的各個介面
第一步：從控制台側邊選找到外觀，點擊後會有佈景主題、自訂、小工具、選單、主題編輯器。
介紹WordPress外觀選單內的各項功能
1.佈景主題（Theme）：在前面的 WordPress主題選用 已經提到過佈景主題，主要就是透過佈景主題選單下載或上傳，並安裝喜歡的主題風格，將其套用在自己的網站上。
2.自訂（Custom）：在自訂裡面可以修改套用的主題裡面各項設定，比如：網站識別能更改網站的名稱，色彩能更改頁首文字顏色及背景顏色等等，在做完更改後記得點擊已儲存的按鈕，變更才會生效。可以看到在選單的最後一項是附加的CSS，如果對CSS有相當的了解，也可以直接在CSS裡面更改更多的細節。
小提醒：在這個頁面的設定是透過即時預覽這個功能來操作，也就是說在變更設定的同時，右側的畫面會直接套用變更後的樣式，這樣就可以馬上看到修改後的樣式是不是自己想要的喔！
3.小工具（Widget）：在每個佈景主題內都有許多的可使用小工具，在左側有提供許多的可用小工具，你可以將你需要的小工具，例如圖片、影片、月曆、標籤雲等等，加入到右側佈景主題支援的欄位，通常是以側邊欄（Sidebar）、小工具（Widget）命名的區域，或著是頁首及頁尾。
小提醒：在上面兩張圖片可以看到第一張圖有很多以英文命名的小工具，這是部分是安裝Avada付費主題後，主題內自帶的小工具，這些小工具當初是跟著佈景主題檔案一起被設計出來，對於主題的相容性及適應性都相當的良好，在網站的實用性上也強過內建的小工具。而第二張圖的大部分以中文命名的小工具則是WordPress內建的小工具，比較適用於免費主題喔！
假設我們把月曆的小方框拖曳到的**頁尾小工具（Footer Widget）**的欄位，並將這個月曆的小工具命名為”行程表”，就會在網頁最下方頁尾的區塊多了一個行程表。
下面第一張圖是尚未加入月曆的網頁，第二張圖則是加入月曆後的網頁。右側還有相當多的工具可以加入，可以自己嘗試看看加入後的效果與位置。
4.選單：在網站裡可以自己設定一個選單區塊，也可以稱之為網站導覽（Navigation），讓瀏覽網站的使用者可以快速進入網站的其他頁面、文章或指定的網址。主要選單分為頁面、文章、自訂連結、分類，也可自定義上下層的關係。
在上方有個可以選擇選單或是新增一個選單，當尚無有要的選單，可以點擊建立一個新選單。
點擊建立一個新選單，可在頁面內輸入你想要的選單名稱，如果輸入完成後，按下建立選單，就可以自行設計一個選單。
頁面：可以將修改過的新增頁面在名稱前面的方框勾選，加入到選單。
文章：你可以將你新增好的文章加入到選單，將方框處打勾，按下新增至選單就可以加入到選單內，如下圖所示。
自訂連結：你也可以新增一個連結至選單，如下圖所示。
分類：你可以將分類新增到選單，將方框處打勾按下新增至選單就可以加入到選單內，如下圖所示。
小提醒：如果想要變更選單結構內各個項目的順序，只要對項目的方框點滑鼠右鍵按住，如上圖所示，移動滑鼠就能夠上下拖曳了喔！
5.主題編輯器：
可以利用CSS語法來變更你想要細改的地方，可以更改背景和文字的顏色，或是加寬版面，如果熟悉CSS語法，有許多的地方都可以做更改。切記在更改CSS內容前請先備份！不然如果改錯了卻又沒有備份可以回覆，只能說…（可是瑞凡，我們回不去了.@_@）
傳統主題和區塊主題的外觀選單有什麼差別？
本文介紹的佈景主題、自訂、小工具、選單是傳統佈景主題的外觀選單。WordPress 5.9 之後加入了「區塊佈景主題」，外觀選單會變成：
- 佈景主題：一樣用來安裝與切換主題。
- 編輯器：用區塊直接編輯頁首、頁尾、範本與全站樣式，取代自訂、小工具和選單。
判斷方式很簡單：外觀底下出現「編輯器」就是區塊主題。Astra、Avada 等常見主題仍是傳統主題，文中的操作仍然適用。
常見問題
WordPress 後台的「外觀」找不到「自訂」或「小工具」怎麼辦？
這通常是因為使用了區塊佈景主題（例如 Twenty Twenty-Four）。區塊主題改用「外觀 › 編輯器」修改頁首、頁尾與版型，傳統的自訂與小工具選單就不會出現；換回傳統主題後才會看到。
附加 CSS 寫在哪裡最安全？
寫在「外觀 › 自訂 › 附加的 CSS」最安全，佈景主題更新時不會被覆蓋。不要直接修改主題檔案，主題一更新就會被洗掉；需要大量修改時，建議建立子主題再寫。
主題編輯器可以直接改程式嗎？
可以，但不建議在正式網站直接修改。只要少一個符號就可能讓網站顯示錯誤，主題更新後修改也會消失。需要改程式時，先備份並使用子主題，或在測試網站確認無誤後再上線。
結語
這一篇有關 WordPress 外觀的教學其實相當重要，佈景主題的選擇對於網站的外觀層次等級有很大的影響，小工具側邊欄的建立是完善了網站的豐富度及實用性，選單則決定了使用者在瀏覽網頁時對於網站內容流暢度的體驗！就我的經驗，初心者在建立網站時花在外觀這個功能的時間，相比起其他的選項要多得很多。在外觀的操作設定上其實沒有難度很好理解，但是就在於設定完成之後到前台重新整理網頁，究竟有沒有達到自己所預期的效果。
相信經過前幾篇教學在結語時建議可以到網站設計的官方首頁去看示範網站的樣本，相信各位初心者們也有理想的網站類型了吧！如果有看到自己喜歡的網站類型，當然也可以在教學文章的下方留言詢問基本設計的問題，很歡迎大家來提問的！今天的教學就到這裡，我們下一次 教學再見了，不見不散喔！
搭配使用
