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

如果您是 WordPress 開發人員或 WordPress 主題設計師，您可能希望在主題編輯器中添加自定義菜單以控制菜單選項。 但是，WordPress 管理儀表板默認沒有滑動面板菜單選項。 這意味著您必須求助於第三方插件或模板才能將此功能添加到您的主題中。 因此，今天我們將解釋如何在 WordPress 主題中添加滑動面板菜單。

WordPress 主題中的滑動面板菜單：為什麼要包含它？

包括側面板可能很重要的原因有很多。 第一個原因是，如果您花時間開發直觀的菜單，訪問者將更容易瀏覽您的 WordPress 網站。 第二個原因是移動設備需要滑動面板。 因此，如果您想讓您的網站在移動設備上正常運行，您需要確保擁有它們。 但是，如果您的許多站點用戶將使用移動設備，那麼在使用 WordPress 之前，在這些較小的顯示器上測試菜單的佈局是必不可少的。 幸運的是，在移動設備上查看時，許多 WordPress 主題的默認樣式將顯示適合移動設備的菜單。 WordPress 主題中的全屏響應菜單或動態滑動面板菜單可能是進一步個性化您的移動導航的不錯選擇。 因此，讓我們檢查一下將滑動面板菜單集成到 WordPress 主題中。

第一步：安裝響應式菜單插件

安裝和啟用響應式菜單插件是第一步。 這個插件有兩個不同的版本，付費版和免費版。 雖然付費版的響應式菜單提供了一些不錯的附加功能，例如條件邏輯和更多主題選項，但我們將在本教程中使用開源插件。 打開響應式菜單後，轉到響應式菜單 > 菜單。 到達那里後，轉到工具欄並點擊“創建新菜單”按鈕。 為您的新菜單命名，並保存您的工作。 如果它說它是空的，請不要擔心。

第二步：選擇主題

新的響應式菜單將為您提供四種不同的設計選項。 如果您願意，可以購買更多主題。 本教程將使用系統選擇的主題。 然後，您可以通過選擇“下一步”選項繼續。 如果您還沒有這樣做，請為您的響應式菜單命名，然後從您的 WordPress 儀表板中選擇您想要顯示在側邊欄中的菜單類型。 為了本教程，我們選擇了“導航”選項。

如果您希望訪問者只看到新的滑動面板菜單，您還可以選擇隱藏隨 WordPress 主題一起出現的默認菜單。 為此，請使用標有“隱藏主題菜單”的區域輸入一些 CSS 代碼。 單擊“了解更多”按鈕以獲取有關如何為所選主題輸入適當代碼的更多信息。 Pro 版為用戶添加了更多自定義選項。

第三步：設置

根據您的喜好調整參數後，您可以通過單擊“創建菜單”按鈕生成菜單。 完成此操作後，您會在右側看到您網站的預覽，底部有切換到手機、平板電腦或桌面模式的選項。 在左側，您會看到更多個性化設置。 記下菜單選項上方顯示的語言。 菜單的標題和插件標記的一行“附加內容”都顯示在這裡。

從側面菜單中選擇“移動菜單”，然後選擇“容器”以更改或隱藏文本。 在標題文本區域，您可以輸入任何內容，從“主菜單”到“導航”。 要禁用標題欄，只需將標有“標題”的開關切換到關閉位置。 完成後，轉到“其他內容”選項。 您可以選擇禁用此功能或將文本替換為其他任何內容。 當您完成自定義菜單時，不要忘記單擊頁面底部的“更新”按鈕。

在您上線之前，進行一些初步測試很重要。 為確保一切正常，您可能希望使用不同於您通常用來訪問站點的瀏覽器。 在此示例中，我們使用了 Google Chrome 瀏覽器。 為了在移動設備上訪問該網站，我們下載了一個名為“ Internet Explore for Android”的應用程序。 我們將該站點的 URL 複製並粘貼到應用程序中，結果令人震驚。 我們發現菜單在橫向和縱向方向上的格式都正確，並且所有鏈接都按預期工作。 不過，當涉及到移動設備時，您的情況可能會有所不同。 我們鼓勵您在上線之前在盡可能多的設備和瀏覽器上測試您的菜單。 如果您確實發現任何問題，現在是時候解決它們了。

第五步：上線

一旦菜單經過測試並且您對一切按計劃進行感到滿意，就可以將其公開。 單擊站點右上角的菜單圖標，然後從下拉菜單中選擇“菜單設置”。 您會在列表頂部看到一個標題為“移動菜單”的項目列表。 您將在此處輸入移動菜單插件頁面的網址。 完成後，單擊“保存更改”並等待幾秒鐘以使更改生效。 而已！

結論

既然您知道如何在 WordPress 主題中添加滑動面板菜單，請在您自己的網站上嘗試一下。 現在，如果您想用額外的菜單更新您的網站，您知道該怎麼做。 希望本文能幫助您學習一項新技能，並且不會讓您感到不知所措。