Jak stworzyć elastyczne menu dla telefonu WordPressa

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.

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.

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.

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

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

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.

/ * 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.

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.

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.

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.

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ó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.

...