【领域展开 13 式】有了骨头与皮肤，再搞清楚主要肌群 Menu 层级与操作

网站架构是骨头，布景主题是皮肤，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的标题区分等等的设定
左边每个栏位都是独立的，可以直接做拖曳去交换顺序、层级与设定按钮超连结的位置