Jak ukryć menu mobilne w WordPress (przewodnik dla początkujących)

Czy chcesz ukryć mobilne menu w WordPress?

Większość motywów WordPress ma wbudowane style, które automatycznie przekształcają menu nawigacji w menu mobilne. Jednak możesz nie chcieć używać tego samego menu na telefonie komórkowym lub możesz chcieć użyć innego stylu menu.

W tym artykule pokażemy, jak łatwo ukryć mobilne menu w WordPress za pomocą wtyczki lub kodu.

Hiding a WordPress menu on mobile

Metoda 1. Ukryj mobilne menu w WordPress za pomocą wtyczki

Ta metoda jest łatwiejsza i zalecana dla początkujących. Użyjemy wtyczki, aby ukryć istniejące menu mobilne dostarczone przez motyw WordPress, a następnie użyjemy innego menu lub w ogóle nie będziemy go używać na urządzeniach mobilnych.

Najpierw musisz odwiedzić stronę Wygląd »Menu i utworzyć nowe menu nawigacyjne, które chcesz wyświetlać na urządzeniach mobilnych.

Create a new menu to be used on mobile devices

Na następnym ekranie musisz podać nazwę nowego menu, która pomoże Ci je później zidentyfikować. Nazwiemy to „Menu mobilne”. Następnie możesz wybrać elementy, które chcesz dodać do menu z lewej kolumny.

Adding menu items

Po zakończeniu dodawania pozycji do menu nie zapomnij kliknąć przycisku Zapisz menu, aby zapisać menu.

Jeśli potrzebujesz pomocy przy tworzeniu nowego menu nawigacyjnego, skorzystaj z naszego przewodnika dla początkujących, aby tworzyć menu nawigacyjne w WordPress .

Następnie należy zainstalować i aktywować wtyczkę WP Mobile Menu . Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress .

Po aktywacji musisz odwiedzić stronę Opcje menu telefonu komórkowego , aby skonfigurować ustawienia wtyczki. W tym miejscu musisz wybrać, czy chcesz wyświetlać menu telefonu komórkowego po prawej, czy po lewej stronie, włączając przełącznik.

Choose mobile menu and its direction

Z rozwijanego menu wybierz utworzone wcześniej mobilne menu.

Następnie należy przewinąć w dół do sekcji „Ukryj oryginalne menu motywu”. Tutaj możesz powiedzieć wtyczce, aby ukryła mobilne menu utworzone przez motyw WordPress.

Hide theme mobile menu in WordPress

Domyślnie wtyczka będzie używać powszechnie używanych identyfikatorów elementów używanych przez najpopularniejsze motywy WordPress . Większość użytkowników nie musiałaby tutaj nic robić.

Jeśli jednak wtyczka nie ukryje menu motywu, możesz tu wrócić i kliknąć przycisk „Znajdź element”, aby po prostu wskazać menu nawigacyjne motywu.

Nie zapomnij kliknąć przycisku Zapisz zmiany, aby zapisać ustawienia.

Teraz, gdy skonfigurowaliśmy wtyczkę, musimy powiedzieć witrynie WordPress , aby wyświetlić nasze mobilne menu w nowej lokalizacji menu dodanej przez wtyczkę.

Po prostu przejdź do strony Wygląd »Menu . Upewnij się, że utworzone wcześniej mobilne menu jest zaznaczone w rozwijanym menu. Poniżej pozycji menu wybierz lokalizację wybraną w ustawieniach wtyczki (np.Lewe menu mobilne lub prawe menu mobilne).

Menu location

Możesz teraz odwiedzić swoją witrynę internetową, aby zobaczyć nowe menu w akcji. Wtyczka ukryje teraz mobilne menu motywu i wyświetli menu niestandardowe.

Mobile menu replaced

Wtyczka WP Mobile Menu umożliwia zmianę koloru paska menu, zmianę krycia, dodawanie ikon i nie tylko w ustawieniach. Zapraszam do zabawy z tymi ustawieniami.

Metoda 2. Ukryj menu mobilne za pomocą kodu CSS

Ta metoda jest nieco zaawansowana i wymaga użycia niestandardowego CSS.

W przypadku tej metody można wybrać dwa różne podejścia. Możesz po prostu ukryć całe menu mobilne za pomocą CSS lub możesz ukryć poszczególne elementy menu na urządzeniach mobilnych.

1. Ukrywanie pełnego menu na urządzeniach mobilnych za pomocą CSS

Najpierw musisz określić element, który chcesz zmodyfikować, używając niestandardowego CSS . Aby to zrobić, po prostu przejdź do swojej witryny i najedź myszą na menu nawigacyjne. Następnie kliknij prawym przyciskiem myszy i wybierz Sprawdź narzędzie .

