您想創建一個適合移動設備的響應式 WordPress 菜單嗎？超過一半的網站流量來自移動設備。如果您的導航菜單在智能手機和平板電腦上效果不佳，那么您的很大一部分受眾可能很難在您的網站上找到自己的方式。在本指南中，我們將向您展示如何創建移動就緒的響應式 WordPress 菜單。

為什么要創建一個移動就緒的響應式 WordPress 菜單？

精心設計的導航菜單將幫助訪問者在您的網站上找到自己的方式。然而，僅僅因為你的菜單在臺式電腦上看起來很棒，并不意味著它在智能手機和平板電腦上也會看起來不錯。

移動用戶約占所有互聯網流量的 58%。也就是說，如果您的菜單在移動設備上看起來不好或無法正常工作，那么您就有可能失去一半的觀眾。這將使實現關鍵目標變得困難，例如增加電子郵件列表、獲得銷售和發展業務。

話雖如此，讓我們看看如何創建一個適合移動設備的響應式菜單，該菜單在智能手機和平板電腦上看起來很棒。只需使用下面的快速鏈接即可直接跳轉到要使用的方法。

• 方法 1：創建移動就緒的響應式滑動面板菜單

• 方法 2.創建移動就緒的全屏響應式菜單

• 獎勵：如何將移動響應式菜單添加到登錄頁面

方法 1：創建移動就緒的響應式滑動面板菜單

響應式滑動面板是一個導航菜單，當訪問者點擊或單擊切換開關時，該菜單會在屏幕上滑動。

這樣，菜單始終觸手可及，但默認情況下不會占用任何屏幕空間。這一點尤為重要，因為與臺式電腦相比，智能手機和平板電腦的屏幕要小得多。

如果菜單不斷展開，則移動用戶可能會使用其設備的觸摸屏意外觸發其鏈接。這使得滑動面板成為移動響應式菜單的不錯選擇。

添加移動就緒滑動面板的最簡單方法是使用響應式菜單。

注意： 響應式菜單有一個高級版本，具有額外的主題和附加功能，例如條件邏輯。但是，在本指南中，我們將使用免費插件，因為它具有創建移動就緒菜單所需的一切。

您需要做的第一件事是安裝并激活響應式菜單插件。

激活后，您可以使用該插件自定義您之前創建的任何 WordPress 菜單。

如果您的 WordPress 主題已經有一個內置的移動菜單，那么您需要知道該菜單的 CSS 類，以便您可以隱藏它。如果您跳過此步驟，則移動用戶將在您的網站上看到兩個重疊的菜單。

完成后，轉到響應式菜單?菜單頁面，然后單擊“創建新菜單”按鈕。

您現在將看到一些可用于菜單的不同主題。

我們在圖片中使用“默認主題”，但您可以使用任何您想要的主題。做出決定后，點擊“下一步”。

您現在可以鍵入菜單的名稱。這僅供參考，因此您可以使用任何您想要的東西。

完成后，單擊“鏈接 WordPress 菜單”并選擇要使用的菜單。

如前所述，如果您的主題已經具有內置的移動菜單，則需要將其 CSS 類添加到“隱藏主題菜單”字段中。

如果您升級到高級插件，那么您將獲得一些額外的設置。例如，Pro 用戶可以隱藏特定頁面或設備上的菜單。

當您對菜單的設置方式感到滿意時，請單擊“創建菜單”。

您現在將在屏幕右側看到 WordPress 網站的預覽，并在左側看到一些設置。

要查看您的網站在移動設備上的顯示效果，請單擊屏幕左下角的移動設備或平板電腦圖標。

要自定義菜單在移動設備上的外觀和操作方式，請選擇“移動菜單”。

然后，點擊“容器”。

在這里，你會發現很多不同的設置。

當您進行更改時，實時預覽通常會自動更新。考慮到這一點，最好展開菜單，以便您可以監控移動菜單的外觀。為此，只需單擊菜單切換按鈕即可。

默認情況下，該插件會添加一個標題和一些“添加更多內容...”發短信。

您可以將其替換為自己的消息，甚至可以完全刪除文本。要編輯標題，請點擊展開“標題”部分。

您現在可以在“標題文本”字段中輸入自己的消息。

您還可以添加標題鏈接，或添加圖標字體和圖像。

要自定義標題的外觀，請單擊“樣式”選項卡。

在這里，您可以更改背景顏色、文本顏色、字體大小等。

如果您不想顯示任何標題文本，請單擊以停用“標題”旁邊的切換開關。

如果標題不是必需的，則刪除它將為移動導航菜單中的鏈接和其他內容創造更多空間。

替換“在此處添加更多內容...”。帶有您自己的消息的文本，單擊以展開“附加內容”區域。

您現在可以使用左側菜單中的設置鍵入自己的文本、更改文本顏色、更改文本對齊方式等。

要完全刪除文本，只需單擊以停用切換開關。

再一次，這可以為菜單的其余內容創造更多空間。這在智能手機和平板電腦上特別有用，這些智能手機和平板電腦通常具有較小的屏幕。

