如何在WordPress中隱藏移動菜單(入門指南)


您要在WordPress中隱藏移動菜單嗎?

大多數WordPress主題都帶有內置樣式,這些樣式會自動將導航菜單轉換為移動菜單。 但是,您可能不希望在移動設備上使用相同的菜單,或者可能希望使用不同的菜單樣式。

在本文中,我們將向您展示如何使用插件或代碼方法在WordPress中輕鬆隱藏移動菜單。

在手機上隱藏WordPress菜單

方法1.使用插件在WordPress中隱藏移動菜單

此方法更簡單,建議初學者使用。 我們將使用插件來隱藏WordPress主題提供的現有移動菜單,然後在移動設備上使用其他菜單或完全不使用菜單。

首先,您需要訪問 外觀»菜單 頁面並創建一個新的導航菜單,您要在移動設備上顯示該菜單。

創建要在移動設備上使用的新菜單

在下一個屏幕上,您需要為新菜單提供一個名稱,以幫助您以後識別它。 我們將其稱為“移動菜單”。 之後,您可以從左欄中選擇要添加到菜單中的項目。

添加菜單項

完成向菜單中添加項目後,不要忘記單擊“保存菜單”按鈕來保存菜單。

如果您在創建新的導航菜單時需要幫助,請按照我們的初學者指南在WordPress中創建導航菜單。

接下來,您需要安裝並激活WP Mobile Menu插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要訪問 移動菜單選項 頁面以配置插件設置。 在這裡,您需要通過打開切換來選擇是在右側還是在左側顯示移動菜單。

選擇手機菜單及其方向

從下拉菜單中,選擇您先前創建的移動菜單。

接下來,您需要向下滾動到“隱藏原始主題菜單”部分。 在這裡,您可以告訴插件隱藏由WordPress主題創建的移動菜單。

在WordPress中隱藏主題移動菜單

默認情況下,該插件將使用最流行的WordPress主題使用的常用元素標識符。 大多數用戶不需要在這裡做任何事情。

但是,如果該插件無法隱藏您的主題菜單,則可以返回此處並單擊“查找元素”按鈕,僅指向您主題的導航菜單。

不要忘記單擊“保存更改”按鈕來存儲您的設置。

現在我們已經設置了插件,我們需要告訴WordPress網站將移動菜單顯示到該插件添加的新菜單位置。

只需轉到 外觀»菜單 頁。 確保在下拉菜單中選擇了您之前創建的移動菜單。 在菜單項下,選擇您在插件設置中選擇的位置(例如,“左移動菜單”或“右移動菜單”)。

菜單位置

現在,您可以訪問您的網站以查看正在使用的新菜單。 現在,該插件將隱藏您主題的移動菜單,並顯示自定義菜單。

移動菜單已替換

WP Mobile Menu插件可讓您更改菜單欄的顏色,更改不透明度,添加圖標等。 隨意使用這些設置。

方法2。使用CSS代碼隱藏移動菜單

此方法有點高級,需要使用一些自定義CSS。

對於此方法,您可以選擇使用兩種不同的方法。 您可以僅使用CSS隱藏完整的移動菜單,也可以在移動設備上隱藏單個菜單項。

1.使用CSS在移動設備上隱藏完整的菜單

首先,您需要確定需要使用自定義CSS進行修改的元素。 為此,只需轉到您的網站,然後將鼠標移到導航菜單上即可。 之後,右鍵單擊並選擇檢查工具。

檢查工具

您的瀏覽器屏幕將分為兩部分,您將看到網頁的源代碼。 現在,此導航菜單不再是您需要定位的菜單,因為它在桌面屏幕上可見。

查看桌面菜單時的源代碼

您需要重新佈置瀏覽器屏幕,方法是將其從角落拖動到較小的尺寸,直到桌面導航菜單被移動菜單替代為止。

移動菜單標識符

您需要弄清楚WordPress導航菜單使用的標識符和CSS類。 您可以通過在源代碼上移動鼠標直到菜單區域突出顯示來實現。

如您在上面的屏幕截圖中所見,我們的測試主題是使用 navbar-toggle-wrapper 班級。

之後,您需要轉到 外觀»定制 WordPress管理區域中的頁面以啟動主題定制器。 在這裡,您需要切換到“其他CSS”標籤,然後點擊左側面板右下角的移動圖標。

添加自定義CSS以隱藏完整菜單

現在,定製程序將顯示您的網站在移動設備上的外觀預覽。 現在,您可以輸入以下CSS代碼,並在預覽面板中看到您的移動菜單消失。

.navbar-toggle-wrapper { 
display:none; 
} 

不要忘記將.navbar-toggle-wrapper替換為WordPress主題使用的標識符。

之後,點擊頂部的“發布”按鈕以保存您的更改。

2.使用CSS隱藏移動菜單中的特定菜單項

使用此方法,您可以創建導航菜單,然後有選擇地顯示或隱藏不想在移動或台式設備上顯示的項目。

這種方法的優點是,您可以在移動設備和台式機上使用相同的導航菜單,而只隱藏不希望看到的項目。

首先,您需要轉到 外觀»菜單 頁面,然後單擊屏幕右上角的“屏幕選項”按鈕。 在這裡,您需要選中“ CSS類”選項旁邊的框。

屏幕選項

在那之後。 您需要向下滾動到要隱藏在移動設備上的菜單項,然後單擊以展開它。 在菜單項設置中,您現在將看到添加CSS類的選項。 繼續添加 .hide-mobile CSS類。

添加CSS類

對您不想在移動設備上顯示的所有菜單項重複此過程。

同樣,您也可以單擊要在台式計算機上隱藏的菜單項。 這次,添加 .hide-desktop 改為使用CSS類。

完成後,請不要忘記單擊“保存菜單”按鈕來存儲您的更改。

現在,我們將添加自定義CSS以隱藏這些菜單項。 只需轉到 外觀»定制 頁面以啟動主題定制器,然後單擊其他CSS選項卡。

您需要在CSS框中添加以下CSS代碼。

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}

添加自定義CSS

不要忘記單擊“發布”按鈕以保存您的更改。

現在,您可以訪問您的網站,您會發現要隱藏在桌面上的項目不再顯示在菜單中。 將瀏覽器屏幕調整為較小的尺寸,您也會在移動菜單中看到相同的內容。

桌面和移動屏幕上的不同菜單

我們希望本文能幫助您學習如何輕鬆地在WordPress中隱藏移動菜單。 您可能還想看一下我們的文章,該文章關於如何在WordPress中創建自定義頁面或如何從頭開始創建自定義主題而無需編寫代碼。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在以下位置找到我們 推特 和Facebook。