如何創建移動響應式 WordPress 菜單

已發表: 2023-01-24

你有沒有想過創建一個移動響應式 WordPress 菜單？ 您可能已經看到已經做到這一點的網站，但您從來沒有能夠自己做到這一點。 如果是，那麼本文適合您，因為今天，我們將向您展示為您的 WordPress 網站創建和自定義移動菜單的非常簡單的方法。

但在我們開始之前，讓我們詳細看看什麼是移動響應式菜單，以及它的好處。

什麼是移動響應菜單？

移動響應菜單是專門設計用於智能手機和平板電腦等移動設備的下拉菜單。 這種類型的菜單通常通過點擊漢堡包圖標來觸發，它允許用戶瀏覽您的網站而無需滾動一長串鏈接。

如果您希望為您的網站創建移動響應式菜單，則需要牢記一些事項。

首先，您需要確保您的菜單在觸摸屏上易於使用。 這意味著您的鏈接應該足夠大以便點擊，並且它們應該間隔開，這樣用戶就不會不小心點擊錯誤的鏈接。

其次，您還希望確保您的菜單在不使用時自動折疊，以便用戶在不尋找特定內容時不必滾動瀏覽它。

最後，您需要考慮您的移動響應菜單將如何與您網站的其餘部分一起使用。 如果您使用網站的單獨移動版本，您需要確保您的菜單鏈接將用戶重定向到適當的頁面。 但是，如果您為整個網站使用響應式設計，請記住您的菜單與其餘內容配合得很好。

為什麼我們必須創建移動響應菜單？

隨著越來越多的人使用他們的移動設備訪問互聯網，移動響應菜單變得越來越流行。 創建移動響應菜單的主要原因是為了改善移動訪問者的用戶體驗。 移動響應菜單使訪問者可以輕鬆找到他們正在尋找的內容，無論他們使用的是智能手機、平板電腦還是台式電腦。

除此之外，還有一些您想要創建移動響應菜單的原因。

首先，它可以使您的網站對移動用戶更加友好。 其次，它可以幫助您節省移動設備上的空間，因為菜單比傳統菜單佔用的空間更少。 第三，它可以幫助您改進搜索引擎優化 (SEO) ，因為移動用戶更有可能點擊易於查看和導航的鏈接。

不僅如此，由於易於導航，人們往往會在您的網站上停留更長時間，從而降低跳出率。

那麼，如何創建移動 WordPress 響應式菜單呢？ 這樣做很容易。

如何創建移動響應菜單？

您可以通過幾種不同的方式創建移動響應式菜單。 當然，最簡單的方法是使用插件。 有許多可用的插件可讓您創建移動響應式 WordPress 菜單。 或者，您也可以使用 CSS 和 HTML 手動創建您自己的移動響應菜單。

WordPress 有幾個免費和付費插件，可讓您創建完全響應的移動菜單。 在這裡，讓我們先來看看幾個用戶友好且流行的插件。

響應式菜單

響應式菜單 wordpress 插件

響應式菜單是最好的插件之一，可以將您的標準 WordPress 菜單轉換為完全符合 W3C 標準的移動設備就緒設計。

使用此插件，您不需要任何編碼知識。 您可以通過將 22,500 多個選項與 150 多個自定義選項相結合來創建響應式菜單。 憑藉高度可定制的功能和直觀的用戶界面，您可以立即創建您選擇的菜單。

主要特徵

  • 更改字體和顏色
  • 添加搜索欄
  • 一鍵導入導出菜單
  • 不同的動畫選項
  • 預覽更改

價錢

響應式菜單提供免費和付費版本​​。 專業版起價為每年 49美元。

WP 移動菜單插件

wp-mobile-menu-plugin-create-a-mobile-responsive-wordpress-menu

WP Mobile Menu是一個移動響應的 WordPress 菜單插件，可讓您為您的網站構建令人驚嘆的菜單。 您可以製作一個裸露的標題、一個具有三個深度級別的菜單、在菜單處於活動狀態時覆蓋遮罩等等，以保持您的用戶的興趣。

此外，您可以提交基於文本或圖像的徽標並添加背景圖片。 使用此插件的高級版本，您可以在特定頁面上顯示移動菜單、添加頁眉實時搜索以及添加頁腳菜單。

主要特徵

  • 禁用特定頁面的菜單
  • 僅允許登錄用戶看到菜單
  • 選擇菜單顯示類型
  • 包括版權部分
  • 不同頁面上的替代菜單

價錢

