Przejdź do głównej treści

Jak stworzyć elastyczne menu dla telefonu WordPressa

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Czy chcesz utworzyć responsywne menu mobilne na swoim blogu WordPress?

Obecnie liczba użytkowników mobilnych przewyższa liczbę użytkowników komputerów stacjonarnych. Dodanie responsywnego menu mobilnego ułatwia użytkownikom poruszanie się po Twojej witrynie.

W tym samouczku pokażemy, jak łatwo utworzyć responsywne menu w WordPress.

Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu 

Wróćmy do tego, dlaczego tu jesteśmy.

Jak stworzyć responsywne mobilne menu wordpress

Tutaj będzie kwestia zagłębienia się, pokazując zarówno metodę z wtyczką dla początkujących, jak i metodę kodowania dla zaawansowanych użytkowników.

Pierwsza metoda: utwórz menu mobilne za pomocą wtyczki WordPress

Ta metoda jest łatwiejsza i zalecana dla początkujących, ponieważ nie wymaga żadnych specjalnych umiejętności kodowania.

W tej metodzie utworzymy menu (z ikoną hamburgera), który przesuwa się na ekranie telefonu komórkowego.

Wtyczka responsywnego menu WordPress

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować Wtyczka WordPress Responsive Menu , Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem, jak zainstalować wtyczkę WordPress .

Po aktywowaniu wtyczki wtyczka doda w menu nowy element o nazwie „ responsive Menu ”. Kliknięcie go przeniesie Cię do strony ustawień wtyczki WordPress.

Wtyczka responsywnego menu pulpitu WordPress

Najpierw musisz wprowadzić rozmiar, z którego ma się pojawić menu mobilne. Wartość domyślna to 800 pikseli, co powinno działać w przypadku większości witryn internetowych.

Następnie musisz wybrać menu, którego chcesz używać na telefonie komórkowym.

Ostatnia opcja na ekranie umożliwia podanie klasy CSS dla twojego menu. Umożliwi to wtyczce ukrycie niereagującego menu na małych ekranach.

Nie zapomnij kliknąć « Opcje aktualizacji Aby zapisać ustawienia.

Sugerujemy również, abyś odkrył nasze Wtyczki 10 WordPress do tworzenia menu na blogu

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Możesz teraz odwiedzić swoją witrynę internetową i zmienić rozmiar ekranu przeglądarki, aby zobaczyć responsywne menu w akcji.

Site-in-action-menu-czuły do ​​telefonu komórkowego

Wtyczka « responsive Menu »Oferuje wiele innych opcji, które pozwalają modyfikować zachowanie i wygląd responsywnego menu. Możesz zapoznać się z tymi opcjami na stronie ustawień wtyczki i dostosować je w razie potrzeby.

Metoda 2: Jak ręcznie dodać menu mobilne

Jedną z najczęstszych metod wyświetlania menu na ekranach urządzeń mobilnych jest użycie dźwigni.

Ta metoda wymaga dodania niestandardowego kodu do plików WordPress.

W jednym z naszych poprzednich samouczków pokażemy Ci jak stworzyć wtyczkę WordPress.

Najpierw musisz otworzyć edytor tekstu, taki jak Notatnik, i wkleić ten kod.

(function () {nav var = document.getElementById ('site-navigation'), przycisk, menu; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! button) {return;} // Ukryj przycisk, jeśli brakuje menu lub pusty, jeśli (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('toggled-on')) {button.className = button.className.replace ('toggled-on', '')); menu.className = menu.className.replace ('przełączony -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Teraz musisz zapisać ten plik pod nazwą „ navigation.js Na twoim biurku.

Następnie musisz otworzyć klienta FTP, aby pobrać ten plik do lokalizacji „/ wp-content / themes / your-theme / js /” na swojej stronie WordPress.

Zamień wyrażenie „ Twój-theme Z nazwą aktualnego folderu motywów WordPress. Jeśli katalog z motywami nie ma folderu js, musisz go utworzyć.

Po przesłaniu pliku JavaScript następnym krokiem jest upewnienie się, że witryna WordPress załaduje pliki JavaScript. Będziesz musiał dodać następujący kod do „ functions.php Twojego motywu WordPress.

Odkryj coś innego Co możesz zrobić z plikiem functions.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () /js/navigation.js "tablica (” jQuery ') 20160909' prawdziwa.);

Teraz musimy dodać menu nawigacyjne do naszego motywu WordPress. Zazwyczaj menu nawigacyjne jest dodawane do pliku „ header.php Twojego motywu WordPress.

Menu 'primary', 'menu_class' => 'nav-menu')); ?>

Zakładamy, że lokalizacja menu zdefiniowana przez motyw WordPress nazywa się „ pierwotny ”. W przeciwnym razie użyj lokalizacji zdefiniowanej przez motyw WordPress.

Odkryj także nasze 5 wtyczek WordPress do tworzenia formularzy subskrypcji

Ostatnim krokiem jest dodanie CSS, tak aby nasze menu korzystało z odpowiednich klas CSS do przełączania podczas przeglądania na urządzeniach mobilnych.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

