WordPress選單 :如何新增多層選單?(詳解+位置設定)

WordPress選單 :如何新增多層選單?(詳解+位置設定)

這是一篇完整的「 WordPress選單 」新增+編輯教學。

WordPress 新手入門常會問說,要如何在 WordPress 網站上新增選單?

還是 WordPress 佈景主題 的選單位置比較多,不知該如何設定?或是有多層選單的需求?

這篇有對「 WordPress選單 」進行詳細的教學,如下。

準備好了嗎?我們開始吧:)


1. 什麼是 WordPress 選單?

「 WordPress選單 」可讓你快速到指定網頁,方便訪客找到想要的資料。

WordPress 選單設計其實很容易,就是選單製作完成後,放入指定的選單位置即可顯示。

選單功能

WordPress 選單主要包括幾種功能,像是頁面功能、文章功能、自訂連結功能、分類功能,可依照需求將不同功能加入到選單中。

選單位置

不同的 WordPress 佈景主題 選單位置可能會不同,可能有單個至多個選單位置。

像是主選單(Primary Menu),也有次選單(Secondary Menu)、側邊欄選單(Sidebar Menu)、頁尾選單(Footer Menu)、手機版選單(Mobile Menu) ..

這幾個常見的選單位置,其中主選單是印象比較深刻的,因為就在網站正上方,如下圖。

WordPress選單 :網站主選單
網站主選單

這些就是「 WordPress選單 」的基本組成。


2. 建立第一個選單

開始建立第一個選單,下面會使用 WordPress 預設佈景主題 Twenty Twenty 搭配教學,你不一定要使用相同主題,這不會有影響。

首先,前往 WordPress 外觀 > 選單,填入選單名稱後,點 建立選單

WordPress 建立第一個選單
建立第一個選單

這樣主選單就建立完成了,接著我們需幫它加上不同功能。

將頁面新增至選單

自己 新增完成的頁面,例如關於我們、服務項目、聯絡我們等 .. ,我們可以將頁面加入至選單。

選取要新增至選單的頁面,如果找不到頁面,可切換成檢視全部,或用搜尋也可

確認後,點 新增至選單 就會新增至選單結構。

WordPress選單 :新增頁面至選單中
新增頁面至選單中

編輯、刪除選單

點選展開箭頭,就可編輯選單項目,點擊 移除 可刪除選單。

WordPress選單 :編輯、刪除選單
編輯、刪除選單

選單排序&設定選單位置

選單可上下拖放設定順序,也可左右拖放變成多層選單。

然後,選取選單的顯示位置,先勾選 桌面版水平選單(網站主選單),完成後 儲存選單

WordPress 選單排序、設定選單位置
選單排序、設定選單位置
  • 不同的佈景主題,選單位置的命名可能會不同,找到網站主選單位置,並將選單設定到此位置即可。

可自行勾選測試,然後對照前台網頁,看選單是否有出現。

確認選單是否顯示

完成後,前往你的網站前台,會看到選單已經出現囉。

WordPress選單 :前台選單顯示成功
前台選單顯示成功

恭喜你完成第一個「 WordPress選單 」。


3. 如何設定多層選單?

許多 Blog 網站公司形象官網購物網站架設,可能會有多層選單設計需求。

把項目新增至選單中,然後用拖放方式(上下是排序、左右是設定父子關係),即可編輯多層選單。

WordPress選單 :製作 WordPress 多層選單
製作 WordPress 多層選單

回到網站前台,我們看一下前台選單成果。

WordPress選單 :設定多層選單
設定多層選單

恭喜你完成 WordPress 的多層選單了。


4. 將文章新增至選單

這章節示範如何新增文章至網站選單。

像是部落格文章、最新消息、與公司服務有關的內容 ..,都屬於 WordPress 文章,請參考如何 新增 WordPress 文章

有了 WordPress 文章後,一樣前往 WordPress 外觀 > 選單。

選取要新增至選單中的文章(可切換成檢視全部,方便找尋),編輯項目名稱,完成後儲存。

WordPress選單 :將文章新增至選單中
將文章新增至選單中

前往網站首頁,看一下是否有順利出現。

WordPress選單 :前台文章功能選單,設定完成
前台文章功能選單,設定完成

太棒了,我們現在也學會把文章放到選單中了。


如果想要一個連結功能的選單,像是點擊選單可前往社群網站,或是連結到相關網站 ..,就可使用這功能。

前往 WordPress 外觀 > 選單,點選自訂連結功能,設定網址和連結文字,完成後記得儲存選單。

WordPress 新增自訂連結到選單
新增自訂連結到選單

到前台看一下成果,連結功能的選單出現了。

WordPress選單 :連結選單設定成功
連結選單設定成功

點擊後也能順利到剛設定的 FB 社團。

WordPress選單 :WordPress 教學社團
WordPress 教學社團

6. 將分類新增至選單

開始經營網站的內容,會產生許多網站文章,此時可能有多個分類。

如果需要將分類新增至選單,要如何做呢?

前往 WordPress 外觀 > 選單,點選分類功能,然後把分類新增至選單中,完成後記得儲存選單。

WordPress選單 :將分類新增至選單
將分類新增至選單

前往網站首頁,看是否有正確顯示。

WordPress選單 :分類成功新增到選單中
分類成功新增到選單中

太好了,我們已經將分類新增至選單中了,如果你有多個分類需設定,也用一樣的教學流程操作即可。


WordPress 選單可放置在多個地方,像是網站側邊欄、頁腳,都是常見的放置位置。

不同 WordPress 佈景主題 的側邊欄、頁腳位置或設計都不太相同,有些主題也不一定都會有,這裡先用頁腳進行教學。

首先,前往 WordPress 外觀 > 小工具,選取導覽選單功能。

WordPress 將小工具新增到側邊欄或頁腳
將小工具新增到側邊欄或頁腳

將導覽選單新增至頁腳,然後指定選單和命名,確認後儲存。

新增導航選單到頁腳
新增導航選單到頁腳

前往網站前台,確認一下網站頁腳是否出現選單。

WordPress選單 :頁腳選單出現
頁腳選單出現

太好了,順利在頁腳設定選單,當然也可以用一樣方式,在側邊欄設定選單。

依照你的需求設定即可。


聯絡犬哥網站

在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。

資源一:犬哥網站(專業 WordPress 網頁設計&SEO 行銷公司)

如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&SEO 行銷公司),請專家協助你會更容易!

我們有多年網頁設計、SEO 網站排名經驗,加上上百個高質感作品、SEO 實戰案例,絕對能滿足您的需求!

犬哥網站|台北網頁設計&SEO 行銷公司
犬哥網站|台北網頁設計&SEO 行銷公司

資源二:WordPress+SEO 超強線上課程

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等豐富內容,一次教會你。

課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!

WordPress 高手架站課|一堂課讓你變架站高手!
WordPress 高手架站課|一堂課讓你變架站高手!

網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?

這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等,大幅提升行銷能力。

帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!

SEO 排名飆升課|帶你衝上 Google 第一頁!
SEO 排名飆升課|帶你衝上 Google 第一頁!

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

返回頂端