Jak stworzyć responsywne menu WordPress gotowe na urządzenia mobilne

Ponad połowa całego ruchu na stronach internetowych pochodzi z urządzeń mobilnych. Jeśli Twoje menu nawigacyjne nie działa dobrze na smartfonach i tabletach, duża część Twoich odbiorców może mieć trudności ze znalezieniem drogi na Twojej stronie.

Dzięki wieloletniemu doświadczeniu w tworzeniu stron WordPress, rozumiemy znaczenie responsywności strony na urządzeniach mobilnych. W WPBeginner zawsze stawialiśmy to na pierwszym miejscu, dbając o to, aby nasze strony były łatwe w nawigacji na każdym urządzeniu.

W rzeczywistości zaprojektowaliśmy menu responsywne mobilnie, które idealnie pasuje na mniejsze ekrany, nie sprawiając wrażenia zagracenia, poprawiając doświadczenie użytkownika na smartfonach i tabletach.

W tym przewodniku pokażemy, jak łatwo utworzyć responsywne menu WordPress gotowe na urządzenia mobilne.

Dlaczego warto stworzyć responsywne menu WordPress gotowe na urządzenia mobilne?

Dobrze zaprojektowane menu nawigacyjne pomoże odwiedzającym poruszać się po Twojej stronie. Jednak to, ż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. Dlatego, 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 złego doświadczenia użytkownika.

Utrudni to osiągnięcie kluczowych celów, takich jak powiększanie listy e-mail, uzyskiwanie sprzedaży i rozwijanie firmy.

Mając to na uwadze, zobaczmy, jak możesz stworzyć responsywne menu gotowe na urządzenia mobilne, które będzie świetnie wyglądać na smartfonach i tabletach. Po prostu skorzystaj z poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć.

• Metoda 1: Utwórz responsywne menu w formie panelu bocznego, gotowe na urządzenia mobilne
• Metoda 2: Utwórz pełnoekranowe responsywne menu gotowe na urządzenia mobilne
• Bonus: Jak dodać responsywne menu mobilne do stron docelowych

Metoda 1: Utwórz responsywne menu w formie panelu bocznego, gotowe na urządzenia mobilne

Responsywny panel przesuwany to menu nawigacyjne, które pojawia się na ekranie, gdy odwiedzający dotknie lub kliknie przełącznik.

W ten sposób menu jest zawsze w zasięgu ręki, 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 rozwinięte, użytkownik mobilny może przypadkowo aktywować jego linki za pomocą ekranu dotykowego swojego urządzenia. To sprawia, że panele przesuwne są dobrym wyborem dla responsywnego menu mobilnego.

Najprostszym sposobem na dodanie gotowego na urządzenia mobilne panelu przesuwnego jest użycie Responsive Menu.

Najpierw musisz zainstalować i aktywować wtyczkę Responsive Menu. Więcej szczegółów znajdziesz w naszym poradniku jak zainstalować wtyczkę WordPress.

Po aktywacji możesz użyć wtyczki do dostosowania dowolnego menu WordPress, które wcześniej utworzyłeś. Jeśli potrzebujesz utworzyć nowe menu, zapoznaj się z naszym przewodnikiem dla początkujących na temat dodawania menu nawigacyjnego w WordPress.

Z drugiej strony, jeśli Twój motyw WordPress ma już wbudowane menu mobilne, będziesz musiał znać klasę CSS tego menu, aby je ukryć.

Jeśli pominiesz ten krok, użytkownicy mobilni zobaczą dwa nakładające się menu na Twojej witrynie. Instrukcje krok po kroku znajdziesz w naszym przewodniku jak ukryć menu mobilne w WordPress.

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

Zobaczysz teraz kilka różnych responsywnych motywów mobilnych, których możesz użyć dla swojego menu.

Używamy „Domyślnego motywu” na naszych zrzutach ekranu, ale możesz użyć dowolnego motywu. Po podjęciu decyzji kliknij „Dalej”.

Możesz teraz wpisać nazwę menu. Służy to tylko do Twojej wiadomości, więc możesz użyć czegokolwiek chcesz.

Po wykonaniu tej czynności kliknij „Połącz menu WordPress” 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 zaktualizujesz do wersji premium wtyczki, 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”.

Zobaczysz teraz podgląd swojej witryny WordPress po prawej stronie ekranu i ustawienia po lewej.

