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 600.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?

Liczba użytkowników mobilnych obecnie przewyższa liczbę użytkowników komputerów stacjonarnych. Dodanie responsywnego menu dla urządzeń mobilnych 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

Zagłębi się to, 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ę po ekranie telefonu komórkowego.

Demonstracja menu-gospodarze

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

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

czuły menu, wordpress

Musisz najpierw wprowadzić rozmiar, z którego pojawi się menu mobilne. Wartość domyślna to 800 px, która powinna działać na większości witryn.

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

Ostatnia opcja na ekranie pozwala zapewnić klasę CSS dla menu. Umożliwi to wtyczce ukrycie nieodpowiadającego menu na mniejszych 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ą stronę 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ą zmienić zachowanie i wygląd responsywnego menu. Możesz przejrzeć te opcje na stronie ustawień wtyczek i dostosować je w razie potrzeby.

Metoda 2: Jak ręcznie dodać menu mobilne

Jedną z najczęściej używanych metod wyświetlania menu na ekranach telefonów komórkowych 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.

Musisz najpierw 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ą folderu bieżącego motywu WordPress. Jeśli twój katalog motywów nie ma folderu js, musisz go utworzyć.

Po pobraniu pliku JavaScript następnym krokiem jest upewnienie się, że witryna WordPress ładuje pliki JavaScript. Musisz dodać następujący kod do pliku functions.php Twojego motywu WordPress.

Odkryj coś jeszcze 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.

<nav id = "site-navigation" class = "main-navigation" role = "navigation"> <button class = "menu-toggle"> Menu </ button> <? php wp_nav_menu (array ('theme_location' => ' podstawowe ',' menu_class '=>' nav-menu ')); ?> </ nav>

Zakładamy, że lokalizacja menu zdefiniowana przez motyw WordPress nazywa się „ pierwotny ”. Jeśli nie, użyj lokalizacji zdefiniowanej w motywie WordPress.

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]

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

Ostatnim krokiem jest dodanie CSS, aby nasze menu używało odpowiednich klas CSS do przełączania podczas wyświetlania na urządzeniach mobilnych.

/ * Menu nawigacji * / .main-navigation {margin-top: 24px; margin-top: 1.714285714rem; wyrównanie tekstu: środek; } .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: blok wbudowany; } // CSS do wykorzystania 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: blok wbudowany! ważne; wyrównanie tekstu: w lewo; 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; transformacja tekstu: wielkie litery; biała przestrzeń: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {color: #000; } .main-navigation li {margin: 0 40px 0 0; margines: 0 2.857142857rem 0 0; pozycja: względna; } .main-navigation li ul {margin: 0; wypełnienie: 0; pozycja: absolutna; góra: 100%; indeks z: 1; wysokość: 1px; szerokość: 1px; przelew: ukryty; klip: rect (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 0; po lewej: 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; wzrost: odziedziczony; szerokość: dziedziczona; } .main-navigation li ul li {background: #efefef; border-bottom: 1px solid #ededed; wyświetlacz: blok; 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ła spacja: normalna; } .main-navigation li li li: hover, .main-navigation li li li: focus {background: #e3e3e3; kolor: #444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-ancestor> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {color: #636363; font-weight: pogrubiony; } .menu-toggle {display: brak; }}

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

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 megamenu, które można dostosowywać, reagować i udostępniać użytkownikom. Działa po instalacji, bez specjalnej konfiguracji.

Wtyczka mega menu Ubermenu wordpress

Jest to łatwa w obsłudze wtyczka, ale wystarczająco mocna, aby tworzyć konfigurowalne i kreatywne konfiguracje mega-menu.

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

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

Pobierz | Demo | hosting

2. LMM

Liquida Mega Menu nadal nazywane LMM to wtyczka WordPress przeznaczona dla użytkowników i programistów. Ma prosty i intuicyjny interfejs wbudowany w pulpit nawigacyjny WP, pozwalający tworzyć i dostosowywać nieograniczoną liczbę mega menu, bez żadnych umiejętności programowania.

Lmm responsywne mega menu oparte na bootstrapie

Jest wyposażony w dziesiątki funkcji, zarówno dla zwykłych, jak i zaawansowanych użytkowników. Jako funkcje oferuje między innymi: integrację automatyczną i ręczną, obsługa wielu lokalizacji, dbanie o motywy dla dzieci, w pełni konfigurowalny styl menu, konfigurowalne lokalizacje menu, lepkie menu itp.

Pobierz | Demo | hosting

3. 8Degree Menu Fly

8Degree Fly Menu to wysokiej klasy wtyczka WordPress, która pozwala dodać menu kanwy na twojej stronie internetowej, aby nadać mu wygląd, który podkreśla i w prosty sposób Twoje informacje. Używa domyślnej funkcji menu WordPress do tworzenia 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

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]

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.

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ówkami 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 tymczasem 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 pomoc

    dobry koniec tygodnia

    michel

Zostaw komentarz

Twój adres e-mail nie zostanie 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
5 akcji
udział4
ćwierkanie
Enregistrer1