Wskazówki, jak ukryć mobilne menu w WordPressie

W większości przypadków motywy WordPress mają już zdefiniowane style, które umożliwiają przekształcenie zwykłego menu nawigacyjnego w menu mobilne. Jest to wygodne, jeśli potrzebujesz szybkiego rozwiązania po wyjęciu z pudełka. Na przykład masz tradycyjny układ na komputery stacjonarne i menu hamburgerowe na urządzeniach mobilnych. Jeśli jednak chcesz dalej dostosować lub nawet całkowicie zastąpić istniejące menu mobilne, jest to również możliwe. Istnieje kilka sposobów na ukrycie menu mobilnego w WordPressie za pomocą wtyczek lub kodu .

Jak ukryć mobilne menu w WordPressie

Pełne dostosowanie strony wymaga odrobiny wiedzy i doświadczenia. Jeśli chcesz mieć bezpieczne dostosowywanie bez ryzyka, możesz skorzystać z usług profesjonalistów, aby dostosować i utrzymać swoją witrynę. Chociaż istnieje kilka łatwych części, które możesz wykonać samodzielnie, bardziej poważna personalizacja wymaga profesjonalnego podejścia. Jeśli chodzi o menu mobilne w WordPressie, możesz użyć wtyczek, aby uprościć proces . Lub, jeśli masz wiedzę na temat kodowania, możesz tworzyć zmiany bezpośrednio w kodzie.

Aby pomóc Ci zmienić sposób wyświetlania menu mobilnego w Twojej witrynie, podajemy dwa najczęstsze sposoby jego uzupełniania:

• Ukryj menu mobilne w WordPressie za pomocą wtyczki
• Ukryj menu mobilne z kodem CSS

Jak ukryć mobilne menu w WordPressie za pomocą wtyczki?

Prawdopodobnie znalazłeś motyw WordPress z interesującym zachowaniem menu mobilnego i chcesz go łatwo skopiować. Ta metoda nie wymaga znajomości kodowania, więc jest wygodniejsza do tego zadania. Po zainstalowaniu wtyczki będziesz mógł całkowicie usunąć swoje menu mobilne na urządzeniach mobilnych . Ponadto niektóre wtyczki pozwolą ci go dogłębnie dostosować. Oprócz podstawowego ukrywania, możesz również użyć go do usunięcia tylko określonych elementów z menu.

Tworzenie nowego menu mobilnego

Pierwszym krokiem jest przejście do Wygląd> Menu . Tam będziesz mógł utworzyć nowe menu, klikając opcję „utwórz nowe menu” u góry. Nadaj swojemu nowemu menu nazwę i potwierdź to przyciskiem „Utwórz menu” w prawym dolnym rogu ekranu.

Po wykonaniu tych kroków zaznaczenie po lewej stronie nie będzie już niemożliwe do kliknięcia i będziesz mógł dodawać elementy do nowego menu. Po zakończeniu dodawania nowych elementów wystarczy kliknąć „Zapisz menu” .

Znajdź i zainstaluj wtyczkę

Następnym krokiem jest znalezienie i zainstalowanie wtyczki. Istnieje wiele wtyczek, które mogą pomóc w manipulowaniu i dostosowywaniu menu . Niektóre z najpopularniejszych to WP Mobile Menu, Max Mega Menu, Responsive Menu i tak dalej. Dla wyjaśnienia zainstalujmy i aktywuj WP Mobile Menu.

Gdy skończysz, przejdź do opcji menu mobilnego na lewym pasku bocznym WordPressa. W opcjach wtyczek możesz teraz wybrać, czy chcesz wyświetlić nowe menu mobilne po lewej lub prawej stronie. Wybierz wcześniej utworzone menu, a następnie przewiń w dół do „Ukryj oryginalne menu motywu” . Tam możesz usunąć określone elementy z oryginalnego menu. Jeśli klikniesz pole „Znajdź element”, otrzymasz podgląd na żywo wyborów do wyboru. Po zakończeniu procesu wyboru po prostu zapisz zmiany.

Zamień lub ukryj menu

Po wybraniu tego, co chcesz ukryć, po prostu wróć do Wygląd> Menu . Wybierz z menu rozwijanego wcześniej utworzone menu mobilne i ustaw jego „Lokalizacja wyświetlania” . Twoje oryginalne menu jest teraz ukryte i zastąpione niestandardowym menu.

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

Jak ukryć menu za pomocą kodu CSS

Inna metoda ukrywania menu mobilnego wymaga pewnej znajomości kodu CSS i praktyk . Osoby, które często tworzą niestandardowe motywy WordPress, wiedzą już, jak złożona może być pewna personalizacja. Biorąc pod uwagę te punkty, nie jest to dokładnie zalecana metoda dla początkujących. Niemniej jednak…

Znajdź nazwę swojego menu

Pierwszym krokiem jest znalezienie menu, które chcesz edytować. Prawdopodobnie najłatwiejszym sposobem jest użycie zintegrowanych narzędzi programistycznych przeglądarki . Przejdź do swojej witryny, w której chcesz wprowadzić zmiany i otwórz narzędzia programistyczne. Jeśli korzystasz z Google Chrome, możesz to zrobić za pomocą skrótu Ctrl+Shift+I . Na górze ekranu znajdziesz opcję Toggle Device Toolbar, która pokaże Ci, jak Twoja witryna wygląda na urządzeniach mobilnych. Możesz nawet zmieniać różne typy i rozdzielczości.

Teraz, gdy widzisz, jak wyświetla się na urządzeniach mobilnych, wybierz przycisk przypominający strzałkę i kliknij menu, aby je sprawdzić. Od razu zaprowadzi Cię do tej części kodu, w której możesz zobaczyć klasę CSS dla danego menu. Oznacza to, że zobaczysz tę nazwę klasy.

Ukryj swoje menu za pomocą nowej linii kodu

Po uzyskaniu właściwej nazwy, po prostu przejdź do Wygląd> Dostosuj i wybierz „Dodatkowy CSS” . Ogólnie rzecz biorąc, zwykle znajduje się to na dole lewego paska bocznego. Kliknij go, a otrzymasz następny ekran. Tam możesz kliknąć na dole ekranu, aby wybrać widok mobilny, a nad nim wpisać kod, aby ukryć menu:

Kod: .menu-name {wyświetlanie: brak;}

Na koniec kliknij przycisk Opublikuj i gotowe. Jeśli jesteś trochę bardziej zaznajomiony z kodem CSS, wiele z tych zmian można wprowadzić w pliku CSS. Będziesz jednak musiał zwracać uwagę na zapytania mediów. Umożliwią one tworzenie różnych reguł dla różnych urządzeń, dzięki czemu będziesz mieć większą kontrolę nad swoimi stronami internetowymi i zachowaniem menu.

Jeśli jesteś początkującym w edycji układu, opcja wtyczki jest prawdopodobnie najlepszym sposobem na rozpoczęcie. Jeśli zaczniesz zmieniać kod, nie wiedząc dokładnie, co robisz, możesz łatwo zepsuć wygląd swojej witryny. W CSS istnieje wiele reguł i właściwości, które wzajemnie się zastępują. Jeśli więc chcesz ukryć swoje mobilne menu w WordPressie bez ryzyka, użyj wtyczek, aby wykonać zadanie za Ciebie .