Jak stworzyć responsywne menu WordPress dostosowane do urządzeń mobilnych?

Ponad połowa ruchu na witrynach internetowych pochodzi z urządzeń mobilnych. Jeśli twoje menu nawigacyjne nie działa dobrze na smartfonach i tabletach, duża część odbiorców może mieć trudności z poruszaniem się po twojej witrynie.

Dzięki wieloletniemu doświadczeniu w tworzeniu witryn WordPress rozumiemy, jak ważne jest, aby twoja witryna była responsywna dla urządzeń mobilnych. W WPBeginner zawsze traktowaliśmy to priorytetowo, zapewniając, że nasze witryny są łatwe w nawigacji na każdym urządzeniu.

W rzeczywistości zaprojektowaliśmy menu reagujące na urządzenia mobilne, które idealnie pasuje do mniejszych ekranów, nie sprawiając wrażenia zagraconego, poprawiając wrażenia użytkownika na smartfonach i tabletach.

W tym przewodniku pokażemy ci, jak łatwo stworzyć responsywne menu WordPress przystosowane do urządzeń mobilnych.

Dlaczego warto stworzyć responsywne menu WordPress dostosowane do urządzeń mobilnych?

Dobrze zaprojektowane menu nawigacyjne pomoże odwiedzającym odnaleźć się na twojej witrynie internetowej. Jednak tylko dlatego, że twoje menu wygląda świetnie na komputerach stacjonarnych, nie oznacza automatycznie, że będzie dobrze wyglądać również na ekranach mobilnych i tabletach.

Użytkownicy mobilni stanowią około 58% całego ruchu internetowego. Jeśli twoje menu nie wygląda dobrze lub nie działa poprawnie na urządzeniach mobilnych, ryzykujesz utratę połowy odbiorców z powodu słabego doświadczenia użytkownika.

Utrudni to osiągnięcie kluczowych celów, takich jak rozwój listy mailingowej, sprzedaż i rozwój Twojej firmy.

W związku z tym zobaczmy, jak stworzyć responsywne menu na urządzenia mobilne, które będzie wyglądać świetnie na smartfonach i tabletach. Skorzystaj z poniższych odnośników, aby przejść bezpośrednio do wybranej metody.

Metoda 1: Utwórz responsywne menu panelu slajdów dostosowane do urządzeń mobilnych

Responsywny panel slajdów to menu nawigacyjne, które przesuwa się na ekranie, gdy użytkownik dotknie lub kliknie przełącznik.

W ten sposób menu jest zawsze pod ręką, ale domyślnie nie zajmuje miejsca na ekranie.

Jest to szczególnie ważne, ponieważ smartfony i tablety mają znacznie mniejsze ekrany w porównaniu do komputerów stacjonarnych.

Jeśli menu jest stale rozwijane, użytkownik mobilny może przypadkowo uruchomić jego odnośniki za pomocą ekranu dotykowego swojego urządzenia. To sprawia, że panele slajdów są dobrym wyborem dla menu reagującego na urządzenia mobilne.

Najprostszym sposobem na dodanie panelu slajdów dostosowanego do urządzeń mobilnych jest użycie menu responsywnego.

Najpierw należy zainstalować i włączyć wtyczkę Responsive Menu. Aby uzyskać więcej informacji, zapoznaj się z naszym poradnikiem na temat instalacji wtyczki WordPress.

Po włączaniu można użyć wtyczki, aby dostosować własne menu WordPress, które zostało wcześniej utworzone. Jeśli musisz utworzyć nowe menu, zapoznaj się z naszym przewodnikiem dla początkujących, jak utworzyć menu nawigacyjne w WordPress.

Z drugiej strony, jeśli twój motyw WordPress ma już wbudowane menu mobilne, musisz znać klasę CSS tego menu, aby móc je ukryć.

Jeśli pominiesz ten krok, użytkownicy mobilni zobaczą dwa nakładające się menu na twojej witrynie internetowej. Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem na temat ukrywania menu mobilnego w WordPress.

Po wykonaniu tej czynności przejdź do strony Menu responsywne ” Menu na panelu bocznym administratora WordPress i kliknij przycisk „Utwórz nowe menu”.

Zobaczysz teraz kilka różnych motywów responsywnych dla urządzeń mobilnych, których możesz użyć w swoim menu.

