為什麼在WordPress主題中添加滑動面板菜單?
設計良好的菜單可以幫助訪客在您的WordPress網站中找到他們需要的內容。許多訪客將使用移動設備,因此預覽WordPress網站的移動版本來查看導航菜單在較小屏幕上的外觀非常重要。幸運的是,許多WordPress主題自帶內置樣式,當在小屏幕上查看時,自動顯示適合移動設備的菜單。然而,您可能希望進一步自定義您的移動導航,並添加全屏響應式菜單或動畫滑動面板菜單。
如何在WordPress主題中添加滑動面板菜單
第一步是安裝並激活Responsive Menu插件。更多詳細資訊,請參閱我們的逐步指南,了解如何安裝WordPress插件。
啟用後,導航到Responsive Menu » Menus頁面。在此,您應該點擊屏幕頂部的Create New Menu按鈕。
然後,您將看到四個可以用於新響應式菜單的主題,有更多樣式可供購買。對於本教程,我們將使用自動選擇的主題。然後點擊「下一步」按鈕。這將帶您進入菜單設置頁面。在此,您可以為響應式菜單輸入名稱,然後選擇要顯示在面板中的WordPress菜單。為了演示,我們選擇了“導航”菜單。如果需要創建新菜單,可以參考我們的指南,了解如何在WordPress中添加導航菜單。
您還可以隱藏WordPress主題自帶的普通菜單,這樣,您的用戶只會看到新的滑動面板菜單。您可以在Hide Theme Menu字段中輸入CSS代碼來完成這一步。 需要輸入的代碼因主題而異,具體資訊可點擊「了解更多」鏈接。 Pro 版用戶有一些額外的設置。例如,Pro 用戶可以選擇在哪些設備和頁面上顯示菜單。配置好設置後,應點擊頁面底部的Create Menu按鈕。這將帶您進入可以完成菜單自定義的頁面。
您會看到網站預覽位於屏幕的右側,底部有按鈕切換手機、平板和桌面視圖。左側有自定義選項。請注意,菜單上方顯示一些文本,這是菜單的標題文本和插件稱為“附加內容”的一行文字。您可以通過點擊Mobile Menu,然後在頁面左側菜單的Container中進行編輯或隱藏。
您可以在Title Text字段中輸入任意文字,例如“主菜單”或“導航”。如果不想顯示標題,則只需將Title開關滑動至關閉位置。接下來需要向下滾動到「附加內容」設置。可以將此設置關閉或鍵入替代內容。在下面的截圖中,您會注意到開關已關閉,因此“在此處添加更多內容…”的文字被隱藏。
配置好菜單設置後,確保點擊頁面底部的Update按鈕來保存設置。Responsive Menu插件有很多選項可以改變滑動面板菜單的行為和外觀。您可以在插件的設置頁面上探索這些選項並根據需要進行調整。
現在可以訪問您的網站來查看菜單效果了。以下是我們演示網站上的效果。如果當前頁面在菜單中,那麼它將用彩色帶突出顯示。
希望這個教程能幫助您了解如何在WordPress主題中添加滑動面板菜單。您可能還想了解如何跟蹤網站訪問者,或查看我們的必備插件列表以促進網站的成長。如果您喜歡這篇文章,請訂閱我們的YouTube頻道以獲取WordPress視頻教程。您還可以在Twitter和Facebook上找到我們。