WP Mobile Menu 還提供免費和高級版本。 高級版的起始價格為每月 6.49美元。 此外，您還可以獲得14 天無條件退款保證。

因此，這些是 WordPress 的幾個頂級響應式菜單插件。 接下來，我們將看到兩種創建移動響應式 WordPress 菜單的方法：

  1. 使用插件
  2. 以編程方式

所以，事不宜遲，讓我們開始吧。

1. 使用 WP 移動菜單插件創建移動響應菜單

對於此演示，我們將使用響應式菜單插件，因為它可以從 WordPress.org 存儲庫免費獲得併且易於使用。

在開始之前，您需要在您的站點上安裝並激活該插件。

1.1 安裝並激活響應式菜單插件

首先，從 WordPress 管理面板單擊插件 > 添加新插件。 使用頁面上的搜索欄查找插件的關鍵字。

要開始安裝過程，請在找到所需插件後單擊“立即安裝”按鈕。 之後，要開始使用插件，請單擊“激活”按鈕。

創建移動響應式 wordpress 菜單

1.2 創建手機菜單

安裝並激活插件後，您可以在 WordPress 儀表板中找到插件設置。 在那裡您可以找到 3 個不同的選項：菜單、設置和主題。

響應式菜單插件設置選項

單擊“菜單”選項後，將打開一個新頁面，您可以在其中找到“創建新菜單”按鈕。 現在您將看到一個新窗口，您可以在其中選擇各種菜單模板。 在免費版本中，您可以獲得四種不同的模板。 選擇您選擇的模板後，單擊“下一步”。

創建移動響應式 wordpress 菜單

然後，您將被重定向到菜單設置。 在這裡，您可以為您的菜單添加一個描述性名稱，以便您以後可以識別該菜單。

您還可以鏈接 WordPress 菜單以映射到您現有的菜單。 另一個設置選項是通過添加有效的 CSS 選擇器來隱藏現有主題的默認菜單。 我們稍後會看到如何隱藏默認菜單。

菜單設置

接下來，選擇要顯示菜單的設備。 如果您使用的是專業版，您將可以選擇手機、平板電腦和台式機。 但在免費版本中，只有手機和平板電腦選項可用。 最後，您可以選擇不同的條件來顯示菜單。 同樣，此選項在專業版上可用。

顯示條件設置

用所需的詳細信息填寫字段後，單擊“創建菜單”按鈕。 這將再次將您重定向到可以自定義菜單的頁面。

創建移動響應式 wordpress 菜單

但如您所見，新創建的菜單與原始菜單重疊。 現在，通過幾個進一步的步驟，我們可以完全隱藏原始菜單。

1.3 隱藏默認菜單

正如我們之前看到的，如果原始的 WordPress 菜單沒有被隱藏，它會默認顯示在新的響應式漢堡菜單旁邊（偶爾會重疊）。 因此，您必須手動隱藏菜單。 為此，請轉到響應式菜單插件中的設置 > 常規設置。 隱藏主題菜單的選項位於此處。

您可以通過在字段中插入CSS 選擇器來隱藏當前的主題菜單。

現在在添加正確的 CSS 之前，我們必須找出正確的 id 或 class。 為此，右鍵單擊原始菜單並選擇“檢查元素”，這將顯示原始菜單選擇器。

在隱藏主題菜單字段中，粘貼如下代碼： class=”toggle”或id=”main-mobile-menu” ，id 前綴為“#”或“.” 對於類選擇器。

例如，如果選擇器為id=”main-mobile-menu” ，您可以在隱藏主題菜單區域中寫入#main-mobile- menu。

css選擇器

在我們的例子中，我們的選擇器是一個類。 這就是我們粘貼它並添加“.”的原因。 在代碼之前。 將選擇器與前綴一起粘貼後，確保單擊“更新”按鈕。

1.4 自定義手機菜單

成功添加菜單後，您可以根據自己的喜好自定義菜單。 您可以從Responsive Menu > Menus找到自定義設置。 在那裡你可以找到一個新創建的菜單。 如您所見，有一個按鈕顯示“自定義”。 只需單擊該按鈕。

自定義菜單

在自定義選項中，您可以更改按鈕位置、菜單顏色、圖像和背景。 不僅如此，您還可以在 Menu Breakpoint 選項中添加自定義 CSS，讓您可以選擇激活 Mobile Menu 所需的屏幕寬度。 通過增加斷點寬度，也可以在桌面屏幕上顯示移動菜單。

2. 以編程方式創建移動響應菜單

