為什麼要建立適合手機的響應式WordPress選單？
一個設計良好的導航選單能幫助訪客快速找到他們需要的內容。然而，一個在桌面電腦上看起來很好的選單，不一定能在手機和平板電腦上呈現同樣的效果。行動裝置的使用者佔據了大約58%的網絡流量，因此若你的選單在行動裝置上無法正常顯示，將會嚴重影響用戶體驗，進而降低你的轉換率。
這將使你難以達成如增長電子郵件名單、促成銷售和推動業務增長等關鍵目標。因此，我們將教你如何創建一個在智慧手機和平板電腦上都能美觀運作的響應式選單。你可以使用以下的方法直接跳轉到你想使用的部分。
方法一：建立適合手機的響應式滑動面板選單
滑動面板是一種導航選單，當訪客點擊或觸碰切換按鈕時，選單會滑入屏幕。這樣，選單始終易於訪問，但不會佔用屏幕空間，這對於較小螢幕的裝置來說尤其重要。
添加滑動面板的最簡便方法是使用Responsive Menu外掛。雖然該外掛有高級版本，但我們將使用其免費版，因為它提供了建立響應式選單所需的一切功能。
首先，你需要安裝並啟用Responsive Menu外掛。更多詳細信息，請參考我們的WordPress外掛安裝教程。啟用後，你可以使用該外掛自訂任何你之前創建的WordPress選單。如果你需要創建新的選單，請參考我們的初學者導航選單指南。
若你的主題已包含內建的手機選單，你需要知道該選單的CSS類名以便隱藏它。若跳過這一步，手機用戶將會看到兩個重疊的選單。詳盡的步驟，請參見我們的指南。
完成上述步驟後，前往WordPress管理側邊欄的Responsive Menu » Menus頁面，點擊「Create New Menu」按鈕。你會看到一些可用於選單的手機響應主題。我們使用「Default Theme」，但你可以選擇任何你喜歡的主題。
接下來，為選單輸入一個名字。這僅供參考，因此你可以使用任意名稱。你還需要點擊「Link WordPress Menu」並選擇你要使用的選單。
若你的主題已包含內建的手機選單，請將其CSS類名填入「Hide Theme Menu」字段。高級版使用者可以使用額外的設定，如隱藏某些頁面或裝置上的選單。
完成設定後，點擊「Create Menu」。你會在屏幕右側看到WordPress網站的預覽圖，左側是一些設定選項。若要查看手機上的網站狀態，點擊左下角的手機或平板圖示。
然後，選擇「Mobile Menu」，並點擊「Container」。在此，你可以找到各種設定項目。當你進行更改時，即時預覽通常會自動更新，這有助於你監控手機選單的外觀。
預設情況下，外掛會添加標題和一些「Add more content…」文字。你可以用自己的訊息替換這些文字，或完全刪除它們。點擊展開「Title」區域，自訂標題文字。接下來，你可以更改背景色、文字色、字體大小等。
若不需要標題文字，可以停用「Title」。沒有標題文字，會為手機導航選單中的鏈接和其他內容騰出更多空間。
類似地，若想更換「Add more content here…」文字，展開「Additional Content」區域，你可以輸入自己的文字、更改文字色、對齊方式等。若要完全刪除文字，只需停用相應選項，這在螢幕較小的手機和平板電腦上尤其有用。
預設情況下，Responsive Menu會將所有選單項目顯示為單列表形式。若選單短標籤較多，你可能會傾向於多列佈局，這樣可以在不顯得凌亂的情況下顯示更多項目。試試不同的列佈局，點擊展開「Menu」區域，選擇「Menu container columns」下拉選單中的列數。
此外，外掛還會在WordPress選單中添加搜索框，這雖然有助於訪客找到感興趣的內容，但也會佔用屏幕空間。若更喜歡，可以停用搜索框。
配置完選單後，點擊「Update」。然後，用手機訪問你的WordPress網站看看新選單的效果。
方法二：建立適合手機的全螢幕響應選單
另一種選項是添加全螢幕響應選單。這種選單會自動適應不同的螢幕大小，因此無論訪客使用何種裝置，導航選單都能保持良好外觀。
建立全螢幕選單的最簡便方法是使用FullScreen Menu外掛。啟用後，訪問「Fullscreen Menu Options」頁面，勾選「Activate Animated Fullscreen Menu」。我們建議先勾選「Show the menu only for Admin users」箱子，以便在配置選單時訪客不會看到變更。
預設情況下，該外掛會在所有裝置上顯示全螢幕選單。如果只想在智慧手機和平板電腦上顯示，勾選「Mobile only」。接下來，點擊「Design / Appearance」選項卡配置顏色、字體和動畫設定。
選擇完顏色後，滾動到「Menu Appearance」區域更改字體顏色、字體系列和字體大小。選擇額外字體可能會影響網站性能和加載速度，這對於處理能力較弱的手機裝置和網速較差的移動網絡連接來說並不理想。
設定完動畫效果後，點擊「Menu Content」選項卡添加內容。打開「Select Menu」下拉選單，選擇希望顯示的選單。如果沒有建立導航選單，請參見我們的導航選單指南。
如果希望在選單中顯示額外內容，可以將它們添加到「Free HTML / Shortcodes」框中。此外，你可以勾選選項添加隱私政策頁面的鏈接，還可以添加社交媒體圖示和搜索框等。
配置好選單後，點擊「Save Changes」，用手機訪問你的网站查看選單效果。
額外提示：如何將響應式選單添加到登陸頁面
如果你正在創建登陸頁面或銷售頁面，則需要確保其在行動裝置上同樣美觀。我們建議使用SeedProd，它是最好的WordPress頁面建立工具，擁有超過300個專業設計模板。
使用SeedProd創建設計後，你可以使用Nav Menu區塊將響應式選單添加到頁面。這個區塊允許你為行動裝置和桌面電腦創建不同的選單，甚至可以根據用戶的裝置顯示不同的鏈接。
欲了解更多信息，請參見我們的指南。添加Nav區塊後，點擊高級選項卡，展開「Device Visibility」區域，然後激活「Hide on Desktop」選項。
我們希望這篇文章能幫助你學會如何建立適合手機的響應式WordPress選單。你或許還會對我們的初學者指南如何增加博客流量或專家推薦的最佳分析解決方案感興趣。若你喜歡這篇文章，請訂閱我們的YouTube頻道以獲取更多WordPress視頻教學，同時也可以在Twitter和Facebook上關注我們。
