如何在WordPress主題中添加滑動面板菜單

WPressize Me

11/24/2023

為什麼在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視頻教程。您還可以在TwitterFacebook上找到我們。



Related Posts

  • 2024-07-20
  • WordPress 主题

您是否想在 WordPress 中為不同頁面使用多個佈景主題?可以自訂網頁的外觀和布局,為文章、頁面和部分區域建立模板。但是如果您想為網站的某些部分或頁面使用完全不同的佈景主題呢?本文將指導您如何在 WordPress 中為頁面使用多個佈景主題。

閱讀更多
  • 2024-07-19
  • WordPress 主题

您是否想在 WordPress 網站上添加回頂效果?這種效果在頁面較長時非常有用,可以讓用戶輕鬆返回頁面頂部,提升網站的用戶體驗。本文將教您如何使用 jQuery 和插件在 WordPress 中添加平滑回頂效果。

閱讀更多
  • 2024-07-13
  • WordPress 主题

您是否想在 WordPress 中創建一個自定義頁面?自定義頁面允許您使用與網站其餘部分不同的佈局。許多 WordPress 網站使用自定義頁面佈局來建立銷售頁面、登陸頁面、網路研討會頁面等。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中創建自定義頁面。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>