如何在WordPress中創建多級/分層菜單

在WordPress中,您可以通過WordPress菜單系統(WordPress admin-> Appearance-> Menu)和主題定製器(WordPress admin-> Appearance-> Customize)創建一個多級/分層菜單。 

在本文檔中,我們將研究創建多級/分層菜單的步驟。
我們將首先查看WordPress菜單系統

WordPress菜單系統

您可以通過登錄WordPress儀錶板訪問WordPress菜單系統,然後導航至Appearance-> Menu

設置屏幕選項

在屏幕右上角,您可以找到屏幕選項標籤。 

  1. 單擊它以下拉並顯示所有可用的類型和屬性。
  2. 選中除「描述」複選框外的所有可用複選框。
  3. Customizr和Customizr Pro主題,不支持菜單描述。因此,您應保持未選中「描述」複選框。

file-A8oGS7vnlZ

創建菜單

  1. 單擊創建新菜單鏈接。
  2. 輸入新的菜單名稱。在本文檔中,我們將其命名為Sample Menu
  3. 單擊創建菜單按鈕。

file-pnpCUjMefi

分配菜單位置

接下來,我們需要將菜單分配給它的位置。

  1. 通過選中複選框將樣本菜單分配給主菜單(主題位置)。
  2. 單擊保存菜單按鈕。

file-wTBcHi1XgV

可用菜單項的類型

在Customizr和Customizr Pro主題中,有6種類型的菜單項可用。

  1. 頁面-它們是您創建的頁面。
  2. 帖子-它們是您創建的博客帖子。
  3. 自定義鏈接-您可以使用它創建一個鏈接到任何URL的菜單項。
  4. 類別-它們是您可用的類別。
  5. 標籤-它們是您可用的標籤。
  6. 格式-它們是您可用的帖子格式。

file-knhr3LHGAp

創建菜單項(父菜單項)

  1. 在此示例中,我們將為菜單分配一個名為「示例頁面」的頁面作為父菜單項。
  2. 選中「樣本頁面」複選框,然後單擊「添加到菜單」按鈕。
    file-3IsvzZkL3i
  3. 您將看到它作為菜單項自動添加到右側面板。
    file-BWnOr5NMTk
  4. 注意:這是可選的。通常,您不需要使用這些步驟。
    • 您可以通過單擊右側的小下拉箭頭來編輯「樣本頁面」菜單項的屬性。
    • 它將展開並顯示一些文本輸入。
    • 您可以輸入標題屬性,當您將滑鼠指針移到菜單項上並停留在此位置時,該屬性僅在前端可見。
    • 在新窗口/選項卡複選框中打開鏈接。如果要在新標籤頁或窗口中打開頁面,則可以選中此複選框。
    • 您可以輸入CSS類以使用自定義CSS啟用此菜單項的特殊樣式。
    • 鏈接關係(XFN)用於將rel屬性添加到菜單鏈接。您可以參考本文檔(使用XFN定義關係)以獲取有關使用XFN的更多信息。

    file-brFk0eSTch

  5. 單擊保存菜單按鈕以保存所有編輯。
  6. 重複步驟1到3,將頁面,帖子…等分配給菜單作為父菜單項。
  7. 重要筆記: 
    • 菜單要盡量簡短。
      • 從個人經驗上講-嘗試保存很大的菜單時,有時菜單項會丟失。發生這種情況是因為您發布的數據太多,伺服器無法處理。
      • 簡短而有條理的菜單可在移動設備上輕鬆訪問。長菜單很難在移動設備中訪問,因為它需要滾動並且不友好。
    • 通常,我們僅將頁面分配給菜單,因為除非將頁面標記到菜單上,否則無法訪問它們。
    • 我們不將帖子分配給菜單,因為可以通過「主頁」或「帖子」頁面進行訪問。
  8. 到目前為止,您應該有一些父菜單項。
    file-RUxqRMrDC6

創建子菜單項

現在我們可以繼續創建子菜單項。查看上一個屏幕截圖,您可以看到有一個名為Level 1的頁面。我們將向其中添加一些子菜單項。

  1. 選擇要用作子菜單項的頁面並將其添加到菜單區域。 
    • 在此示例中,我們將添加2a,2b級和3a,3b級頁面。
    • 選中其複選框,然後單擊添加到菜單按鈕。

    file-Zr3z70oN0O

  2. 您會看到它們已添加到右側的菜單結構中。
    file-NSktDzPr1t
  3. WordPress菜單系統支持拖放。因此,您可以單擊並按住菜單項,將其拖動到新位置,然後鬆開滑鼠按鈕以將其放到適當的位置。
    • 您可以開始將子級別頁面拖到其位置。
    • 拖動2a級並將其放在1級下方並稍微向右移動,這將表明它是1級的子菜單項。
    • 將級別2b拖到級別2a的正下方,這將表明它是級別1的子菜單項,但與級別2a處於同一級別。
    • 現在,我們可以通過拖動級別3a並將其放置在級別2b下並稍微向右移動來創建第三個級別,這將表明它是級別2b的子菜單項。
    • 將3b拖動到3a的正下方,這將表明它是2b的子菜單項,但與3a處於同一級別。
    • 請看以下屏幕截圖以更好地理解。

    file-ji6QdzEOKY

  4. 單擊保存菜單以保存您的設置。
  5. 這就是使用WordPress菜單系統設置菜單的全部內容。

主題定製器

接下來,我們將繼續研究如何使用WordPress主題自定義程序來設置菜單結構。
登錄到WordPress儀錶板,然後導航到WordPress管理->外觀->自定義->菜單

創建菜單

  1. 點擊+添加菜單按鈕。
    file-tnQ6e3pLxb
  2. 輸入菜單名稱,在本示例中,我們將稱為菜單Sample Menu 2
    file-Sk97s35UJ9
  3. 單擊創建菜單按鈕,您將看到以下屏幕截圖。
    file-YiPC3iUKaG
  4. 選中「主菜單」複選框,將「樣品菜單2」分配給「主菜單」,然後單擊+「添加項目」按鈕。選擇菜單項的部分將滑出。
    file-5UYqBMY71P

添加菜單項

  1. 單擊頁面,它會下拉以選擇要添加到菜單結構的頁面。
    file-zA2xmUe5Ia
  2. 單擊要添加到菜單中的頁面,這些頁面將自動添加到左側的菜單結構中。
    file-lJmjl0zgV2

安排菜單項

  1. 現在,我們可以開始將菜單項安排為多級。
  2. 單擊重新排序一詞將出現控制項供您重新排列。
    file-NO0i3gxxby
  3. 單擊每個菜單項的上,下,左,右箭頭,將它們排列為多級。
    file-D3sRhlzBnf
  4. 現在完成。單擊保存並發布按鈕。
  5. 您可以繼續管理標題菜單
相關文章