如何在 WordPress 中創建動態菜單
已發表: 2022-10-23WordPress 是一個內容管理系統 (CMS)，可讓您從頭開始創建網站或博客，或改進現有網站。 在本文中，我們將向您展示如何在 WordPress 中創建動態菜單。 動態菜單是根據您正在查看的頁面而變化的菜單。 例如，如果您正在查看有關“WordPress 主題”的頁面，菜單將顯示指向有關 WordPress 主題的其他頁面的鏈接。 如果您正在查看有關“WordPress 插件”的頁面，該菜單將顯示指向有關 WordPress 插件的其他頁面的鏈接。 在 WordPress 中創建動態菜單很容易。 首先，您需要創建一個菜單。 其次，您需要向菜單中添加項目。 第三，您需要將菜單分配到一個位置。 第四，您需要將代碼添加到您的 WordPress 主題中。 讓我們從第一步開始：創建一個菜單。
在本系列的第 2 部分中，我們通過創建動態導航菜單更進一步。 您將學習如何使用 Pro 插件根據它們在塊可見性中的位置構建條件菜單。 塊主題用於創建基於塊原則的模板部件。 本教程將引導您完成在“徒步旅行”頁面上創建二級導航菜單所需的步驟。 就像單擊站點編輯器來編輯網站標題一樣簡單。 使用 Block Visibility 插件中的 Location 控件，我們還可以限制二級菜單的位置。 在知識庫中，選擇位置選項，然後單擊省略號圖標以啟用它。
我們現在可以通過使用位置控制將塊的可見性限制在遠足遊覽頁面，這允許對可見性進行更多控制。 發布規則指示我們選擇頁面發布類型以及“遠足”頁麵類型。 在生成的規則設置中，應遵循以下內容。 在我們演示站點的主頁上，我們將能夠訪問一個全新的條件菜單。 本文的其餘部分有待完成。 您可以通過使用各種規則和規則集來實現這一點。 對於這個演示，我們選擇了一個簡單的示例。
要創建新菜單，請轉到外觀。 如果要創建二級菜單，請單擊“創建菜單”，如果要為特定位置創建自定義菜單，請單擊“我的自定義菜單”，如果要為其他位置創建二級菜單，請單擊“二級菜單”。 將一些項目添加到菜單後，將其保存（例如，菜單項1、菜單項 2 和菜單項 3）。
如何在 WordPress 自定義主題中創建動態菜單？
在 WordPress 中創建動態菜單的一種方法是使用 wp_nav_menu 函數。 此功能將允許您創建一個根據您的網站結構自動生成的菜單。 您還可以使用此功能創建特定於您的主題的自定義菜單。
按照這些步驟，您可以在 WordPress 中創建一個簡單而動態的導航菜單。 主要步驟是使用 register_nav_menus() 函數註冊導航菜單。 要運行它，您必須首先在您的子主題的functions.php 文件中註冊它，然後使用'init' 掛鉤。 在此示例中，我們將利用主標題菜單。 Nav Menu 插件在 WordPress.org 上可用，它允許您根據不同用戶的角色為不同的用戶分配不同的菜單。 我們也可以使用這個插件同時註冊多個菜單。 在前面的步驟中，我們可以通過在 WP_nav_menu 函數調用中引用自定義 CSS 類來根據網站的設計設置導航菜單的樣式。
如何在 WordPress 中創建動態標題菜單
要在 WordPress 中創建動態標題菜單，您首先需要創建自定義菜單。 為此，請轉到 WordPress 管理面板中的菜單部分，然後單擊創建新菜單鏈接。 輸入菜單名稱，然後單擊創建菜單按鈕。 接下來，您需要將項目添加到菜單中。 為此，請單擊添加項目鏈接，然後選擇要添加到菜單的頁面或帖子。 添加所需的所有項目後，單擊保存菜單按鈕。 您的動態標題菜單現在可以使用了。
如果我們使用 WordPress 動態菜單頁面方法創建一個動態菜單頁面，將在本教程後面介紹，我們將能夠更改它。 在主導航中，背景圖像用於根據其 ID 更改菜單項的位置。 使用“span”標籤將允許我們隱藏文本以便查看我們看到的背景圖像。 我們將使用的代碼是由 WordPress 動態生成的，使用一個名為 current_page_ancestor 的特殊類，所以它應該看起來像這樣：沒有別的說法。 如果我們想增加子頁面的數量，只需增加或減少 depth=2 設置，使其顯示無限數量的頁面。 使用 CSS，如下圖所示的當前頁面鏈接現在可以非常簡單地以粗體顯示。 導航到具有突出顯示部分的父頁面。 突出顯示父頁面的子頁面。
WordPress 動態添加菜單項
可以通過 WordPress 管理儀表板或向主題添加代碼來將菜單項添加到 WordPress 菜單。 如果您想將菜單項添加到現有菜單，只需登錄您的 WordPress 站點並導航到“外觀 > 菜單”頁面。 從那裡，您可以通過從左側選擇它們並單擊“添加到菜單”按鈕來添加新的菜單項。 如果您想通過代碼添加菜單項，您需要在主題的 functions.php 文件中添加幾行代碼。 您需要做的第一件事是創建一個將添加菜單項的新函數。 該函數可以任意命名，但我們將其命名為“my_custom_menu_items()”。 在這個函數中，你需要使用 WordPress “wp_nav_menu_items” 過濾鉤子。 此掛鉤允許您向現有菜單添加新項目。 函數內的代碼如下所示： function my_custom_menu_items( $items, $args ) { // 使用 $items 返回 $items; } add_filter('wp_nav_menu_items', 'my_custom_menu_items', 10, 2); 上面的代碼將添加一個新功能，可用於將項目添加到現有菜單。 該函數本身還沒有做任何事情，但它提供了一個框架，您可以使用它來添加您自己的自定義菜單項。 要實際添加菜單項，您需要修改函數內的代碼以滿足您的需要。 例如，如果您想添加指向“關於”頁面的鏈接，您可以使用以下代碼： function my_custom_menu_items( $items, $args ) { $items .= 'About'; 返回$項目； } add_filter('wp_nav_menu_items', 'my_custom_menu_items', 10, 2); 上面的代碼將在菜單中添加一個新鏈接，其中包含“關於”文本。 您可以通過在函數內添加額外的代碼行來添加任意數量的菜單項。
WordPress 動態菜單插件
WordPress動態菜單插件是為您的網站導航添加一些趣味的好方法。 通過允許您創建根據訪問者正在查看的內容而更改的菜單，您可以讓他們保持參與並返回更多。
如何在 WordPress 中創建自定義菜單
為了在 WordPress 中創建自定義菜單，您需要導航到儀表板中的“外觀”部分並選擇“菜單”選項。 從那裡，您可以創建一個新菜單並添加任何所需的頁面、類別或自定義鏈接。 保存更改後，您可以通過“管理位置”選項卡將新創建的菜單分配到您網站上的位置。
Vegibit 讓您了解如何創建 WordPress 主題。 菜單將位於站點名稱和標語區域下方，但位於站點內容上方。 為了讓菜單出現，我們必須首先在主題的functions.php文件中註冊位置。 在 WordPress 儀表板中創建我們的自定義菜單。 現在有必要使用 WordPress 核心註冊我們的新菜單。 有了這個功能，我們現在可以管理儀表板的位置。 我們希望它看起來好像直接來自 WordPress_nav_menu() 函數。
在下一步中，我們將鏈接到整個類別列表。 如果您將鼠標移到每個鏈接上，您也許可以實現懸停效果。 為了了解這將如何工作，我們創建了一個 style.css 文件。 我們想從列表中的每個元素中刪除鏈接的下劃線和項目符號，以及從每個元素中刪除填充和邊距。 在 WordPress 摘要中，您將找到創建自定義菜單的分步過程。 這是對如何在 WordPress 主題中使用自定義菜單的一個很好的解釋。 由於一些 WordPress 功能，我們的任務變得更加容易。 將新菜單鏈接到 WordPress 後，就可以輕鬆地從該菜單中添加或刪除我們想要的任何類型的內容。
在 WordPress 中創建自定義菜單
創建菜單後，轉到外觀。 您將能夠在菜單頁面上看到新菜單。 選擇它後，您可以根據需要對其進行自定義。