W artykule:
Czy chcesz ukryć mobilne menu w WordPress?
Większość motywów WordPress ma wbudowane style, które automatycznie przekształcają menu nawigacyjne w menu mobilne. Możesz jednak nie chcieć korzystać z tego samego menu na urządzeniach mobilnych lub użyć innego stylu menu.
W tym artykule pokażemy, jak łatwo ukryć mobilne menu w WordPress za pomocą wtyczki lub metody kodu.
Metoda 1. Ukryj mobilne Menu w WordPress za pomocą wtyczki
Ta metoda jest łatwiejsza i zalecana jest dla początkujących. Użyjemy wtyczki do ukrycia istniejącego menu mobilnego dostarczonego przez motyw WordPress, a następnie użyjemy innego menu lub żadnego menu na urządzeniach mobilnych.
Po pierwsze, musisz odwiedzić Wygląd ” Menu strona i utwórz nowe menu nawigacyjne, które chcesz wyświetlić na urządzeniach mobilnych.
Na następnym ekranie musisz podać nazwę nowego menu, która pomoże Ci je później zidentyfikować. Nazwiemy to 'mobilnym Menu’. Następnie możesz wybrać elementy, które chcesz dodać do menu z lewej kolumny.
Po zakończeniu dodawania elementów do menu nie zapomnij kliknąć przycisku Zapisz Menu, aby zapisać menu.
Jeśli potrzebujesz pomocy w tworzeniu nowego menu nawigacyjnego, postępuj zgodnie z naszym Przewodnikiem dla początkujących, aby utworzyć menu nawigacyjne w WordPress.
Następnie musisz zainstalować i aktywować wtyczkę WP Mobile Menu. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz odwiedzić Mobilne Opcje Menu strona do konfiguracji ustawień wtyczki. W tym miejscu musisz wybrać, czy chcesz wyświetlić menu telefonu komórkowego po prawej stronie, czy po lewej stronie, włączając przełącznik.
Z rozwijanego menu wybierz wcześniej utworzone menu mobilne.
Następnie przewiń w dół do sekcji „Ukryj oryginalne Menu motywu”. To tutaj możesz powiedzieć wtyczce, aby ukryła mobilne menu utworzone przez Twój motyw 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 nic tutaj robić.
Jeśli jednak wtyczka nie ukryje menu motywu, możesz wrócić tutaj i kliknąć przycisk „Znajdź Element”, aby po prostu wskazać menu nawigacyjne motywu.
Nie zapomnij kliknąć przycisku Zapisz zmiany, aby zapisać swoje ustawienia.
Teraz, gdy skonfigurowaliśmy wtyczkę, musimy powiedzieć witrynie WordPress, aby wyświetlić nasze menu mobilne do nowej lokalizacji menu dodanej przez wtyczkę.
Po prostu przejdź do Wygląd ” Menu strona. Upewnij się, że utworzone wcześniej menu mobilne jest zaznaczone w rozwijanym menu. Poniżej pozycji menu wybierz lokalizację, którą wybrałeś w ustawieniach wtyczki (np. lewe menu mobilne lub prawe Menu mobilne).
Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć nowe menu w akcji. Wtyczka ukryje teraz mobilne menu motywu i wyświetli niestandardowe menu.
WP Mobile Menu plugin pozwala zmienić kolor paska menu, zmienić krycie, dodać ikony i więcej w Ustawieniach. Zapraszam do zabawy z tymi ustawieniami.
Metoda 2. Ukryj mobilne Menu 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ć pełne menu mobilne za pomocą CSS lub ukryć poszczególne elementy menu na urządzeniach mobilnych.
1. Ukrywanie pełnego menu na urządzeniach mobilnych za pomocą CSS
Najpierw musisz dowiedzieć się, jaki element chcesz zmodyfikować za pomocą niestandardowego CSS. Aby to zrobić, po prostu przejdź do swojej strony internetowej i najedź kursorem na swoje menu nawigacyjne. Następnie kliknij prawym przyciskiem myszy i wybierz Inspect tool.
Ekran przeglądarki zostanie podzielony na dwie części, a zobaczysz kod źródłowy swojej strony internetowej. Teraz to menu nawigacyjne nie jest tym, którego musisz kierować, ponieważ jest widoczne na ekranie pulpitu.
Musisz zmienić układ ekranu przeglądarki, przeciągając go z rogu do mniejszego rozmiaru, aż menu nawigacyjne na pulpicie zostanie zastąpione przez menu mobilne.
Musisz dowiedzieć się identyfikatora i klasy CSS używanej przez menu nawigacyjne WordPress. Możesz to zrobić, przesuwając kursor myszy na kodzie źródłowym, aż obszar menu zostanie podświetlony.
Jak widać na powyższym zrzucie ekranu, nasz motyw testowy używa navbar-toggle-wrapper klasy.
Następnie musisz udać się do Wygląd ” Dostosuj strona w obszarze administracyjnym WordPress, aby uruchomić dostosowywanie motywów. Tutaj musisz przejść do zakładki „dodatkowy CSS” i kliknąć ikonę telefonu komórkowego w prawym dolnym rogu lewego panelu.
Narzędzie dostosowania wyświetli teraz podgląd wyglądu witryny na urządzeniach mobilnych. Możesz teraz wprowadzić następujący kod CSS i zobaczyć, jak twoje mobilne menu zniknie w panelu podglądu.
.navbar-toggle-wrapper {
Wyświetlacz: Brak;
}
Nie zapomnij wymienić .navbar-toggle-wrapper z identyfikatorem używanym przez Twój motyw WordPress.
Następnie kliknij przycisk „Opublikuj” u góry, aby zapisać zmiany.
2. Ukrywanie określonych elementów menu w menu mobilnym za pomocą CSS
Ta metoda umożliwia utworzenie menu nawigacyjnego, a następnie selektywne wyświetlanie lub ukrywanie elementów, których nie chcesz wyświetlać na urządzeniach mobilnych lub stacjonarnych.
Zaletą tej metody jest to, że możesz użyć tego samego menu nawigacyjnego dla urządzeń mobilnych i stacjonarnych i po prostu ukryć elementy, których nie chcesz widzieć.
Najpierw musisz iść do Wygląd ” Menu strona i kliknij przycisk Opcje ekranu w prawym górnym rogu ekranu. Stąd musisz zaznaczyć pole obok opcji „klasy CSS”.
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ę dodawania klasy CSS. Śmiało dodaj .hide-mobile Klasa CSS.
Powtórz proces dla wszystkich pozycji menu, których nie chcesz wyświetlać na urządzeniach mobilnych.
Możesz także kliknąć pozycje menu, które chcesz ukryć na komputerach stacjonarnych. Tym razem dodaj .Ukryj-pulpit Klasa CSS zamiast.
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 Wygląd ” Dostosuj strona, aby uruchomić dostosowywanie motywu i kliknij dodatkową kartę 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;
}
}
Nie zapomnij kliknąć przycisku Publikuj, aby zapisać zmiany.
Możesz teraz odwiedzić swoją witrynę i zauważysz, że elementy, które chcesz ukryć na pulpicie, nie są już widoczne w menu. Dostosuj ekran przeglądarki do mniejszego rozmiaru, a zauważysz to samo w menu mobilnym.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo ukryć mobilne menu w WordPress. Możesz również zobaczyć nasz artykuł na temat tworzenia niestandardowych stron w WordPress lub tworzenia niestandardowego motywu od podstaw bez pisania kodu.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
