一間餐廳如果把前菜、主餐、甜點通通擠在同一頁菜單上，價目也標得模糊不清，顧客翻了老半天找不到想點的那道菜，隔壁桌的人早就吃完起身走人。中文裡「選單」跟「菜單」其實是同一件事，都是把一堆內容分類、指路，讓人一眼找到自己要的東西。
網站的選單也是同一套邏輯。WordPress 選單設定沒做好，訪客的處境就跟前面那位顧客差不多，翻兩下找不到要看的頁面，順手把分頁關掉，轉頭點下一個搜尋結果。做對了，訪客卻能在三兩秒內找到服務項目、聯絡方式或想看的分類，體驗的差距就在這幾個選單項目上。
這篇就照著實際操作的順序走一輪，先在後台生出第一份能用的選單，接著做出下拉層次、把主選單和頁尾選單的顯示位置分工好，最後連手機上跑版了要怎麼一步步排解也一起拆給你看。
外觀選單怎麼建立？
打開 WordPress 後台的「外觀→選單」，第一次進去通常只會看到一片空白，只有一個要你先幫選單命名的欄位。取一個看得懂的名稱、點下「建立選單」之後，左側面板才會打開頁面、文章、分類、自訂連結四個項目來源的清單，勾選想要的項目、點「新增至選單」，它們就會一個個掉進右側的選單結構區。
項目掉進結構區之後，順序不是釘死的，直接用滑鼠拖曳上下移動，就能調整顯示先後；每個項目旁邊也有一個展開箭頭，點開可以改這個項目在導覽列上顯示的名稱（這個設定只改選單上看到的字，不會動到原本頁面的標題），也能設定連結是不是要在新分頁打開。如果只是想放一個不連去任何地方的母選單，專門用來掛子選單，自訂連結的網址欄位填一個「#」就能達到這個效果，不需要真的建一個空白頁面去頂著它。
全部加完、順序也排好之後，記得往下滑點一次「儲存選單」。這一步很多人會漏，選單結構弄了老半天，沒存就等於白忙一場。
選單能放進哪些項目：頁面、文章、分類與自訂連結
選單裡能加的項目其實只有四種類型，各自適合放的東西不太一樣：
- 頁面：像「關於我們」「服務項目」這類常駐頁面，內容穩定、不常變動，最適合放進選單當作固定入口。
- 文章：除非有特別想長期宣傳的一篇，不然一般不會把單篇文章整篇放上選單，文章數量一多，選單會被撐得又長又亂。
- 分類：文章分類常拿來做成下拉的彙整頁入口，點下去就能看到同一類底下所有文章，很適合當作部落格的次選單。
- 自訂連結：可以連到任何網址，不管是站外的社群帳號，還是站內某個沒有獨立選單項目的網址，都能用這個類型加進去。
先分清楚這四種各自的定位，加選單的時候才不會什麼都往裡面塞。
找不到「外觀→選單」，會不會是佈景主題走全站編輯版型？
如果後台點開「外觀」，只看得到「編輯器」，完全找不到「選單」這個選項，不是系統壞了，是佈景主題的種類不一樣。這種情況代表用的是支援全站編輯的區塊佈景主題，選單的管理方式從獨立的選單畫面，改成用「導覽」區塊直接在編輯器裡操作。
判斷自己屬於哪一種其實很簡單，後台「外觀」底下有「選單」字樣，就是走傳統選單設定；只有「編輯器」，就要進編輯器裡找到頁首或頁尾範本區塊裡的導覽區塊，點選它、在旁邊的設定面板選擇要顯示的選單，或直接建立一個新的。新增項目、調整順序、拖曳出子選單的操作邏輯，其實跟傳統選單畫面大同小異，只是入口換了地方。
WordPress 近幾年新安裝的網站，預設佈景主題已經多半走區塊佈景主題這條路線，這種找不到「外觀→選單」的狀況只會越來越常見，不是少數過渡期的例外情形。
選單怎麼設定，才能做出下拉層次？
不論走的是傳統的外觀選單，還是導覽區塊，選單結構建出來之後，通常都還只是一份攤平的清單，項目彼此之間沒有主從關係。要做出滑鼠移過去才展開的下拉效果，做法很單純，把項目往右移一格，它就會變成正上方那個項目的子選單。
不過這個效果並不是每個佈景主題都撐得住，有些主題疊好幾層都還順暢，有些疊到第三層就開始跑版或反應遲鈍，動手做之前最好先在前台實際測過。如果是內容量特別大的商城或知識庫型網站，天然的分類真的深達好幾層，單純的下拉選單容易讓深層項目被埋得太深，這時候可以考慮用「Mega Menu」這類外掛，把下拉面板改成多欄式的版面，一次攤開更多分類，而不是逼讀者一層一層點進去。
只是層數這件事有一個現實，疊得越深，問題多半會先在手機上冒出來，這點留到後面排解行動版選單時再細看。
拖曳做出父子選單的操作方式
具體的手勢其實只有三種：在選單結構區裡上下拖放，調整的是同一層項目的顯示順序；往右拖放一格，是把這個項目變成上一個項目的子選單；往左拖回原本的位置，則是取消父子關係，讓它回到原本的層級。整個過程不需要輸入任何程式碼或額外設定，滑鼠拖到對的位置放開就完成了。
選單層數別堆太深，多層不等於好用
選單不是分類分得越細越好。層數一深，滑鼠使用者要精準地把游標停在父項目上才點得到子選單，觸控裝置的情況又更麻煩，手指按下去的範圍比游標大，層數一多反而容易點錯或完全點不到。實務上建議把層數抓在二到三層當上限，超過這個深度，讀者在手機上幾乎不會展開到底層去慢慢找，等於做了也沒人看得到。
全球資訊網協會（W3C）轄下的網頁無障礙倡議（WAI），針對指標型輸入的「目標尺寸」訂出建議，可點擊區域至少要有 44×44 CSS 像素，才不容易因為太小而按偏。選單堆得越深，子選單項目的可點擊範圍往往被壓縮得越小，跟這項建議的方向正好相反，也是層數該節制的另一個理由。
主選單、頁尾選單怎麼靠顯示位置分工？
選單的骨架跟層次都做好了，畫面上卻可能還是什麼都看不到，原因通常出在少了最後一個開關，也就是還沒勾選要顯示的位置。選單編輯畫面往下滑到「選單設定」區塊，勾選這份選單要出現在哪個位置，再點一次「儲存選單」，它才會真的出現在網站上。
不同佈景主題定義的位置名稱不會完全一樣，常見的有主選單、頁首選單、頁尾選單、側邊欄選單，實際名稱怎麼寫要逐一勾選、再回前台核對，才知道哪個位置對應到頁面上的哪一塊。而且一個網站不是只能養一份選單，可以建立好幾組，分別指定給不同位置，例如主選單放核心導覽，頁尾選單放法遵與聯絡類的連結，兩邊各司其職。走區塊佈景主題的話，則是在導覽區塊的設定面板裡選擇或建立第二個選單，再把它放進頁尾範本區，操作邏輯跟傳統選單畫面「多組選單、各自指定位置」是同一件事，只是換了介面。
主選單放核心導覽，頁尾選單放次要連結
主選單該擺的是訪客最常找的核心內容，像服務項目、產品分類、關於我們這幾類，項目也不宜太多，維持在幾個核心分類就好，選項一多，訪客反而不知道該從哪一個點起。頁尾選單則適合放隱私權政策、服務條款、聯絡資訊這類找得到、但不需要放在最顯眼位置的連結。這兩種東西如果混在同一份選單裡，主選單很容易被撐得又長又雜，訪客要找的核心項目反而被埋在一堆法遵連結中間。
佈景主題沒有頁尾選單位置，怎麼補上？
不是每個佈景主題都內建「頁尾選單」這個顯示位置，遇到這種情況也不是沒辦法。傳統佈景主題可以到「外觀→小工具」，把「導覽選單」這個小工具拖進頁尾的小工具區，再指定要顯示哪一份選單，一樣能在頁尾生出選單，不受限於主題原本規劃的位置。走區塊佈景主題的話則更直接，在頁尾範本區裡直接放進一個導覽區塊，選好要顯示的選單即可。
行動版選單跑版了，怎麼一步步排解？
選單在電腦螢幕上排得整整齊齊，不代表縮到手機那塊小螢幕上還撐得住。前面提過，層數一深、項目一多，問題多半會先在這裡冒出來，而這件事現在的重要性只會越來越高。市調機構 StatCounter 的統計顯示，目前全球網頁流量裡，行動裝置的占比已經略高於桌機，落在五成出頭。選單設計在手機上出問題，等於直接影響超過一半訪客的瀏覽體驗，不是邊緣情境。
手機上的選單故障通常會落在幾種固定的樣子，認出自己遇到的是哪一種，才知道該往哪個方向查。
手機選單常見的三種故障症狀
常見的故障大致分成三種：
- 完全不見：整個選單或漢堡圖示在手機畫面上根本沒有出現，導覽列看起來像少了一塊。
- 點了沒反應：漢堡圖示看得到，點下去卻沒有任何選單展開，像按到一個裝飾用的假按鈕。
- 展開後跑版：選單有展開，但版面亂掉，蓋住其他內容，或項目擠成一團看不清楚。
先分清楚自己碰到的是哪一種，下一步的排查順序才不會白繞。
一步步排查：開發者工具、停用外掛、切換主題、清快取
排查的順序建議照下面這樣走，一步一步縮小範圍，而不是想到哪就改哪個設定：
- 先按下 F12 打開瀏覽器的開發者工具，點裝置模擬圖示切成手機檢視，實際看選單在小螢幕上長什麼樣子，先確認問題是不是真的存在、而不是快取造成的錯覺。
- 回到後台把全部外掛先停用，再一個一個重新啟用，每啟用一個就重新測一次手機選單，找出啟用之後問題重新出現的那一個外掛，那就是衝突的來源。
- 如果停用外掛之後問題還在，暫時切回 WordPress 內建的預設佈景主題測試看看，藉此判斷是不是目前這個佈景主題本身的相容性問題。
- 別漏掉快取這一關，改完設定後前台看起來沒變，很多時候不是設定沒生效，是瀏覽器快取、快取外掛、或主機端的快取還沒清掉，把這三種快取都清過一輪再重新整理測試。
照這個順序走一輪，通常就能把問題鎖定在外掛衝突、主題相容性、或單純的快取沒清這三個方向裡的哪一個，不用漫無目的地把所有設定都改過一遍。
選單設計好，訪客就像走進一間動線清楚的餐廳，很快就找到自己想吃的那道菜；設計不好，訪客翻兩下找不到，轉身就走，不會等你慢慢改。
選單也不是設定完就能一勞永逸。尤其換了佈景主題、加了新頁面，或是做過任何一次選單調整之後，都值得花一分鐘，拿起手機實際點一輪，確認訪客真的看得到、也點得到每一個項目。