Jak ukryć mobilne menu w WordPressie (krok po kroku)

W WordPressie, jeśli chcesz ukryć menu telefonu komórkowego, czytaj dalej tego bloga

Przekonasz się, że większość motywów WordPress jest obsługiwana przez wbudowane style, co pomoże ci automatycznie przekonwertować menu nawigacyjne na menu mobilne.

W telefonie komórkowym możesz nie chcieć używać podobnego menu, ponieważ możesz potrzebować różnych stylów menu, aby wyświetlić je na swoich telefonach komórkowych.

Poniżej znajdziesz dwie różne metody ukrywania menu mobilnego w WordPressie:

Metoda 1: Ukryj menu mobilne za pomocą wtyczki WordPress

Dla początkujących zalecana jest metoda 1, ponieważ nie muszą bawić się kodowaniem, wystarczy skorzystać z wtyczek, aby ukryć menu mobilne, które jest domyślnie podane przez motyw WordPress.

Po ukryciu mogą korzystać z różnych menu lub nie wyświetlać żadnego menu na urządzeniach mobilnych.

Aby skorzystać z wtyczki WordPress, początkujący musi najpierw zalogować się do pulpitu WordPress, a następnie kliknąć na wygląd, a następnie na stronę menu. Tutaj mogą stworzyć nowe menu nawigacyjne, aby zaprezentować je na urządzeniach przenośnych.

Teraz znajdziesz kolejny ekran, na którym masz nową nazwę menu, dzięki czemu możesz ją rozpoznać w razie potrzeby. Weź pod uwagę, że dodałeś nazwę jako „menu telefonu”. Teraz możesz wybrać przedmiot.

Po dodaniu elementów do menu nadszedł czas, aby kliknąć przycisk Zapisz menu.

Teraz z repozytorium wtyczek WordPress możesz wybrać menu mobilne WP – i pobrać je. Możesz też zainstalować tę wtyczkę bezpośrednio z pulpitu WordPress.

Po aktywacji konieczne będzie przejście do strony menu urządzenia mobilnego, aby skonfigurować ustawienia wtyczki.
Teraz znajdziesz tutaj opcję, aby menu telefonu było po lewej lub prawej stronie. Możesz włączyć lub wyłączyć opcję b.

Teraz wybierz menu telefonu, które stworzyliśmy wcześniej z menu rozwijanego.

Teraz przewiń stronę w dół, aż pojawi się opcja „ukryj oryginalne menu motywu”. Teraz ta opcja pomoże ci powiedzieć wtyczce, że menu mobilne motywu WordPress musi być ukryte.

Domyślnie najczęściej używane elementy identyfikujące, z których korzystają motywy WordPress przyjazne dla urządzeń mobilnych, będą używane przez wtyczki. Większość użytkowników serwisu nie będzie musiała tutaj nic robić.

Załóżmy, że wtyczka, której używasz, nie jest w stanie ukryć mobilnego menu twoich motywów, możesz ponownie odwiedzić tę samą stronę i kliknąć myszą „znajdź element”, aby wskazać menu nawigacyjne twojego motywu.

Aby zachować wszystkie ustawienia, nie zapomnij zapisać zmian.

Teraz, jak skonfigurowaliśmy za pomocą wtyczki, musisz teraz poinformować swoją witrynę, że musi wyświetlać menu telefonu, które jest dodawane przez wtyczkę do nowej lokalizacji menu.

Aby to zrobić:

Przejdź do wyglądu i kliknij stronę menu.

Upewnij się, że w menu rozwijanym utworzone menu telefonu jest prawidłowo wybrane. Teraz wybierz lokalizację poniżej pozycji menu, tj. prawe menu mobilne lub lewe menu mobilne.

Teraz sprawdź, czy nowe menu jest widoczne na Twojej stronie, czy nie. Jednak wtyczka, której używaliśmy, nie pokaże mobilnego menu twojego motywu, ale pokaże to, które stworzyliśmy, tj. Menu telefonu.

Zasugerowana przez nas wtyczka, np. Wtyczka menu mobilnego WP, pomoże Ci zmienić kolor paska menu, dodać więcej ikon, zmienić krycie i wiele innych rzeczy w ustawieniach. Możesz łatwo i swobodnie korzystać z takich opcji ustawień.

Metoda 2: Za pomocą kodu ukryj menu mobilne

Wybierając tę ​​metodę ukrywania menu mobilnego, upewnij się, że masz doświadczenie w kodowaniu lub przynajmniej znasz niestandardowy CSS.