/ * Menu nawigacji * / .main-navigation {margin-top: 24px; margin-top: 1.714285714rem; wyrównywanie tekstu: do środka; } .main-navigation li {margin-top: 24px; margin-top: 1.714285714rem; rozmiar czcionki: 12px; rozmiar czcionki: 0.857142857rem; wysokość linii: 1.42857143; } .main-navigation a {color: # 5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {color: # 21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // CSS do użycia na urządzeniach mobilnych @ media screen i (min-width: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # ededed; border-top: 1px solid #ededed; display: inline-block! ważne; text-align: left; szerokość: 100%; } .main-navigation ul {margin: 0; wcięcie tekstu: 0; } .main-navigation li a, .main-navigation li {display: inline-block; dekoracja tekstu: brak; } .main-navigation li a {border-bottom: 0; kolor: # 6a6a6a; wysokość linii: 3.692307692; text-transform: wielkie litery; spacja: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {kolor: # 000; } .main-navigation li {margin: 0 40px 0 0; marża: 0 2.857142857rem 0 0; pozycja: względna; } .main-navigation li ul {margin: 0; wyściółka: 0; pozycja: bezwzględna; Top 100%; indeks z: 1; wysokość: 1px; szerokość: 1px; przepełnienie: ukryte; klip: prostokąt (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 0; lewy: 100%; } .main-navigation ul li: hover> ul, .main-navigation ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; klip: dziedziczenie; przepełnienie: dziedziczenie; wysokość: dziedziczenie; szerokość: dziedziczenie; }. nawigacja główna li ul li a {tło: #efefef; border-bottom: 1px solid #ededed; Blok wyświetlacza; rozmiar czcionki: 11px; rozmiar czcionki: 0.785714286rem; wysokość linii: 2.181818182; wypełnienie: 8px 10px; wypełnienie: 0.571428571rem 0.714285714rem; szerokość: 180px; szerokość: 12.85714286rem; białe znaki: normalne; } .main-navigation li ul li a: hover, .main-navigation li ul li a: focus {tło: # e3e3e3; kolor: # 444; } .main-navigation .current-navigation .current_page_ancestor> a {color: # 636363; font-weight: pogrubienie; } .menu-toggle {display: none; }}

Możesz teraz odwiedzić swoją witrynę internetową i zmienić rozmiar ekranu przeglądarki, aby sprawdzić, czy Twoje responsywne menu się przełącza.

Rocking-menu-wordpress-tutorial

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych wtyczek WordPress, aby nadać nowoczesny wygląd i zoptymalizować chwyt swojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. UberMenu

UberMenu to wtyczka WordPress przeznaczona do tworzenia wysoce konfigurowalnego, responsywnego i dostępnego dla użytkowników megamenu. Po zainstalowaniu funkcjonuje bez konieczności specjalnej konfiguracji.

Wtyczka mega menu Ubermenu wordpress

Jest to łatwa w użyciu wtyczka, ale wystarczająco potężna, aby tworzyć wysoce konfigurowalne i kreatywne układy mega menu.

Zobacz także nasze 9 wtyczek WordPress do tworzenia siatek cen na blogu

Znajdziesz między innymi: 3 szablony menu, w pełni responsywny układ, kompatybilność z urządzeniami mobilnymi (iPhone, iPad, Android), obsługę dotykową itp ...

Pobierz | Demo | hosting

2. LMM

Liquida Mega Menu zwana również LMM to wtyczka WordPress przeznaczona dla użytkowników i programistów. Posiada prosty i intuicyjny interfejs, zintegrowany z deską rozdzielczą WP, umożliwiający tworzenie i dostosowywanie nieograniczonej liczby mega menu bez żadnych umiejętności programowania.

Lmm responsywne mega menu oparte na bootstrapie

Zawiera dziesiątki funkcji, zarówno dla zwykłych, jak i zaawansowanych użytkowników. Jako funkcjonalności oferuje między innymi: automatyczną i ręczną integrację, obsługa wielu lokalizacji, dbanie o motywy dla dzieci, całkowicie konfigurowalny styl menu, konfigurowalne lokalizacje menu, lepkie menu itp.

Pobierz | Demo | hosting

3. 8Degree Menu Fly

8Degree Fly Menu to wysokiej jakości wtyczka WordPress, która umożliwia dodanie menu płótna do Twojej witryny, aby nadać jej wygląd, który podkreśla i łatwo Twoje informacje. Używa domyślnej funkcji menu WordPress do tworzenia swoich menu.

8degree fly menu responsywne z menu plugin menu dla wordpress

Będziesz mógł dodawać dodatkowe elementy do domyślnych pozycji menu, takie jak ikony, slogany menu, pseudo-grupujący nagłówek i długi opis.

Aby przeczytać także: 10 wtyczek WordPress do optymalizacji pasków bocznych i lepkich nagłówków

Jest również wyposażony w edytor WYSIWYG, który pomaga uchwycić długi opis w przyjazny dla użytkownika sposób. Za pomocą tego edytora możesz także używać skrótów.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Pobierz | Demo | hosting

Inne zalecane zasoby

Zachęcamy również do zapoznania się z poniższymi zasobami, aby przejść dalej w zakresie kontroli nad witryną i blogiem.

Wnioski

To jest to! To wszystko w tym samouczku, mam nadzieję, że pozwoli ci stworzyć menu dla użytkowników mobilnych. Nie wahaj się podziel się wskazówką ze znajomymi w sieciach społecznościowych.

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.

Ale w międzyczasie opowiedz nam o swoim commentaires i sugestie w dedykowanej sekcji.

...

Ten artykuł zawiera komentarze 2

  1. cześć

    dziękuję za twoje informacje

    Nie mogę znaleźć „klasy CSS dla twojego menu”. Znalazłem arkusz stylów css, ale nie wiem, co skopiować i wkleić

    Z góry dziękuję za Twoją pomoc

    dobry koniec tygodnia

    michel

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
6 akcji
udział4
ćwierkanie
Enregistrer2