Inspect tool

Ekran przeglądarki zostanie podzielony na dwie części i zobaczysz kod źródłowy swojej strony internetowej. Teraz to menu nawigacyjne nie jest tym, na które musisz kierować reklamy, ponieważ jest widoczne na ekranie pulpitu.

Source code while viewing your desktop menu

Musisz zmienić układ ekranu przeglądarki, przeciągając go z rogu do mniejszego rozmiaru, aż menu nawigacyjne na pulpicie zostanie zastąpione menu mobilnym.

Mobile menu identifier

Musisz znaleźć identyfikator i klasę CSS używane w menu nawigacyjnym WordPress. Możesz to zrobić, przesuwając kursor myszy po kodzie źródłowym, aż obszar menu zostanie podświetlony.

Jak widać na powyższym zrzucie ekranu, nasz motyw testowy używa klasy navbar-toggle-wrapper .

Następnie musisz przejść do Wygląd »Dostosuj stronę w obszarze administracyjnym WordPress, aby uruchomić narzędzie do dostosowywania motywów. Tutaj musisz przejść do zakładki „Dodatkowe CSS” i kliknąć ikonę telefonu komórkowego w prawym dolnym rogu lewego panelu.

Adding custom CSS to hide complete menu

Moduł dostosowywania pokaże teraz podgląd tego, jak Twoja witryna będzie wyglądać na urządzeniach mobilnych. Możesz teraz wpisać następujący kod CSS i zobaczyć, jak Twoje mobilne menu znika w panelu podglądu.

.navbar-toggle-wrapper {
Nie wyświetla się;
}
 

Nie zapomnij zastąpić .navbar-toggle-wrapper identyfikatorem używanym przez motyw WordPress.

Następnie kliknij przycisk „Opublikuj” u góry, aby zapisać zmiany.

2. Ukrywanie określonych pozycji menu w menu mobilnym za pomocą CSS

Ta metoda umożliwia utworzenie menu nawigacyjnego, a następnie wybiórcze pokazywanie lub ukrywanie elementów, których nie chcesz wyświetlać na urządzeniach mobilnych lub stacjonarnych.

Zaletą tej metody jest to, że można używać tego samego menu nawigacyjnego na urządzeniach mobilnych i komputerach oraz po prostu ukrywać elementy, których nie chcemy widzieć.

Najpierw musisz przejść do strony Wygląd »Menu i kliknąć przycisk Opcje ekranu w prawym górnym rogu ekranu. W tym miejscu musisz zaznaczyć pole obok opcji „Klasy CSS”.

Screen Options

Potem. musisz przewinąć w dół do pozycji menu, którą chcesz ukryć na urządzeniach mobilnych i kliknąć, aby ją rozwinąć. W ustawieniach pozycji menu zobaczysz teraz opcję dodania klasy CSS. Śmiało i dodaj tam klasę CSS .hide-mobile .

Add CSS class

Powtórz ten proces dla wszystkich pozycji menu, których nie chcesz wyświetlać na telefonie komórkowym.

Podobnie możesz także kliknąć elementy menu, które chcesz ukryć na komputerach stacjonarnych. Tym razem dodaj zamiast tego klasę CSS .hide-desktop .

Po zakończeniu nie zapomnij kliknąć przycisku Zapisz menu, aby zapisać zmiany.

Teraz dodamy niestandardowy CSS, aby ukryć te elementy menu. Po prostu przejdź do strony Wygląd »Dostosuj , aby uruchomić narzędzie do dostosowywania motywu i kliknij kartę Dodatkowe CSS.

Musisz dodać następujący kod CSS w polu CSS.

@media (min-width: 980px) {

    .hide-desktop {
    wyświetlacz: brak! ważne;
    }

}

    @media (max-width: 980px) {
    .hide-mobile {
    wyświetlacz: brak! ważne;
    }

}
 

Add your custom CSS

Nie zapomnij kliknąć przycisku Opublikuj, aby zapisać zmiany.

Możesz teraz odwiedzić swoją stronę internetową i zauważysz, że elementy, które chciałeś ukryć na pulpicie, nie są już widoczne w menu. Dostosuj ekran przeglądarki do mniejszego rozmiaru, a zauważysz to samo również w menu mobilnym.

Different menus on desktop and mobile screens

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo ukryć mobilne menu w WordPress. Możesz również chcieć zobaczyć nasz artykuł o tym, jak tworzyć niestandardowe strony w WordPress lub jak tworzyć niestandardowy motyw od podstaw bez pisania kodu.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube z samouczkami wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku .