許多人會透過安裝「多層次選單」的外掛,來將數量過多、導致選單長度過長的子選單分成好幾排,但如果你使用的是Divi主題,Divi本身就已經有內建多層次選單的功能,而這篇文章除了會教你如何製作選單以外,還會教你如何不透過外掛,製作多層次的選單!
本文重點目錄
建立選單
首先,開啟WordPress網站後台,點選外觀>選單,開始製作選單。
接著,點擊「建立選單」。
輸入「選單名稱」後,如果要指定選單顯示的位置,請勾選下方的「指定編輯中選單的顯示位置」:
- Primary Menu:網站主要選單
- Secondary Menu:第二選單(通常會顯示在網站最上方,又稱為頂邊欄)
- Footer Menu:底邊欄(顯示於在網站最下方)
最後點選「建立選單」即可。
現在,就可以透過左邊的「新增選單項目」,增加選單內的選項,可以新增「頁面、文章、自訂連結、分類」。
新增頁面連結
「頁面、文章、分類」這三種選項都是找到想加入的連結,勾選後點擊「新增至選單」,就會顯示在右邊的選單內容中。
新增文章連結
新增分類連結
新增自訂連結
而自訂連結除了透過直接輸入「網址」及「連結文字」加入選單,若你想要加入一些「沒有連結」的選項到選單,可以在網址部分輸入「#」字號,就可以有一個空的選項了。
製作子選單
如果需要讓選單顯示第二層選單,只要使用滑鼠左鍵長按,向右邊移動,如以下圖示示範,「關於我們」的頁面,就會成為「首頁」的子選單囉。
製作多排下拉選單
回到外觀>選單內,我將子選單非常多的選單(左圖),利用空的自訂連結,整理成好幾個分類(右圖)。
接著,點選右上角的「顯示項目設定」,將「CSS類別」勾選起來,接著在每個選項打開時,就會出現一個新的欄位「CSS類別」。
請在需要顯示多層次選項的連結內,輸入「mega-menu」到CSS類別中,
點選右下角「儲存選單」,回到網站頁面,就會看到已經成功分成好幾排的選單囉!
如果你對於這篇文章有任何疑問或者建議,都歡迎你在底下留言給我喔:)
本文作者 – LiLing
90後的台灣女生,目前正於紐西蘭擔任多媒體設計師,擅於利用Wordpress建立網站,分享各種不必使用程式語法,也可以架設網站的101種方法。
0 Comments