在本節中，我們將了解如何以編程方式為您的網站創建響應式菜單。 因此，如果您對編碼和編輯核心文件有信心，那麼此方法非常適合您。

2.1. 將自定義代碼片段添加到 WordPress

在我們進入實際方法之前，為確保不與任何插件或腳本發生衝突，我們始終建議在對核心文件進行任何更改之前生成完整網站的備份。

要添加自定義代碼片段，您可以使用代碼片段之類的插件或將代碼片段直接粘貼到子主題的functions.php文件中，因為此方法需要插入自定義代碼。

首先，您可以根據自己的喜好手動創建子主題或使用子主題插件。 對於本教程，我們使用 WP Child Theme Generator 插件創建了一個子主題。

2.2. 創建移動響應式 WordPress 菜單的代碼片段

創建子主題後，將以下代碼粘貼到 functions.php。 或者，將以下代碼添加到您的 CodeSnippets 插件並激活該代碼段。

 函數 twenty_twenty_child_style_setup() {
register_nav_menu( 'primary-res-navigation', __( 'Primary MobRes Navigation', 'twenty_twenty_child_style_setup' ) );

}
add_action( 'after_setup_theme', 'twenty_twenty_child_style_setup' );

創建移動響應式 wordpress 菜單

在這裡，我們使用 twenty-twenty-child 設置方法將新的響應式自定義菜單命名為“ primary-res-navigation ”。 對於 WordPress 功能，我們使用了“ register_nav_menu” 。 當您將此代碼​​添加到您的function.php時，如下面的屏幕截圖所示，您將能夠在 WP 管理部分中查看自定義菜單。

創建移動響應式 wordpress 菜單

因為自定義菜單用作主要標題菜單，所以您必須添加另一個自定義代碼以啟用主資源導航菜單的顯示。 只需添加以下代碼行：

 wp_nav_menu( array( 'theme_location' => 'primary-res-navigation', 'menu_class' => 'nav-res-navigation' ) ); ？>

然後，只需單擊管理菜單，創建一個新的移動菜單，然後添加您希望顯示在移動菜單上的自定義鏈接。 所有這些都應該連接到您的主要移動菜單主題位置。

菜單鏈接

預覽後，這就是您的菜單的外觀，具體取決於您使用的主題。

菜單預覽使用代碼

添加新的自定義菜單後，您希望它只出現在移動設備上，而不是台式計算機上。 在這種情況下，我們可以使用 CSS 媒體查詢。 只需將以下代碼行添加到style.css即可防止移動菜單默認出現：

 .nav-res-navigation { 顯示：無； }

接下來，您應該只在移動屏幕上查看網站時顯示primary-res-navigation 菜單，並隱藏主菜單。 您可能還對為菜單添加不同設計的邊框感興趣。 為了使您的菜單更好，您應該將下面的代碼片段添加到您的style.css文件中。

 @media only screen and (max-width:500px) {
.nav-res-導航{
顯示：塊；
}
.nav-res-navigationa{
背景：#333；
顏色：#800000；
填充：10px0；
文本對齊：居中；
顯示：塊；
}
.main-nav-menu{
顯示：無；
}
}

隱藏默認菜單與 css

使用這段代碼，主菜單將保持隱藏狀態，菜單只會顯示在一個小屏幕上。

菜單預覽標題

就是這樣。 通過這些簡單易行的步驟，您可以使用自定義代碼創建移動響應式 WordPress 菜單。

結論

創建移動響應菜單可以讓移動用戶更容易訪問您的網站。 使用移動響應菜單，您的網站將在較小的屏幕上易於使用，並且仍將提供與在台式計算機上相同的所有特性和功能。

在本文中，我們討論瞭如何為任何 WordPress 網站創建和自定義適合移動設備的菜單。 我們還了解到為什麼將它們放在網站上很重要。 此外，我們還查看了前兩個響應式菜單插件，因此您可以選擇最適合您需要的那個。 最後，我們學習瞭如何使用響應式菜單插件創建移動響應式 WordPress 菜單。

在向您的網站添加額外功能時，插件方法是最簡單但安全的選擇。 另一方面，如果您熟悉編碼並且不需要插件，則可以使用手動方法。

我們希望您發現這篇文章有用且內容豐富。 如果是這樣，請務必查看我們的其他相關博客文章，您可能也會對這些文章感興趣：

  • Elementor 的智能超級菜單 – 完整指南
  • 如何編輯 WordPress 儀表板菜單
  • 如何將社交媒體圖標添加到 WordPress 菜單