Aby zobaczyć, jak Twoja witryna wygląda na urządzeniach mobilnych, kliknij ikonę 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 będzie się automatycznie aktualizował. Mając to na uwadze, dobrym pomysłem jest rozwinięcie menu, aby móc monitorować, jak będzie wyglądać Twoje mobilne menu. Aby to zrobić, po prostu kliknij przycisk przełączania menu.

Domyślnie wtyczka dodaje tytuł i tekst „Add more content…”.

Możesz zastąpić to własnym tekstem lub nawet całkowicie usunąć tekst. Aby edytować tytuł, kliknij, aby rozwinąć sekcję „Tytuł”.

Teraz możesz wpisać własną wiadomość w polu „Tekst tytułu”.

Możesz również dodać link do tytułu lub dodać ikony czcionek i obrazy.

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

Tutaj możesz zmienić kolor tła, kolor tekstu, rozmiar czcionki i inne.

Jeśli nie chcesz wyświetlać żadnego tekstu tytułowego, kliknij, aby dezaktywować przełącznik obok „Title”.

Jeśli tytuł nie jest istotny, jego usunięcie stworzy więcej miejsca na linki i inne treści w Twoim mobilnym menu nawigacyjnym.

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

Możesz teraz wpisać własny tekst, zmienić kolor tekstu, zmienić wyrównanie tekstu i więcej, korzystając z ustawień w menu po lewej stronie.

Aby całkowicie usunąć tekst, po prostu kliknij, aby dezaktywować przełącznik.

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

Domyślnie Responsive Menu wyświetli wszystkie elementy menu jako pojedynczą listę. Możesz jednak woleć wyświetlać te linki w wielu kolumnach.

Może to działać dobrze, jeśli etykiety menu są krótsze, ponieważ pozwala to na wyświetlenie większej liczby elementów w mniejszej przestrzeni bez sprawiania, że menu 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żesz zobaczyć tekst „Wymagana aktualizacja”. Jeśli zobaczysz tę wiadomość, kliknij ją, aby zaktualizować podgląd na żywo o nowe ustawienia kolumn.

Domyślnie wtyczka dodaje również pasek wyszukiwania do Twojego menu WordPress. Może to pomóc odwiedzającym w znalezieniu interesujących treści, ale także zajmuje cenne miejsce na ekranie.

Jeśli wolisz, możesz usunąć pasek wyszukiwania dla użytkowników mobilnych, dezaktywując przełącznik obok opcji „Wyszukiwanie”.

Istnieje wiele innych ustawień, które można skonfigurować, więc warto poświęcić trochę czasu na przejrzenie innych opcji. Jest to jednak wystarczające do stworzenia dobrze zaprojektowanego menu gotowego na urządzenia mobilne.

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

Teraz wystarczy odwiedzić swojego bloga WordPress na urządzeniu mobilnym, aby zobaczyć nowe menu w akcji. Możesz również wyświetlić mobilną wersję swojej witryny WordPress z komputera.

Metoda 2: Utwórz pełnoekranowe responsywne menu gotowe na urządzenia mobilne

Inną opcją jest dodanie pełnoekranowego responsywnego menu. 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, niezależnie od urządzenia, z którego korzysta odwiedzający.

Ponieważ menu zajmuje całą dostępną przestrzeń, łatwiej jest nawigować na smartfonach i tabletach, niezależnie od wielkości ekranu.

Najprostszym sposobem na stworzenie pełnoekranowego menu jest użycie FullScreen Menu. Ta wtyczka pozwala na stworzenie pełnoekranowego menu tylko dla urządzeń mobilnych, lub możesz wyświetlić to samo menu na smartfonach, tabletach i komputerach stacjonarnych, dzięki czemu wszyscy odwiedzający będą mieli takie samo doświadczenie.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki FullScreen Menu. Możesz zapoznać się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress aby uzyskać więcej szczegółów.

Po aktywacji przejdź do strony Opcje Menu Pełnoekranowego z menu WordPress i zaznacz następujące pole: „Aktywuj animowane menu pełnoekranowe”.

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

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

Następnie możesz dopracować wygląd menu, klikając zakładkę „Projekt / Wygląd”.

Tutaj możesz wybrać kolory, czcionkę i ustawienia animacji dla menu pełnoekranowego.