Na naszych obrazkach używamy „Motywu domyślnego”, ale możesz użyć dowolnego motywu. Po podjęciu twojej decyzji, kliknij „Dalej”.

Możesz teraz wpisać rodzaj nazwy menu. To jest tylko dla twojego odniesienia, więc możesz użyć czegokolwiek chcesz.

Po wykonaniu tej czynności kliknij na odnośnik „WordPress Menu” i wybierz menu, którego chcesz użyć.

Jak już wspomniano, jeśli twój motyw ma już wbudowane menu mobilne, musisz dodać jego klasę CSS do pola „Ukryj menu motywu”.

Jeśli uaktualnisz wtyczkę do wersji premium, otrzymasz kilka dodatkowych ustawień. Na przykład użytkownicy Pro mogą ukryć menu na określonych stronach lub urządzeniach.

Gdy będziesz zadowolony z konfiguracji menu, kliknij „Utwórz menu”.

Po prawej stronie ekranu zobaczysz podgląd twojej witryny internetowej WordPress, a po lewej niektóre ustawienia.

Aby zobaczyć, jak twoja witryna wygląda na urządzeniach mobilnych, kliknij ikonkę telefonu komórkowego lub tabletu w lewym dolnym rogu ekranu.

Aby dostosować wygląd i działanie menu na urządzeniach mobilnych, wybierz opcję „Menu mobilne”.

Następnie kliknij „Kontener”.

Tutaj znajdziesz wiele różnych ustawień.

W miarę wprowadzania zmian podgląd na żywo często aktualizuje się automatycznie. Mając to na uwadze, dobrym pomysłem jest rozwinięcie menu, abyś mógł monitorować, jak będzie wyglądać Twoje menu mobilne. Aby to zrobić, wystarczy kliknąć przycisk przełączania menu.

Domyślnie wtyczka dodaje tytuł i tekst „Dodaj więcej treści…”.

Możesz go zastąpić twoją własną wiadomością lub nawet całkowicie usuwać tekst. Aby edytować tytuł, kliknij, aby rozwinąć sekcję „Tytuł”.

Możesz teraz wpisać swój rodzaj wiadomości w polu „Tekst tytułu”.

Można również dodać odnośnik do tytułu lub dodać krój pisma ikonek i obrazków.

Aby dostosować wygląd tytułu, kliknij kartę „Style”.

Tutaj można zmienić kolor tła, kolor tekstu, wielkość pisma i inne.

Jeśli nie chcesz wyświetlać żadnego tekstu tytułu, kliknij, aby wyłączyć przełącznik obok opcji „Tytuł”.

Jeśli tytuł nie jest niezbędny, usuwanie go stworzy więcej miejsca na odnośniki i inne treści w twoim mobilnym menu nawigacyjnym.

Aby zastąpić tekst „Dodaj więcej treści tutaj….” twoją własną wiadomością, kliknij, aby rozwinąć obszar „Dodatkowa treść”.

Możesz teraz wpisać swój rodzaj tekstu, zmienić kolor tekstu, zmienić wyrównanie tekstu i nie tylko, korzystając z ustawień w menu po lewej stronie.

Aby całkowicie usunąć tekst, wystarczy kliknąć, aby wyłączyć przełącznik.

Po raz kolejny może to stworzyć więcej miejsca na resztę treści menu. Jest to szczególnie przydatne na smartfonach i tabletach, które zazwyczaj mają mniejsze ekrany.

Domyślnie menu responsywne wyświetla wszystkie twoje pozycje menu jako pojedynczą listę. Możesz jednak preferować wyświetlanie tych odnośników w wielu kolumnach.

Może się to dobrze sprawdzić, jeśli twoje etykiety menu są krótsze, ponieważ pozwala pokazać więcej pozycji na mniejszej ilości miejsca, a menu nie wygląda na zagracone.

Aby wypróbować różne układy kolumn, kliknij, aby rozwinąć sekcję „Menu”.

Możesz teraz otworzyć menu rozwijane „Kolumny kontenera menu” i wybrać liczbę kolumn, których chcesz użyć.

W tym momencie może pojawić się tekst „Wymagana aktualizacja”. Jeśli zobaczysz ten komunikat, kliknij go, aby zaktualizować podgląd na żywo o twoje nowe ustawienia kolumn.