默認情況下，響應式菜單會將所有菜單項顯示為單個列表。但是，您可能希望在多列中顯示這些鏈接。如果您的菜單標簽較短，這將很有效，因為它允許您在較小的空間中顯示更多項目，而不會使菜單看起來雜亂無章。

要嘗試不同的列布局，請單擊以展開“菜單”部分。

您現在可以打開“菜單容器列”下拉列表，然后選擇要使用的列數。

此時，您可能會看到一些“需要更新”文本。如果您看到此消息，請單擊它以使用新的列設置更新實時預覽。

默認情況下，響應式菜單會向您的 WordPress 菜單添加一個搜索欄。這可以幫助訪問者找到有趣的內容，但它也會占用寶貴的屏幕空間。

如果您愿意，可以通過停用“搜索”旁邊的切換開關來刪除移動用戶的搜索欄。

您可以配置更多設置，因此您可能需要花一些時間查看其他選項。但是，這足以創建一個精心設計的移動就緒菜單。

當您對導航菜單的設置方式感到滿意時，請單擊“更新”。

現在，只需使用移動設備訪問您的 WordPress 博客，即可查看新菜單的運行情況。您還可以從桌面查看 WordPress 網站的移動版本。

方法 2.創建移動就緒的全屏響應式菜單

另一種選擇是添加全屏響應式菜單。這是一個自動調整到不同屏幕尺寸的菜單，因此無論訪問者使用什么設備，導航菜單始終看起來不錯。

由于菜單占用了所有可用空間，因此無論屏幕有多小，在智能手機和平板電腦上導航都更容易。

創建全屏菜單的最簡單方法是使用全屏菜單 - 移動友好和響應式。此插件允許您僅為移動設備創建全屏菜單，或者您可以在智能手機、平板電腦和臺式計算機上顯示相同的菜單，以便所有訪問者都有相同的體驗。

您需要做的第一件事是安裝并激活全屏菜單插件。

激活后，從 WordPress 菜單中選擇全屏菜單選項，然后選中以下框：“激活動畫全屏菜單”。

我們還建議選中“僅向管理員用戶顯示菜單”復選框。這樣一來，您就可以在配置菜單時看到更改，但在您上線移動菜單之前，訪問者不會看到移動菜單。

默認情況下，該插件將在所有設備上顯示全屏菜單。如果您只想在智能手機和平板電腦上顯示全屏菜單，請選中“僅限移動設備”旁邊的框。

完成后，您就可以通過單擊“設計/外觀”選項卡來微調菜單的外觀。

在這里，您可以選擇全屏菜單的顏色、字體和動畫設置。

進行這些更改時，請注意“初始背景菜單”是菜單的切換圖標。同時，“打開的背景菜單”是展開的全屏移動菜單的顏色。

選擇菜單顏色后，滾動到“菜單外觀”部分。您可以在此處更改菜單的字體顏色、字體系列和字體大小。

請注意，加載其他字體可能會影響您的 WordPress 網站性能和速度。對于移動設備來說，這并不總是一個好的選擇，與臺式計算機相比，移動設備的處理能力通常較低。一些訪問者也可能有較差的移動互聯網連接，這將使您的網站加載速度更慢。

完成后，滾動到“動畫設置”。

首先，您可以選擇當訪問者單擊切換圖標時菜單的展開方式。只需打開“動畫類型”下拉菜單，然后從列表中選擇一個選項，例如從上到下或從左到右。

當您對菜單的設置方式感到滿意時，是時候通過單擊“菜單內容”選項卡來添加一些內容了。

在這里，繼續打開“選擇菜單”下拉菜單，然后選擇要全屏顯示的菜單。

如果您想在菜單中顯示其他內容，則可以將其添加到“免費 HTML / 簡碼”框中。它充當迷你頁面編輯器，因此您可以輸入文本、更改格式、添加項目符號和編號列表等。

還有一個復選框，用于添加指向您的隱私政策頁面的鏈接。

接下來，您可能想將社交媒體圖標添加到您的 WordPress 菜單中。這些圖標將出現在全屏菜單底部的一行中。

要添加這些圖標，只需單擊以展開“社交圖標 1”框。

您現在可以輸入圖標的標題，例如“Facebook”。

之后，單擊“社交圖標”旁邊的箭頭，然后選擇要向移動訪問者顯示的圖標。

最后，在“社交網址”字段中輸入您要使用的地址。

要添加更多圖標，只需單擊“添加另一個圖標”按鈕。

最后，您可能希望添加一個 WordPress 搜索欄來幫助訪問者找到他們正在尋找的內容。為此，只需選中“添加搜索欄”旁邊的框。

默認情況下，該插件將顯示“搜索內容...”消息。但是，您可以通過在“搜索輸入占位符”字段中鍵入內容，將其替換為自己的自定義消息。

例如，如果您經營 WooCommerce 商店，那么您可能希望使用“開始購物”或“搜索產品”等文本。

當您對菜單的設置方式感到滿意時，單擊“保存更改”按鈕。

現在，只需使用移動設備訪問您的網站，即可查看全屏菜單的運行情況。