Oferowanie niezgrabnego menu w stylu pulpitu na telefonie to pewny sposób na frustrację odwiedzających. A mylące menu mobilne może sprawić, że odejdą równie szybko.
Menu panelu wysuwanego rozwiązuje ten problem, nadając Twojej witrynie czysty, przypominający aplikację wygląd, który doskonale sprawdza się na mniejszych ekranach. Ułatwia znajdowanie treści i utrzymuje zaangażowanie odwiedzających.
Po przetestowaniu kilku wtyczek do tego konkretnego zadania znaleźliśmy fantastyczną darmową opcję, która jest zarówno potężna, jak i łatwa w konfiguracji. Możesz stworzyć profesjonalnie wyglądające menu przesuwne bez dotykania ani jednej linii kodu.
W tym przewodniku pokażemy Ci dokładnie, jak krok po kroku dodać menu panelu przesuwnego do Twojego motywu WordPress. 🎨
Dlaczego dodać menu z panelem wysuwanym w motywach WordPress?
Menu w postaci panelu bocznego sprawia, że nawigacja na urządzeniach mobilnych jest płynniejsza i bardziej intuicyjna. Nadaje Twojej witrynie WordPress czysty, przypominający aplikację wygląd, pomagając odwiedzającym szybko znaleźć to, czego szukają, bez poczucia zagubienia lub frustracji.
Dobrze zaprojektowane menu pomaga odwiedzającym poruszać się po Twojej witrynie WordPress. Wielu Twoich odwiedzających będzie korzystać z urządzeń mobilnych, dlatego ważne jest, aby wyświetlić wersję mobilną swojej witryny WordPress , aby zobaczyć, jak Twoje menu nawigacyjne wygląda na mniejszych ekranach.
Na szczęście wiele motywów WordPress zawiera wbudowane style, które automatycznie wyświetlają przyjazne dla urządzeń mobilnych menu podczas przeglądania na małym ekranie.
Jednak możesz chcieć jeszcze bardziej dostosować swoją nawigację mobilną i dodać pełnoekranowe responsywne menu lub animowane menu panelu przesuwnego.
Mając to na uwadze, pokażemy Ci, jak dodać menu panelu bocznego w motywach WordPress. Oto szybki przegląd wszystkich tematów, które udostępnimy w tym przewodniku:
- Jak dodać menu z panelem bocznym w motywach WordPress
- Często zadawane pytania dotyczące menu panelu bocznego
- Dalsza lektura: Więcej zasobów na temat dostosowywania menu witryny
Zacznijmy.
Jak dodać menu z panelem bocznym w motywach WordPress
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki Responsive Menu. Jeśli potrzebujesz jakiejkolwiek pomocy, możesz zapoznać się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.
💡 Uwaga: Możesz skorzystać z tego samouczka, używając darmowej wtyczki. Jeśli chcesz uzyskać dodatkowe motywy i zaawansowane funkcje, takie jak logika warunkowa, możesz zaktualizować do wersji premium wtyczki Responsive Menu.
Po aktywacji przejdź do Menu responsywne » Menu z panelu administracyjnego WordPress. Tam kliknij przycisk „Utwórz nowe menu” u góry ekranu.
Zobaczysz wtedy 4 motywy, których możesz użyć dla swojego nowego responsywnego menu. Dodatkowe motywy są dostępne do zakupu.
W tym samouczku użyjemy automatycznie wybranego motywu. Następnie możesz kliknąć przycisk „Dalej”.
Spowoduje to przejście do strony „Ustawienia menu”.
Tutaj możesz wprowadzić nazwę dla swojego menu responsywnego, a następnie wybrać, które menu WordPress chcesz wyświetlić w panelu. Na przykład wybraliśmy menu „Nawigacja”.
Jeśli potrzebujesz utworzyć nowe menu, możesz dowiedzieć się, jak to zrobić, postępując zgodnie z naszym przewodnikiem jak dodać menu nawigacyjne w WordPress.
Możesz również ukryć normalne menu, które jest dostarczane z motywem WordPress, tak aby Twoi użytkownicy widzieli tylko nowe menu panelu bocznego. Robisz to, wprowadzając kod CSS w polu „Ukryj menu motywu”.
Kod, który musisz tutaj wprowadzić, różni się w zależności od motywu, a więcej szczegółów możesz poznać, klikając link „Dowiedz się więcej”.
📝 Uwaga: Użytkownicy wersji Pro mają kilka dodatkowych ustawień. Na przykład użytkownicy Pro mogą wybrać urządzenia i strony, na których menu powinno być wyświetlane.
Gdy będziesz zadowolony z ustawień, kliknij przycisk „Utwórz menu” na dole strony. Spowoduje to przejście do strony, na której możesz dokończyć dostosowywanie menu.
Po prawej stronie ekranu zobaczysz podgląd swojej witryny, a na dole znajdują się przyciski do przełączania między widokiem telefonu, tabletu i komputera stacjonarnego. Po lewej znajdziesz również opcje dostosowywania.
Możesz zauważyć, że część tekstu jest wyświetlana nad menu. Jest to tytuł menu i linia tekstu, którą wtyczka nazywa „dodatkową zawartością”.
Możesz edytować lub ukryć tekst, klikając na „Menu mobilne”, a następnie na „Kontener” w menu po lewej stronie strony.
Dodatkowo możesz wpisać dowolny tekst w polu „Tekst tytułu”, na przykład „Główne menu” lub „Nawigacja”. Jeśli nie chcesz wyświetlać tytułu, po prostu przesuń przełącznik „Tytuł” do pozycji wyłączonej.
Następnie przewiń w dół do ustawienia „Dodatkowa treść”.
Stąd możesz wyłączyć to ustawienie lub wpisać alternatywną zawartość. Na poniższym zrzucie ekranu zauważysz, że przełącznik został wyłączony, więc słowa „Dodaj więcej zawartości tutaj…” są teraz ukryte.
Gdy będziesz zadowolony z ustawień menu, upewnij się, że kliknąłeś przycisk „Zaktualizuj” na dole strony, aby zapisać swoje ustawienia.
Wtyczka Responsive Menu oferuje wiele innych opcji zmiany zachowania i wyglądu menu bocznego. Możesz zapoznać się z tymi opcjami na stronie ustawień wtyczki i dostosować je według potrzeb.
Teraz możesz odwiedzić swoją witrynę, aby zobaczyć menu w akcji. Oto jak wygląda na naszej stronie demonstracyjnej. Zauważ, że jeśli bieżąca strona znajduje się w menu, jest ona podświetlona kolorowym paskiem.
✋ Wskazówka eksperta: Stylizacja menu nawigacyjnego WordPress może poprawić wygląd i użyteczność Twojej witryny. Dobrze zaprojektowane menu pomaga odwiedzającym łatwo znaleźć to, czego potrzebują, i zachęca do kliknięć.
Więcej na ten temat znajdziesz w naszym przewodniku po różnych sposobach stylizowania menu nawigacyjnego WordPress.
Często zadawane pytania dotyczące menu panelu bocznego
Nadal potrzebujesz wyjaśnień, jak działają menu z panelami bocznymi w WordPress? Oto odpowiedzi na kilka często zadawanych pytań.
Czy wszystkie motywy WordPress mają menu mobilne?
Większość nowoczesnych motywów WordPress jest responsywna, więc zawierają przyjazne dla urządzeń mobilnych menu. Niemniej jednak jest to zazwyczaj tylko podstawowe menu rozwijane. Jeśli chcesz mieć eleganckie menu w postaci panelu wysuwanego, potrzebujesz wtyczki.
Czy dodanie wtyczki menu z panelem bocznym spowolni moją stronę?
Nie, jeśli wybierzesz dobrze zakodowaną wtyczkę, taką jak Responsive Menu. Te wtyczki są zaprojektowane tak, aby były lekkie i nie powinny zauważalnie wpływać na szybkość Twojej witryny.
Czy mogę wyświetlić inne menu na urządzeniach mobilnych w porównaniu do komputerów stacjonarnych?
Tak! Możesz stworzyć osobne menu mobilne za pomocą wtyczki takiej jak WP Mobile Menu lub niestandardowego CSS, dzięki czemu Twoi mobilni odwiedzający zobaczą inną nawigację niż użytkownicy komputerów stacjonarnych. Pozwala to uprościć linki, wyróżnić promocje lub poprawić konwersje specjalnie dla urządzeń mobilnych.
Dalsza lektura: Więcej zasobów na temat dostosowywania menu witryny
Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak dodać menu panelu bocznego w motywach WordPress.
Aby jeszcze bardziej poprawić komfort użytkowania, zapoznaj się z naszymi innymi pomocnymi przewodnikami na temat:
- Jak stworzyć przypięte, pływające menu nawigacyjne w WordPressie
- Jak dodać mega menu na swojej stronie WordPress (krok po kroku)
- Jak dodać konkretne posty do menu nawigacyjnego WordPress
- Jak dodać pasek wyszukiwania do menu WordPress (krok po kroku)
- Jak utworzyć menu rozwijane w WordPress (przewodnik dla początkujących)
- Jak wyświetlać różne menu zalogowanym użytkownikom w WordPress
- Jak dodać niestandardowe menu nawigacyjne w motywach 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.
Jiří Vaněk
Stworzyłem menu przesuwane za pomocą Elementora i okienek pop-up z efektem przesuwnego menu. Działa świetnie, ale niestety nie mogę mieć Elementor PRO na wszystkich stronach, którymi zarządzam, ze względu na jego cenę. To fantastyczna alternatywa do tworzenia takiego menu, a jeśli można używać wtyczki w darmowej wersji, to jest to naprawdę niesamowite. Dla stron bez Elementora to dla mnie ratunek.
Moinuddin Waheed
To jest dla mnie ratunek, ponieważ miałem trudności z uzyskaniem wysuwanego panelu dla responsywnego menu mobilnego.
Wcześniej używałem fragmentów kodu i wstawiałem je do kodu WP w tym celu.
Ale ta wtyczka oferuje więcej opcji dostosowywania, a wersja pro wydaje się potężniejsza pod względem kontroli dostosowywania.
Zdecydowanie wypróbuję tę wtyczkę.
Mohammad Kashif
Super!
Czy mogę dodać przycisk zamknięcia do wyskakującego okienka?
Luke Marshall
Nadal czekam na odpowiedź z Waszego działu wsparcia dotyczącą tej konkretnej potrzeby! Ta, którą oferujecie, jest tylko po prawej stronie, bez widocznego sposobu na zmianę jej na lewą. Cieszę się, że to znalazłem.
Cynthia
Zmień funkcję „left” na „right” w dwóch miejscach, w których jest używana w kodzie funkcji.
Ru
Czy macie demo tego?
Chciałbym to sprawdzić wcześniej
Daniel Jarosz
czyste i proste, dziękuję za ten tut!
Ann
Cześć, ten kod działa idealnie, gdy uruchamiam moją stronę lokalnie, ale nie działa, gdy jest już na żywo. Czy jest jakieś możliwe wyjaśnienie tego? Zaktualizowałem linki do obrazów, nie jestem pewien, co jeszcze wymaga aktualizacji, ponieważ foldery się nie zmieniły.
Madiha
Nie działa na mojej stronie, proszę odwiedź ją i powiedz, jakie jest rozwiązanie
http://www.dailynewscompany.com
Mattia
Cześć, ciekawy artykuł… Czy masz DEMO tego, lub URL do strony online, na której to zaimplementowałeś? Byłoby interesujące zobaczyć to w realnym przypadku, zanim spróbuję tego użyć! Wielkie dzięki
Jim
Czy można pokazać, jak zmodyfikować skrypt, aby zdarzenie zamknięcia można było wywołać, klikając gdziekolwiek indziej niż w nawigacji?
Innymi słowy, aby użytkownik nie musiał klikać tylko ikony menu przełącznika, aby zamknąć pasek boczny nawigacji?
Dzięki.
Karl
Szukam wszędzie wtyczki lub możliwości zaimplementowania typu menu, które obecnie masz na górze swojej strony. Masz przycisk „Play” po prawej stronie nagłówka. Po jego naciśnięciu obszar treści wysuwa się z sekcji nagłówka. Bardzo chcę użyć tego typu menu na mojej stronie. Jeśli możesz wskazać mi nawet link, gdzie to tego typu menu jest wyjaśnione, poradzę sobie dalej i dziękuję. To jest niesamowity tutorial!
Wsparcie WPBeginner
Karl, możesz kliknąć prawym przyciskiem myszy na przycisk odtwarzania i wybrać „zbadaj element” oraz przestudiować nasz kod źródłowy. Wkrótce również opiszemy to na WPBeginner jako tutorial.
Admin
Shubham Dubey
Przepraszam za odpowiedź tutaj, (Komentarze nie są dostępne)
Hej! Używam frameworka Genesis z jego motywem potomnym, nie mogę tam znaleźć pliku header.php.
i just copied the header.php file from genesis to my child themes folder, but after opening header.php file didn’t found any lines
JAK TO ZROBIĆ Z MOTYWAMI POTOMNYMI, PROSZĘ WYJAŚNIJ.
Jim
Doskonały przewodnik. Jestem prawie na miejscu z testową implementacją, jednak zastanawiam się… czy mogę użyć ścieżki względnej w pliku sidepanel.js zamiast ścieżki bezwzględnej?
Próbowałem to zrobić, ale nie mogę tego rozgryźć. Czy ścieżka względna powinna być względna do pliku html wywołującego javascript?
Dzięki
krish
To dobra i przydatna treść. Zrzut ekranu i kodowanie są łatwe do zrozumienia i zastosowania na mojej stronie internetowej. Dobra robota, człowieku!!!
Håkon Stillingen
Ciekawy artykuł. Jak mógłbym zastąpić domyślny nagłówek w Genesis Framework?