Domyślnie wtyczka dodaje również pasek wyszukiwania do twojego menu WordPress. Może to pomóc odwiedzającym znaleźć interesujące treści, ale także zajmuje cenne miejsce na ekranie.

Jeśli wolisz, możesz usuwać pasek wyszukiwania dla użytkowników mobilnych poprzez wyłączanie przełącznika obok opcji „Szukaj”.

Istnieje wiele innych ustawień, które można skonfigurować, więc warto poświęcić trochę czasu na przejrzenie innych opcji. To jednak wystarczy, by stworzyć dobrze zaprojektowane menu przystosowane do urządzeń mobilnych.

Gdy będziesz zadowolony z konfiguracji menu nawigacyjnego, kliknij „Aktualizuj”.

Teraz wystarczy przejść na twój blog WordPress za pomocą urządzenia mobilnego, aby zobaczyć nowe menu w działaniu. Możesz również zobaczyć mobilną wersję twojej witryny WordPress z komputera stacjonarnego.

Metoda 2: Utworzenie pełnoekranowego menu responsywnego dostosowanego do urządzeń mobilnych

Inną opcją jest dodanie responsywnego menu w trybie pełnoekranowym. Jest to menu, które automatycznie dostosowuje się do różnych rozmiarów ekranu, dzięki czemu menu nawigacyjne zawsze będzie wyglądać dobrze, bez względu na to, z jakiego urządzenia korzysta odwiedzający.

Ponieważ menu zajmuje całą dostępną przestrzeń, nawigacja po nim jest łatwiejsza na smartfonach i tabletach, niezależnie od wielkości ekranu.

Najprostszym sposobem na stworzenie pełnoekranowego menu jest użycie FullScreen Menu. Wtyczka ta umożliwia utworzenie menu w trybie pełnoekranowym tylko dla urządzeń mobilnych lub wyświetlanie tego samego menu na smartfonach, tabletach i komputerach stacjonarnych, dzięki czemu wszyscy odwiedzający mają takie same wrażenia.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki FullScreen Menu. Możesz sprawdzić nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress, aby uzyskać więcej szczegółów.

Po włączaniu przejdź na stronę Opcje menu pełnoekranowego z menu WordPress i zaznacz następujące pole: 'Włączanie animowanego menu pełnoekranowego’.

Zalecamy również zaznaczenie pola „Pokaż menu tylko dla użytkowników administratora”. Pozwoli to zobaczyć zmiany podczas konfigurowania menu, ale odwiedzający nie zobaczą menu mobilnego, dopóki go nie uruchomisz.

Domyślnie wtyczka wyświetla menu w trybie pełnoekranowym na wszystkich urządzeniach. Jeśli chcesz wyświetlać menu w trybie pełnoekranowym tylko na smartfonach i tabletach, zaznacz pole obok opcji „Tylko urządzenia mobilne”.

Następnie można dostosować wygląd menu, klikając kartę „Projekt / Wygląd”.

W tym miejscu można wybrać kolory, krój pisma i ustawienia animacji dla menu w trybie pełnoekranowym.

Podczas wprowadzania tych zmian należy pamiętać, że „Początkowe menu w tle” to ikonka przełącznika menu. Natomiast „Otwarte menu w tle” to kolor rozwiniętego menu mobilnego w trybie pełnoekranowym.

Po wybraniu kolorów menu przejdź do sekcji „Wygląd menu”. Tutaj możesz zmienić kolor czcionki menu, rodzinę pisma i wielkość liter.

Pamiętaj tylko, że wczytywanie dodatkowych krojów pisma może mieć wpływ na wydajność i szybkość Twojej witryny WordPress. Nie zawsze jest to dobry wybór dla urządzeń mobilnych, które zazwyczaj mają mniejszą moc obliczeniową w porównaniu do komputerów stacjonarnych. Niektórzy odwiedzający mogą również mieć słabe mobilne połączenie internetowe, co sprawi, że twoja witryna będzie wczytywać się jeszcze wolniej.

Po zakończeniu przewiń do „Ustawienia animacji”.

Na początek możesz wybrać sposób, w jaki menu będzie się rozwijać, gdy odwiedzający kliknie ikonkę przełącznika. Wystarczy otworzyć menu rozwijane „Rodzaj animacji” i wybrać opcję z listy, taką jak Od góry do dołu lub Od lewej do prawej.

Gdy będziesz zadowolony z układu menu, kliknij kartę „Treść menu”, aby dodać treść.