W przypadku tej metody będziesz mieć dwa różne podejścia. Albo możesz sprawić, że całe menu mobilne stanie się niewidoczne za pomocą CSS, albo możesz sprawić, że poszczególne elementy staną się niewidoczne na urządzeniach mobilnych.

Spraw, aby Twoje kompletne menu było niewidoczne na małych urządzeniach dzięki CSS

Elementy, które chcesz zmienić za pomocą niestandardowego kodu CSS, muszą się rozgryźć. Aby to zrobić, musisz najpierw odwiedzić swoją witrynę, a następnie kliknąć menu nawigacyjne. Teraz kliknij go prawym przyciskiem myszy i wybierz narzędzie inspekcji.

Teraz znajdziesz dwa różne ekrany. Na jednym ekranie zostanie wyświetlona Twoja witryna, a na innym zostanie wyświetlony kod źródłowy. Musisz jednak dostosować ekran przeglądarki do mniejszego rozmiaru, chyba że menu nawigacyjne na pulpicie nie zostanie zastąpione menu mobilnym.

Teraz CSS i identyfikatory używane przez menu nawigacyjne Twojej witryny WordPress muszą się rozgryźć. Poruszając myszą na kodzie źródłowym witryny, możesz podświetlić obszar menu.

• Teraz przejdź do pulpitu WordPress.
• Kliknij na wygląd
• Przejdź do opcji dostosowywania strony, aby uruchomić dostosowywanie motywu.
• Teraz możesz wrócić do zakładki „dodatkowy CSS” i w prawym rogu panelu administracyjnego kliknąć ikonę telefonu komórkowego.

Moduł dostosowania wyświetli podgląd pokazujący, jak Twoja witryna wygląda na telefonach. Wspomniany poniżej kod CSS należy dodać, a w panelu podglądu menu mobilne zniknie.

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

Upewnij się, że zastąpiłeś .nav-toggle-wrapper identyfikatorem, którego używa Twój motyw WordPress.
U góry kliknij przycisk „opublikuj”, aby zapisać wszystkie zmiany.

Ustaw niewidoczne menu na telefonie komórkowym za pomocą CSS

To drugie podejście do ukrycia menu mobilnego. W tym podejściu zostaniesz poproszony o zbudowanie menu nawigacyjnego, a następnie uczynienie menu mobilnego widocznym lub niewidocznym na komputerze stacjonarnym lub urządzeniach mobilnych.

Zaletą korzystania z takiej metody jest to, że można wykorzystać podobne menu nawigacyjne do ukrywania menu na komputerach stacjonarnych lub telefonach komórkowych.

• W desce rozdzielczej WordPress
• Przejdź do wyglądu
• Kliknij stronę menu
• Naciśnij przycisk opcji na ekranie
• Tuż obok opcji „Klasy CSS” zaznacz pole.

Dopóki nie znajdziesz elementu menu, który chcesz ukryć, przewiń stronę w dół. W ustawieniach pozycji menu znajdziesz opcję dodania klasy CSS. Kliknij na niego i dodaj klasę CSS .hide-mobile.

Aby ukryć menu mobilne, powtórz ten proces.

Możesz jednak nawet klikać myszą elementy menu, które chcesz, aby były niewidoczne na komputerach stacjonarnych. Tutaj musisz dodać klasy CSS .hide-desktop.

Teraz zapisz zmiany, klikając przycisk „Zapisz menu”.

Aby ukryć menu mobilne, musisz dodać niestandardowy kod CSS. Dla tego

• Przejdź do wyglądu
• Kliknij stronę dostosowania
• Dostosowanie motywu zostanie uruchomione
• Teraz kliknij dodatkową zakładkę CSS
• I dodaj kod podany poniżej w polu CSS

@media (minimalna szerokość: 980px){
    .ukryj-pulpit{
    wyświetlanie: brak !ważne;
    }
}
    @media (maksymalna szerokość: 980px){
    .ukryj-mobilny{
    wyświetlanie: brak !ważne;
    }
}

Teraz możesz sprawdzić na swojej stronie, czy menu mobilne, które ukrywałeś, jest widoczne, czy nie. Prawdopodobnie mobilne menu będą niewidoczne, ponieważ postępujemy zgodnie z instrukcjami, aby ukryć mobilne menu.

Wniosek:
Mamy nadzieję, że dwie różne metody wymienione na tym blogu pomogą Ci łatwo i skutecznie ukryć mobilne menu.