WordPress如何添加菜單?自定義導航欄顯示選項

本文是《WordPress建站教學》系列文章的第14 部分,該系列共包含以下21 個部分:

WordPress 3.0以上的版本,已經添加了自定義導航欄菜單的功能。

大多數的WordPress主題都支持自定義導航欄菜單功能,你可以自由地為你的網站設置導航欄菜單。

將重要頁面鏈接,添加到導航欄菜單的2大作用:

  1. 可提升用戶體驗。
  2. 能提升SEO權重。

現在陳溈亮就來給你分享:如何設置WordPress導航菜單?

如何確定主題是否有自定義菜單功能?

啟用主題後,登錄WordPress後台 → 外觀→ 菜單。

如果你看到下面顯示的內容,則主題不支持自定義菜單,否則它支持▼

當前的WordPress主題不提供自定義菜單第1張

WordPress自定義導航菜單

在自定義菜單之前,你需要創建所需的文章分類目錄和頁面。

創建文章分類目錄、頁面方法,請參考以下教程▼

WordPress創建&設置菜單

第1 步:進入WordPress菜單頁面

登錄WordPress後台 → 外觀→ 菜單 ▼

進入WordPress菜單頁面第4張

  • 此處能創建新菜單,也能管理之前創建的菜單。
  • 若創建新菜單,請在“菜單名稱” 輸入框中,填寫菜單分類名稱。
  • 然後單擊“保存”,以創建新的導航菜單位置類別。

第2 步:選擇主題位置

  • 我們要將菜單指定為網站上的導航菜單。
  • 選擇主題位置,勾選Primary Navigation(主導航) ▼

WordPress創建菜單:選擇主題位置,選擇Primary Navigation 第5張

  • 注意不要勾選“自動將所有頂級頁面添加到此菜單” ▲
  • 在這種情況下,每次創建頂級頁面時,它都會自動添加到菜單中,但菜單的寬度有限,會在超出寬度後換行(影響美觀)。

第3 步:添加和排序WordPress菜單結構

這里以創建一個名為“Menu 1” 的菜單為例 ▼

添加和排序WordPress菜單結構第6張

  • 從左側選擇要添加的鏈接(頁面鏈接,文章鏈接,自定義鏈接、分類目錄鏈接),然後將其添加到菜單中。
  • (其實你可以在這裡添加任何鏈接,例如,你可以添加一個首頁,你可以通過“自定義鏈接”指向首頁網址)

排序菜單結構:

  • 在菜單結構區域中,將菜單項稍微向右拖動,以快速設置二級菜單和多級菜單。
  • 設置的效果是梯形的,也就是說,二級菜單比其上一級更加縮進。
  • 導航名稱後面會出現一些灰色的“子項目”標誌。
  • 排列菜單好了後,單擊“保存菜單”。

WordPress菜單選項

WordPress菜單默認是隱藏了一些功能。

如果要控制菜單的更多屬性,請單擊屏幕右上角的“顯示選項”,以顯示隱藏的功能 ▼

WordPress菜單顯示選項第7張

  • 你可以選擇更多菜單項類型。
  • 例如:標籤和文章,以及顯示菜單的高級屬性(鏈接目標,CSS類,鏈接關係網,描述)。

WordPress菜單項詳細設置第8張

導航標籤:

  • 鏈接的文字。

標題屬性:

  • 是a標籤的title屬性的值,如上圖中所示“陳溈亮博客的首頁”。

CSS類:

  • 向菜單項添加class。
  • 此菜單項因css而異。
  • 陳溈亮博客首頁的CSS添加的是 fas fa-home

鏈接關係網絡:

  • 通過鏈接關係網(XFN),將rel屬性添加到菜單。
  • 如果你不希望搜索引擎給予此菜單鏈接權重,則可以向其添加rel="nofllow"屬性。

鏈接目標:

  • 控制菜單鏈接打開方式。
  • 比如,在新窗口中打開(target="_blank"),或在當前窗口中打開(默認)。

以下是基於上圖中顯示的設置,網頁所呈現代碼:

<a title="陈沩亮博客的首页" rel="nofollow" href="https://www.chenweiliang.com/"><i class="fa fa-home"></i><span class="fontawesome-text"> 首页</span></a>

WordPress菜單管理位置

以下是WordPress菜單設置頂部的管理位置▼

WordPress如何添加菜單?自定義導航欄顯示選項的圖片第9張

  • 管理位置所顯示的主題設置,會因為使用不同的主題,而有所不同。
  • 你可以為每個“主題位置”設置指派菜單,以便每個位置的導航菜單,顯示不同的內容。

WordPress自定義導航欄菜單教程,到此結束。

閱讀該系列的其它文章:<< 上一篇:WordPress如何新建頁面?添加/編輯頁面設置
下一篇:WordPress主題是什麼?如何安裝WordPress模板? >>

希望陳溈亮博客( https://www.chenweiliang.com/ ) 分享的《WordPress如何添加菜單?自定義導航欄顯示選項》,對您有幫助。

歡迎分享本文鏈接:https://www.chenweiliang.com/cwl-959.html

歡迎加入陳溈亮博客的Telegram 頻道,獲取最新更新!

🔔 率先在頻道置頂目錄獲取寶貴的《ChatGPT 內容行銷AI 工具使用指南》! 🌟
📚 這份指南蘊含價值巨大,🌟難逢的機遇,切勿錯失良機! ⏰⌛💨
喜歡就分享和按贊!
您的分享和按贊,是我們持續的動力!

 

發表評論

您的電子郵箱地址不會被公開。 必填項已用 * 標註

滾動到頂部