Jak stworzyć elastyczne menu dla telefonu WordPressa

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

• Jak utworzyć pływające menu na WordPressie
• Wtyczki 8 WordPress do tworzenia megamenu na swoim blogu
• Kilka wskazówek, jak tworzyć nowoczesne menu na swoim blogu
• Wtyczki 6 WordPress do zarządzania kategoriami i podkategoriami na swoim blogu

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.

...