Tworząc te zmiany, pamiętaj, że „Menu początkowe tła” to ikona przełączania menu. Natomiast „Otwarte menu tła” to kolor rozszerzonego, pełnoekranowego menu mobilnego.

Po wybraniu kolorów menu przewiń do sekcji „Wygląd menu”. Tutaj możesz zmienić kolor czcionki, rodzinę czcionek i rozmiar czcionki menu.

Pamiętaj tylko, że ładowanie dodatkowych czcionek może wpłynąć na wydajność i szybkość Twojej witryny WordPress. Nie jest to zawsze 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 połączenie internetowe na urządzeniach mobilnych, co spowoduje jeszcze wolniejsze ładowanie Twojej witryny.

Po wykonaniu tej czynności przewiń do sekcji „Ustawienia animacji”.

Na początek możesz wybrać, w jaki sposób menu będzie się rozwijać, gdy odwiedzający kliknie ikonę przełącznika. Po prostu otwórz menu rozwijane „Typ animacji” i wybierz opcję z listy, na przykład Od góry do dołu lub Od lewej do prawej.

Gdy będziesz zadowolony z układu menu, kliknij zakładkę „Menu Content”, aby dodać zawartość.

Tutaj kliknij na rozwijaną listę „Wybierz menu” i wybierz menu, które chcesz wyświetlić na pełnym ekranie.

Jeśli jeszcze nie utworzyłeś menu nawigacyjnego, zapoznaj się z naszym przewodnikiem jak dodać menu nawigacyjne w WordPress.

Jeśli chcesz wyświetlić dodatkową zawartość w menu, możesz ją dodać w polu „Darmowy HTML / Krótkie kody”. Działa to jak mini edytor strony, dzięki czemu możesz wpisywać tekst, zmieniać formatowanie, dodawać punkty i listy numerowane oraz więcej.

Istnieje również pole wyboru, które doda link do Twojej strony z polityką prywatności. 

Następnie możesz dodać ikony mediów społecznościowych do swojego menu WordPress. Te ikony pojawią się w rzędzie na dole pełnoekranowego menu.

Aby dodać te ikony, po prostu kliknij, aby rozwinąć pole „Ikona społecznościowa 1”.

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

Następnie kliknij strzałkę obok „Ikona społecznościowa” i wybierz ikonę, którą chcesz wyświetlić odwiedzającym mobilnym.

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

Aby dodać więcej ikon, po prostu kliknij przycisk „Add Another Icon”.

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

Domyślnie wtyczka wyświetli komunikat „Search something…”. Możesz jednak zastąpić go własnym niestandardowym komunikatem, wpisując tekst w polu „Search input placeholder”.

Na przykład, jeśli prowadzisz sklep WooCommerce, możesz użyć tekstu takiego jak „Start shopping” lub „Search for products”.

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

Teraz po prostu odwiedź swoją stronę internetową za pomocą urządzenia mobilnego, aby zobaczyć menu na pełnym ekranie w akcji.

Możesz również podglądać mobilną wersję swojej strony internetowej za pomocą narzędzia do dostosowywania motywów WordPress.

Bonus: Jak dodać responsywne menu mobilne do stron docelowych

Jeśli tworzysz stronę docelową lub stronę sprzedaży, chcesz, aby projekt wyglądał 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 oferuje ponad 300 profesjonalnie zaprojektowanych szablonów.

Po utworzeniu projektu za pomocą SeedProd, możesz dodać responsywne menu mobilne do strony za pomocą gotowego bloku Menu Nawigacyjnego SeedProd. Ten blok pozwala na tworzenie oddzielnych menu zarówno dla urządzeń mobilnych, jak i komputerów stacjonarnych.

W ten sposób możesz używać innego układu, a nawet wyświetlać inne linki w zależności od urządzenia użytkownika.

Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem jak dodawać niestandardowe menu nawigacyjne w WordPress.

Po dodaniu bloku Nawigacja do swojego projektu, po prostu kliknij zakładkę „Zaawansowane”.

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

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

Możesz teraz dodawać linki i zmieniać układ menu za pomocą ustawień w menu po lewej stronie.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak stworzyć responsywne menu WordPress gotowe na urządzenia mobilne. Możesz również zapoznać się z naszym przewodnikiem dla początkujących na temat jak dodać zmianę rozmiaru czcionki w WordPress oraz naszymi wskazówkami ekspertów na temat sposobów na stworzenie przyjaznej dla urządzeń mobilnych strony WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.