Czy chcesz ukryć menu mobilne w WordPress?
Większość motywów WordPress automatycznie przekształca twoje domyślne menu nawigacyjne w menu przyjazne dla urządzeń mobilnych. Możesz jednak chcieć wyświetlać inne menu osobom, które przejdą na twoją witrynę za pomocą smartfonów lub tabletów.
W tym artykule pokażemy, jak łatwo ukryć domyślne menu mobilne w WordPress, aby zamiast tego wyświetlić własne menu.
W tym poradniku omówimy dwie różne metody i możesz skorzystać z poniższych odnośników, aby przejść do metody, której chcesz użyć:
Metoda 1: Ukryj menu mobilne w WordPressie za pomocą wtyczki
Najprostszym sposobem na ukrycie menu mobilnego dostarczanego przez twój motyw WordPress jest użycie wtyczki WP Mobile Menu.
Ta wtyczka umożliwia utworzenie unikatowego menu, a następnie pokazanie go użytkownikom mobilnym. Można również ukryć menu mobilne, które wiele motywów udostępnia domyślnie.
Stwórz swoje menu mobilne
Najpierw musisz utworzyć menu nawigacyjne, które chcesz wyświetlać na urządzeniach mobilnych. Aby rozpocząć, przejdź do strony Wygląd ” Menu w twoim kokpicie WordPress.
Na następnym ekranie należy wpisać rodzaj nazwy menu. Dobrym pomysłem jest użycie czegoś, co pomoże później zidentyfikować menu, na przykład „Mobile Menu”.
Następnie możesz wybrać wszystkie wpisy i strony, które chcesz dodać do menu mobilnego.
Aby uzyskać bardziej szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem na temat tworzenia menu nawigacyjnego w WordPress.
Gdy twój układ menu będzie zadowalający, pamiętaj o kliknięciu przycisku „Zapisz menu”, aby zapisać zmiany.
Konfiguracja ustawień wtyczki
Po wykonaniu tych czynności nadszedł czas na zainstalowanie i włączanie wtyczki WP Mobile Menu. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu przejdź do opcji menu mobilnego, aby skonfigurować ustawienia wtyczki.
W tym miejscu należy przewinąć stronę do dołu i wybrać, czy menu mobilne ma być wyświetlane po lewej czy po prawej stronie ekranu za pomocą przełączników „Włącz menu po lewej/prawej stronie”.
Następnie otwórz menu rozwijane „Wybierz jedno menu” i wybierz utworzone wcześniej menu mobilne.
Następnie wystarczy kliknąć „Zapisz zmiany”.
Istnieje wiele sposobów na stylizację twojego menu nawigacyjnego WordPress. Możesz na przykład wybrać „Opcje czcionki”, a następnie zmienić wielkość litery, wagę, odstępy i inne.
Możesz także wybrać „Styl nagłówka” i zmienić wygląd i działanie nagłówka mobilnego.
Można na przykład dodać cień, zmienić wysokość nagłówka, utworzyć przypięte menu nawigacyjne i nie tylko.
Większość z tych ustawień jest prosta, więc możesz je przejrzeć i zobaczyć, jakie różne rodzaje efektów możesz stworzyć. Na przykład, możesz dodać ikonkę obrazka lub dodać CSS do twojego menu WordPress.
Gdy będziesz zadowolony z konfiguracji menu mobilnego, po prostu kliknij „Zapisz zmiany”.
Dodaj twoje menu mobilne do WordPressa
Teraz, po skonfigurowaniu wtyczki, następnym krokiem jest poinformowanie WordPressa, gdzie ma wyświetlać menu mobilne, przechodząc do Wygląd ” Menu.
Jeśli nie zostało jeszcze wybrane, otwórz menu rozwijane „Wybierz menu do edycji” i wybierz utworzone wcześniej menu mobilne.
Następnie w sekcji „Ustawienia menu” należy wybrać „Lewe menu mobilne” lub „Prawe menu mobilne”, w zależności od tego, gdzie ma być wyświetlane menu.
Następnie wystarczy kliknąć „Zapisz menu”.
Teraz przejdź na twoją witrynę internetową na urządzeniu mobilnym lub zobacz mobilną wersję witryny WordPress z komputera. Powinieneś zobaczyć własne menu mobilne.
Rozwiązywanie problemów: Jak ukryć domyślne menu mobilne
Domyślnie wtyczka automatycznie ukrywa elementy menu używane przez większość popularnych motywów WordPress. Oznacza to, że domyślne menu mobilne twojego motywu powinno zostać ukryte bez konieczności wykonywania jakichkolwiek czynności.
Jeśli jednak domyślne menu mobilne nadal jest wyświetlane, należy przejść do sekcji Opcje menu mobilnego ” Opcje ogólne ” Opcje widoczności w kokpicie WordPress.
Tutaj kliknij przycisk „Znajdź element”.
Spowoduje to otwarcie mobilnej wersji twojej witryny internetowej.
W tym wyskakującym okienku kliknij, aby wybrać treść, którą chcesz ukryć na urządzeniach mobilnych, taką jak menu dostarczane przez twój motyw WordPress.
Powoduje to dodanie klasy CSS treści do pola „Ukryj elementy”.
Po zakończeniu kliknij „Zapisz zmiany”. Teraz menu motywu nie powinno już pojawiać się na urządzeniach mobilnych.
Metoda 2: Ukryj menu mobilne za pomocą kodu CSS
Ta metoda jest nieco zaawansowana i wymaga dodania własnego kodu do twojej witryny internetowej.
W przypadku tej metody można wybrać jedno z dwóch różnych podejść. Możesz ukryć całe domyślne 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
Jedną z opcji jest całkowite usuwanie domyślnego menu mobilnego z twojego motywu WordPress. Jest to dobry wybór, jeśli chcesz użyć innej metody nawigacji na urządzeniach mobilnych, takiej jak okruszki odnośników nawigacyjnych lub interaktywne obrazki.
Najpierw musisz znaleźć element, który chcesz zmodyfikować. W tym celu wystarczy wejść na twoją witrynę internetową WordPress i najechać kursorem myszy na menu nawigacyjne.
Następnie kliknij prawym przyciskiem myszy i wybierz narzędzie Inspect w twojej przeglądarce.
Ekran twojej przeglądarki zostanie teraz podzielony na dwie części i zobaczysz kod strony, w tym kod menu nawigacyjnego.
Nie chcemy jednak zmieniać tego menu nawigacyjnego, ponieważ widzimy je na ekranie pulpitu.
Na szczęście istnieje łatwy sposób na uzyskanie dostępu do menu mobilnego.
Wystarczy przeciągnąć róg przeglądarki, aby ją zmniejszyć, aż WordPress zastąpi menu nawigacyjne pulpitu menu mobilnym.
Teraz musisz znaleźć identyfikator i klasę CSS używaną przez mobilne menu nawigacyjne. Po prostu przesuwaj kursor myszy nad kodem źródłowym, aż twoja przeglądarka podświetli obszar menu. Ta sekcja zawiera klasę i identyfikator, których należy użyć.
Po uzyskaniu tych informacji można ukryć menu na urządzeniach mobilnych za pomocą kodu.
Często przewodniki WordPress proszą o dodanie własnego kodu do twojego pliku functions.php. Nie jest to jednak zbyt przyjazne dla użytkownika, a nawet niewielki błąd w kodzie może powodować różnego rodzaju typowe błędy WordPress. Własny kod może nawet całkowicie zepsuć twoją witrynę internetową.
Zamiast tego bezpieczniej jest dodać własny kod za pomocą WPCode.
Ta darmowa wtyczka ułatwia dodawanie własnych CSS, PHP, HTML i innych do WordPressa bez narażania twojej witryny na ryzyko. Wystarczy wkleić kod wtyczki do edytora WPCode, a następnie włączać i wyłączać kod jednym kliknięciem przycisku.
Aby rozpocząć, należy zainstalować i włączyć WPCode. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Następnie przejdź do sekcji Fragmenty kodu ” Dodaj fragment kodu w kokpicie WordPress.
Tutaj zobaczysz wszystkie gotowe fragmenty kodu, które możesz dodać do swojej witryny. Obejmuje to fragment kodu, który pozwala całkowicie wyłączyć komentarze, przesyłać rodzaje plików, których WordPress zwykle nie pomaga technicznie, wyłączyć strony załączników i wiele więcej.
Aby dodać CSS do swojej witryny, wystarczy najechać kursorem na „Dodaj swój własny kod”, a następnie wybrać „Użyj fragmentu kodu”.
Na początek wpisz tytuł fragmentu kodu. Może to być cokolwiek, co pomoże ci zidentyfikować fragment kodu w twoim kokpicie WordPress.
Po wykonaniu tej czynności otwórz menu rozwijane „Rodzaj kodu” i wybierz „CSS”.
Następnie możesz wkleić lub wpisać poniższy rodzaj kodu w edytorze kodu:
.navbar-toggle-wrapper {
display:none;
}
Nie zapomnij zastąpić .navbar-toggle-wrapper identyfikatorem, który znalazłeś za pomocą narzędzia Inspect twojej przeglądarki.
Gdy będziesz gotowy do opublikowania fragmentu kodu, przewiń do góry ekranu i kliknij przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”.
Na koniec kliknij przycisk „Zapisz fragment kodu”, aby uruchomić fragment kodu.
Teraz menu mobilne twojego motywu będzie ukryte na smartfonach i tabletach.
2. Ukrywanie określonych pozycji menu w menu mobilnym za pomocą CSS
Metoda ta umożliwia utworzenie menu nawigacyjnego, a następnie selektywne pokazywanie lub ukrywanie elementów, które nie mają być wyświetlane na urządzeniach mobilnych lub stacjonarnych.
W ten sposób możesz używać tego samego menu nawigacyjnego dla użytkowników mobilnych i stacjonarnych. Najpierw przejdź do Wygląd ” Menu.
Po wykonaniu tej czynności kliknij przycisk „Opcje ekranu” w prawym górnym rogu ekranu.
W tym miejscu należy zaznaczyć pole obok opcji „Klasy CSS”.
Następnie przewiń do pozycji menu, którą chcesz ukryć na urządzeniu mobilnym i kliknij, aby ją rozwinąć.
W ustawieniach pozycji menu zobaczysz opcję dodania klasy CSS. Tutaj wystarczy dodać klasę CSS .hide-mobile.
Powtórz ten proces dla wszystkich pozycji menu, które chcesz ukryć na urządzeniach mobilnych.
Podobnie możesz kliknąć dowolne elementy menu, które chcesz ukryć na komputerach stacjonarnych. Jednak tym razem zamiast tego dodaj klasę CSS .hide-desktop.
Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz menu”, aby zapisać twoje zmiany.
Po wykonaniu tej czynności możesz ukryć te elementy menu za pomocą własnego CSS. Wystarczy utworzyć nowy własny fragment kodu, wykonując ten sam proces opisany powyżej.
Teraz możesz dodać następujący CSS do edytora kodu WPCode:
@media (min-width: 980px){
.hide-desktop{
display: none !important;
}
}
@media (max-width: 980px){
.hide-mobile{
display: none !important;
}
}
Następnie wystarczy opublikować fragment kodu.
Teraz, jeśli przejdziesz na twój blog WordPress, zobaczysz, że elementy menu, które chciałeś ukryć na pulpicie, nie są już widoczne. Aby sprawdzić, jak menu wygląda na urządzeniach mobilnych, wystarczy zmniejszyć ekran przeglądarki, aż WordPress przełączy się na menu mobilne.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo ukryć menu mobilne w WordPress. Zachęcamy również do zapoznania się z naszymi typami najlepszych kreatorów stron WordPress typu „przeciągnij i upuść ” oraz przewodnikiem na temat dodawania logiki warunkowej do menu.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Masz pytanie lub sugestię? Zostaw komentarz, aby rozpocząć dyskusję.