使用 WordPress 的朋友,應該很習慣使用 WordPress 後台所提供的選單管理工具,來製作網站中的選單,且還可直接拖拉改變排序,或是增加子選單,相當的方便好用,但今天選單太長時,是否會發現到,無論是要改變選單排序,還是新增項目,要放到指定的選單項目中,是否感到相當的麻煩,要不斷的瘋狂向上拉,才能將它放到指定的選項下,而那一天我在修改主題時,打算把網站的選單,改由後台的選單來控制,但當把選單產生完畢後,光是想到要移動就一個頭二個大,找了好久的插件,卻沒找到相關的插件可用,因此我只好自己動手來處理,所以就簡單的寫了 javascript 來控制,因此有需要的朋友,不妨也可參考看看囉!
Step1
在主題中的 functions.php 中加入以下的語法。
functions.php
Step2
在主題中,新增 admin-script.js 檔案,並在 admin-script.js 加入下方的語法。
admin-script.js
$(function(){
$('h3:contains(選單結構)').append(' 開啓 | 隱藏');
$('h3 a').click(function(){
$this = $(this);
var active = $this.html();
if(active == "開啓"){
$('.menu-item-depth-1').show();
$('.menu-item-depth-2').show();
}else{
$('.menu-item-depth-1').hide();
$('.menu-item-depth-2').hide();
}
return false;
});
$('.menu-item-depth-0').click(function() {
var $this = $(this);
$this.toggleClass('hide-child');
$this.nextUntil('.menu-item-depth-0')[$this.hasClass('hide-child')?'hide':'show']();
});
})
Step3
都完成後,再到 WordPress 後台的選單下,在選單結構後方,分別就會看到開啓跟隱藏,當點一下隱藏後,選單中的子選單就會全部隱藏起來,這樣就方便拖拉改變選單排序啦!

Step4
除了點上方的開啓外,也可點每個選單大項的區塊,可單獨開啓該選單的子選項。

Step5
若要改變選項的內容,也可點選項右上的三角符號,就可開啓選項進行修改啦! 有這樣的收合是不是方便許多啦! 由於這個擴充是加在自己的主題中,因此完全不用擔心 WordPress 更新時而無法使用。

