【領域展開 13 式】有了骨頭與皮膚，再搞清楚主要肌群 Menu 層級與操作

13th鐵人賽 wordpress 網站架設 menu 思考過程

Jade Chang

2021-09-28 23:58:40

980 瀏覽

分享至

網站架構是骨頭，佈景主題是皮膚，Menu 是大肌肉

昨天【領域展開 12 式】安裝 Soledad 主題插件，成功匯入漂亮模板到網站囉文章最後停在要匯入哪一個主題比較符合現有資料的排版，後來發現 Soledad 直接有所有模板的 demo 網站可以一個一個點開來看，最後選擇 Simple blog 原因覺得 簡單、清爽，大圖片的只抓一個，想說進入下一階段的學習可能這些 Widgets 都可以再做調整

今天記錄所謂的 Menu 該怎麼設定，畢竟先將選單按照架構設定好才比較方便針對每個選單去做設計版面與欄位編排，等同於骨頭（網站架構）長完了，選好皮膚（佈景主題）現在要長主要的大肌肉（Menu 設定）

大家好，我是 Jade Chang
Statistic Information 畢業，入職場後於外商從事軟體技術行銷，長期規劃各種線上線下活動像是直播節目/帶狀線上教學，後期負責學生實習計畫與大專院校 Talent Cultivation 與技術社群行銷 Program 為主，過去一年轉任於台灣本土軟體開發商 PM，周旋於客戶、工程師與設計師之間並短期投身新創事業，近期轉換於新竹半導體產業，還在體驗適應中。

首先，釐清 Menu 是什麼

所謂的 Menu 指的是選單、分類項目名稱，以鐵人賽舉例 Menu 就是活動辦法、選手列表..etc，可想像為進餐廳的菜單，會有前菜、湯品、沙拉、主餐與甜點，這就是所謂的 Menu 的一種，另一種情境也可能類似在前菜與湯品這些 Menu 之上還有再分為經典晚餐、商業午餐與早午餐的分類

Menu 設定的位置在 WordPress 後台左側功能選單中可以找到，點選 Appearance > Menu，就能到設定的位置，在正式編輯 menu 前，建議先知道三個名詞，不然直接 edit 會搞不清楚在 edit 哪邊

Primary menu：最上層的分類（商業午餐、經典晚餐的最高層級分類）
Toolbar menu：常見的大分類位置（前菜、湯品、主餐等分類）
Footer menu：頁尾的分類（可需要可不需要）

WordPress 的 Menu 設定可以先將分類模組化，按照佈景主題的開放程度做模組的選擇，像是 Simple blog 的主題就有提供三種 menu 可以放，可以設定好幾種 menu 再依照想放的位置做下拉式選單的選則
例如：

模組 1 的 menu 有 a,b,c,d 四個分類
模組 2 的 menu 有 W,X,Y,Z 四個分類
模組 3 的 menu 有 !,@,#,$ 四個分類

對應回 Menu 設定，我可以用下拉式選單來選我網站中 Primary menu 要顯示模組 1 的 a,b,c,d 分類；Toolbar menu 要顯示模組 2 的 W,X,Y,Z，最後 Footer menu 想再選擇模組 1 的 a,b,c,d 都是沒問題的！方便製作上可能會希望多重露出的分類時就很好用！

再來，所見即所得的 Menu 操作方式

上圖接近左上有一個 Manage with Live preview，點選後會進到網頁，比較視覺化的方式修改 Menu，畫面上會是左手邊是功能選單，右手就是隨著左邊設定後右邊就會相對改變

以下是使用後我覺得這種模式編輯的三大好處：

由於網站是匯入模板樣式與模板的測試資料，可以從左邊設定的階層欄位當中去對應右邊畫面的測試資料，就會知道各個選單名稱的意義
會基於測試資料去做調整，等確認不需要的架構或階層再予以刪除，保留測試資料可以知道最全面的網站功能（才知道可以分四欄、每欄可以分四層或是有H1,H2,H3的標題區分等等的設定
左邊每個欄位都是獨立的，可以直接做拖曳去交換順序、層級與設定按鈕超連結的位置