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

已發表: 2016-11-04

為我們的讀者提供的特殊 WordPress 託管建議，如何製作移動就緒響應 WordPress 菜單。你想建立一個移動就緒的響應式 WordPress 菜單嗎？移動用戶之前在很多網站上都超過了桌面用戶。添加移動響應菜單可以讓用戶更輕鬆地管理您的網站。在本文中，我們的專家將向您解釋如何輕鬆建立移動就緒的響應式 WordPress 菜單。

創建移動響應 WordPress 菜單

這是一個深入的教程。我們將向初學者展示插件方法（無編碼）和為我們更高級的用戶展示編碼方法。

在本教程結束時，您將學習如何創建滑入式移動菜單、下拉式移動菜單和切換移動菜單。

準備好？讓我們開始吧。

技巧 1：借助插件在 WordPress 中添加響應式菜單

這種技術對新手來說更容易更好，因為它不需要客戶端編碼。在這種技術中，我們將製作一個可以在您的手機屏幕上滑動的漢堡菜單。

響應式菜單插件演示

首先，您需要使用響應式菜單插件進行安裝和激活過程。如果您想閱讀更多詳細信息，請查看我們關於安裝 WordPress 插件的說明。

激活後，插件將在您的 WordPress 管理欄中添加一個標有“響應式菜單”的新菜單項。單擊它將帶您進入插件的設置頁面。

響應式菜單設置

首先你需要介紹屏幕的寬度，此時插件將開始顯示響應式菜單。保留值是 800px，必須適用於大多數網站。

之後，您必須選擇要用於響應式菜單的菜單。如果你還沒有建立一個菜單，那麼你可以通過考勤來製作一個外觀»菜單。查看我們關於如何在 WordPress 中附加導航菜單的說明以獲取特定說明。

屏幕上的最後一個選項是為您當前的非響應式菜單提供一個 CSS 類。這將允許插件在較小的屏幕上隱藏您的非響應式菜單。

不要忘記單擊“更新選項”按鈕來存儲您的設置。

您現在可以訪問您的網站並調整瀏覽器屏幕的大小以查看響應式菜單的運行情況。

響應式菜單插件演示

響應式菜單插件帶有許多其他選項，可讓您更改響應式菜單的行為和外觀。您可以在插件的設置頁面上探索這些選項並根據需要進行調整。

方法 2：使用插件添加下拉選擇菜單

附加響應式菜單的其他方法是附加下拉選擇菜單。這種技術不需要任何代碼經驗，因此它是新手的最佳方法。

響應式菜單的選擇

首先，您需要使用響應式菜單插件進行安裝和激活過程。如果您想閱讀更多詳細信息，請查看我們關於安裝 WordPress 插件的說明。

激活後，你要到考勤外觀»響應式選擇配置插件設置。

選擇菜單設置

您必須向下滾動到“激活主題位置”劃分。默認情況下，插件會在所有主題位置上激活。您可以通過選擇性地轉換某些主題位置來改變它。

請記住，您需要單擊“保存所有安裝”鍵來存儲您的更改。

您現在可以訪問您的網站並調整瀏覽器屏幕的大小以查看工作中的響應式選擇菜單。

技巧 3：使用開關動作製作移動響應式菜單

在移動屏幕上顯示菜單的最常用技術之一是藉助切換操作。

此技術要求您將自定義鍵附加到 WordPress 數據集。如果您以前沒有製作過這個，請查看我們關於在 WordPress 中粘貼來自互聯網的片段的說明。

首先，您必須打開一個文本編輯器，例如記事本並粘貼此代碼。

在這個玩具之後需要附加 CSS，以便我們的菜單在手機上查看時使用正確的 CSS 類進行切換。

技巧 4：在 WordPress 中添加滑入式移動菜單

其他常見的方法是在滑入式面板菜單的幫助下附加移動菜單（如您在技術 1 中所見）。

技巧 4 要求您將代碼附加到 WordPress 主題文件中，它只是實現與技巧 1 相同結果的不同方式。

首先，您必須打開一個純文本編輯器，例如記事本，並將特殊代碼附加到一個空白文本文件中。

請記住，您需要將 example.com 替換為您的個人域名名稱，並將您的主題替換為您的實際主題目錄。將此文件作為 slidepanel.js 保存到您的桌面。

之後，您將需要一張將用作菜單圖標的圖片。

漢堡的圖標最常用作菜單圖標。您會從各種互聯網站點看到大量此類圖片。我們將使用 Google Material Icons 庫中的菜單圖標。

現在您看到了您想要使用的圖片，將其保存為 menu.png。

之後，您需要打開一個 FTP 客戶端並將 slidepanel.js 文件上傳到 /wp-content/your-theme/js/ 文件夾。

如果你的主題目錄沒有 JS 文件夾，那麼你必須先建立tit 然後上傳你的文件。

在此過程之後，您必須將 menu.png 文件上傳到 /wp-content/themes/your-theme/images/ 文件夾。

文件上傳後，我們需要確信您的主題會影響您此時添加的 JavaScript 文件。我們將通過對 JavaScript 文件進行排隊來實現這一點。

將此代碼附加到主題的 functions.php 文件中。

請注意，您的主題的導航菜單仍然存在。我們剛剛將它包裹在我們需要觸發滑動面板菜單的 HTML 中。

最後一步是添加 CSS 以在大屏幕上隱藏菜單圖像圖標。您還需要調整菜單圖標的位置。

根據您的 WordPress 主題，您可能需要調整 CSS 以避免衝突。