W tym miejscu otwórz menu rozwijane „Wybierz menu” i wybierz menu, które chcesz wyświetlić w trybie pełnoekranowym.

Jeśli jeszcze nie utworzyłeś menu nawigacyjnego, zapoznaj się z naszym przewodnikiem na temat dodawania menu nawigacyjnych w WordPress.

Jeśli chcesz wyświetlić dodatkową treść w menu, możesz dodać ją w polu „Free HTML / Shortcodes”. Działa to jak mini edytor strony, dzięki czemu można wpisywać rodzaj tekstu, zmieniać formatowanie, dodawać wypunktowania i listy numerowane i wiele więcej.

Istnieje również pole wyboru, które doda odnośnik do twojej strony polityki prywatności.

Następnie możesz dodać ikonki mediów społecznościowych do twojego menu WordPress. Ikonki te pojawią się w rzędzie na dole menu w trybie pełnoekranowym.

Aby dodać te ikonki, wystarczy kliknąć, aby rozwinąć pole „Ikonka społecznościowa 1”.

Możesz teraz wpisać tytuł ikonki, na przykład „Facebook”.

Następnie kliknij strzałkę obok opcji „Ikona społecznościowa” i wybierz ikonkę, którą chcesz wyświetlać użytkownikom mobilnym.

Na koniec wpisz adres, którego chcesz użyć, w polu „Społecznościowy adres URL”.

Aby dodać więcej ikonek, wystarczy kliknąć przycisk „Dodaj kolejną ikonkę”.

Na koniec możesz dodać pasek wyszukiwania WordPress, aby pomóc odwiedzającym znaleźć to, czego szukają. Aby to zrobić, po prostu zaznacz pole obok „Dodaj pasek wyszukiwania”.

Domyślnie wtyczka wyświetla komunikat „Wyszukaj coś…”. Możesz jednak zastąpić go swoim własnym konfiguratorem, wpisując go w polu „Search input placeholder”.

Na przykład, jeśli prowadzisz sklep WooCommerce, możesz użyć tekstu takiego jak „Rozpocznij zakupy” lub „Wyszukaj produkty”.

Gdy będziesz zadowolony z konfiguracji menu, kliknij przycisk „Zapisz zmiany”.

Teraz wystarczy przejść na twoją witrynę internetową za pomocą urządzenia mobilnego, aby zobaczyć menu w trybie pełnoekranowym w działaniu.

Możesz także wyświetlić podgląd mobilnej wersji twojej witryny internetowej za pomocą konfiguratora motywów WordPress.

Bonus: Jak dodać mobilne menu do stron docelowych?

Jeśli tworzysz stronę docelową lub stronę sprzedaży, będziesz chciał, aby wyglądała ona równie dobrze na urządzeniach mobilnych, jak i na komputerach stacjonarnych.

Mając to na uwadze, zalecamy utworzenie strony za pomocą SeedProd. Jest to najlepszy kreator stron WordPress i zawiera ponad 300 profesjonalnie zaprojektowanych szablonów.

Po utworzeniu projektu za pomocą SeedProd, można dodać do strony menu reagujące na urządzenia mobilne za pomocą gotowego bloku Nav Menu SeedProd. Blok ten umożliwia tworzenie oddzielnych menu zarówno dla urządzeń z menu, jak i komputerów stacjonarnych.

W ten sposób można zastosować inny układ, a nawet wyświetlać różne odnośniki w zależności od urządzenia użytkownika.

Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat dodawania własnych menu nawigacyjnych w WordPress.

Po dodaniu bloku nawigacji do twojego projektu, po prostu kliknij kartę „Zaawansowane”.

Tutaj kliknij, aby rozwinąć sekcję „Widoczność urządzenia”.

Następnie kliknij przełącznik „Ukryj na pulpicie”, aby go włączyć. Teraz to menu będzie wyświetlane tylko na urządzeniach mobilnych.

Możesz teraz dodawać odnośniki i zmieniać układ menu, korzystając z ustawień w menu po lewej stronie.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak stworzyć responsywne menu WordPress przystosowane do urządzeń mobilnych. Możesz również zapoznać się z naszym przewodnikiem dla początkujących, jak dodać krój pisma w WordPress i naszymi poradami ekspertów na temat sposobów tworzenia przyjaznej dla urządzeń mobilnych witryny WordPress.

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.