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選單 :頁腳選單出現
頁腳選單出現

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

依照你的需求設定即可。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

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

犬哥網站

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

在〈WordPress選單 :如何新增多層選單?(詳解+位置設定)〉中有 32 則留言

  1. 您好,
    目前對於wordpress頁面操作介面不是很熟悉,想請教一下關於選單設定的問題,您上方的說明,選單結構→選單設定→「指定編輯中選單的顯示位置」,這部分我的後台選單設定跟您說明的選項有些不同,我的「選單設定」僅有Primary Menu、Secondary Menu (目前選單: 次選單)、Footer Menu這三個選項,請問這是版本不同還是需要其它外掛?
    靜候您的回覆,謝謝

    1. 嗨,這跟使用的主題有關係唷,每個主題會出現選項不同。

      你提出的那幾個,是每個主題基本都有的項目~

  2. 您好,
    目前對於wordpress頁面操作介面不是很熟悉,想請教一下關於選單設定的問題,
    關於選單旁的搜尋功能是如何製作的?
    靜候您的回覆,謝謝

      1. 您好,目前按此操作,WordPress 外觀 > 小工具,裡面會有搜尋功能,直接引入到側邊欄,在網站頁面還是尚未看見搜索功能?
        在煩請不吝請教,靜候您的回覆,謝謝!

        1. 嗨,WordPress 5.8 版之後的「 網站小工具 」介面有做變動。

          整體來說,操作介面跟我們編寫文章時一樣(都是區塊編輯器功能),把想要的元素加入到要顯示的地方即可。

      2. 您好,再請教一個問題,就是為何我在WordPress 外觀 > 小工具>任何小工具新增至不管是”隨處可見”,”側邊欄博客”,”側邊欄頁面”,”頁腳”都無任何功能出現?
        在煩請不吝請教,靜候您的回覆,謝謝!

        1. 嗨,WordPress 5.8 版之後的「 網站小工具 」介面有做變動。

          整體來說,操作介面跟我們編寫文章時一樣(都是區塊編輯器功能),把想要的元素加入到要顯示的地方即可。

  3. 小犬站長,你好,我已將wordpress升級至5.8版本,但遇到一個問題是設定->折疊主題選項->標題->標題佈局->菜單和標誌位置(底下許多樣式可選,但卻只有選Logo Center, Menu above才有改變,其他樣式選了都無改變?) 請問這是哪裡出問題呢…
    在煩請不吝請教,靜候您的回覆,謝謝!

    1. 犬哥網站

      嗨,有關這個問題,這個跟你使用的主題有關,而不是 WordPress 預設功能。

      所以可能要看一下你使用的主題教程,或是詢問主題官方,請他們協助處理唷~

  4. 想敲碗指標停留主選單文字時能出現其他文字的功能教學,

    用於網站分頁簡易的中英文辨識
    (例如:滑鼠停留在”Shop“這個分頁標題時,會顯示“商店”)

    謝謝小犬,我們網站的綠界金物流串接是靠著小犬的教學做出來的。

    1. 犬哥網站

      哈囉,bean:

      恭喜你完成綠界金物流的串接,能幫助到你真是太好了:)

      關於中英文辨識動畫的問題,我想如果你有翻譯需求,可以參考我們整理的 5 種翻譯外掛推薦

      至於動畫的製作,Elementor 剛好有類似的功能,也許可以參考一下 這篇教學文章 來製作按鈕動畫。

      希望我的回答有幫助到你:)

    1. 犬哥網站

      哈囉,ray:

      將站內搜尋功能放到頁首的功能,每個主題都會有不一樣的設置,可能需要依照你目前使用的主題去查看怎麼設定,不過如果你是使用 Astra 可以點擊連結參考教學。

      如果想將站內搜尋的功能內嵌在側邊欄,可以運用小工具, 新版小工具使用教學

      希望我的回答有幫助到你唷:)

  5. 請問小犬老師,如選用astra佈景主題,選單項目最後一項目如有三階層,第三階層會超出視窗,請問這有解法?還是只能選用其他佈置主題,謝謝!

    1. 犬哥網站

      嗨,kay:

      能想到的解決方法,就是把子選單的寬度調小一點(用 Astra 內建功能),或是看有無專門的 WordPress 選單外掛,能客製化調整此選項。

      不然就是需自行調整 CSS 樣式,如果以上都無法解決,那可能就只能換主題試看看了~

  6. 站長小犬您好,想請教一下我照您做選單的流程照做
    為什麼選單中的字都看不到呢(選單有建出來,但網站上看不到字)

    1. 犬哥網站

      嗨,eric,

      因為不清楚你選用的佈景主題跟較具體的描述,我猜也許是選單、文字的寬度不太相符,也可能是文字顏色與背景顏色重疊。

      這部分也許可以嘗試先在後台重新設置看看?

      如果確定都調整過,那可能是佈景主題衝突的問題,可以詢問主題開發者是否有解決衝突的方法。

  7. 小犬老師您好,想請問wordpress有可能實現 在每個頁面使用不一樣的NAV,然後選項都是錨點連結的方法嗎? 等於每個頁面都是一個一頁式網站,然後每個一頁式網站上方的選單都不同! 感謝小犬老師!

    1. 嗨,Melody,

      這個功能感覺比較進階,內建 WordPress 功能可能沒辦法滿足這個功能,可以搜尋看看有無合適的功能外掛或主題。

      這邊可以參考建置一頁式網站的建置方式,希望能幫助到你:

      使用主題創建一頁式網站

  8. 你好 想請問將分類新增至選單只能是文章的分類嗎?
    不能更改設置為新增 “商品分類” 至選單嗎?
    另外 我的elementor 在設置商品目錄時 選擇商品分類選項 但一直無法顯示出來
    可是明明商品都有設定分類
    不知道您是否知道可能的原因
    謝謝你~

    1. 犬哥網站

      嗨,安,

      如果要做到將商品分類顯示在選單,就需要一一複製分類的路徑,

      在新增選單時選擇「 自訂連結 」逐一新增商品分類網址+輸入分類名稱來做指派。

      關於 Elementor 商品分類,我找到一篇中文教學,可以參考看看:)

      Elementor 如何在頁面新增商品分類

  9. 站長您好,想要請教一下文章清單設定的問題

    我用WordPress寫blog,也有記錄自已閱讀書籍時做的筆記(以”文章”形式記錄),僅供自已觀看而已

    要如何設定成,指定的文章僅在管理者登入後,才會顯示在文章清單裡? 一般訪客在文章清單裡是不能到這篇文章,連標題也不能看到

    我看Wordpress文章能設定”密碼”或”私密”,私密文章只能在後台看而已,跟我要的功能不一樣

    我Google有找到User Access Manager這個外掛, 但是依照它的設定後,一般訪客還是能在前台的文章清單裡看到我的記錄文章標題(我是想讓一般訪客看不到我的記錄文章)

    請問站長這個功能讓如何做到呢?

    1. 犬哥網站

      嗨,Victor,

      關於網站訪客 / 用戶權限設定,可試著用關鍵字「 Membership 」尋找有無相關功能外掛。

      我找到一份不錯的推薦清單,可以參考看看:

      5 個最佳 WordPress 會員外掛推薦

      不過有的高級功能可能就需要付費,這個在自行斟酌看看:)

  10. 你好, 犬哥, 你的文章教學真的超讚超仔細清楚!! 謝謝!!

    想請問有沒有推薦的滑動選單plugin 或是astra 免費版有辦法設定嗎? 就是上面選單頁會跟著頁面往下?? 謝謝!

  11. 犬哥你好
    新增選單項目 內
    頁面為空白,按下 “檢視全部”一樣看不到
    但是進入編輯器新增 又可以看到 home

    1. 犬哥網站

      嗨,Neil,

      我有重新檢查一次,發現主選單的頁面項目有正常顯示唷,

      可以檢查是否為外掛衝突的問題,一一停用試試看能否解決~

  12. 小犬 你好:
    我想製作下拉式選單 利用新增選單–>訂定選單名稱–>再將項目拉進來排列 選單結構OK–>儲存選單–>首頁查看 Primary Menu 有出現選單名稱 也有下拉式的框框 但…… 沒有拉進來的項目名稱 這是哪出問題了?? 3Q

    1. 嗨,小杜,

      可能是你有下載表單相關外掛造成衝突,可以一一停用並檢查看看,

      或是將選單重新刪除並設置試試看。

  13. 您好,
    想請問您因為我把原本模板頁首的圖改成自己喜歡的圖片,但發現選單的子項目會跟圖片樣式產生很大的對比,子項目的文字也看不清楚,就很像在黑色圖片上有一個白色框框的子項目,想請問有什麼方法可以更改子項目的樣式?

    1. 犬哥網站

      嗨,Nick,

      Astra 主菜單跟子菜單的顏色設定是綁定在一起的,建議你使用 CSS 幫助你,可以參考 這篇文章,新增 CSS,調整子菜單顏色唷!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端