W artykule:
Czy chcesz stworzyć gotowe na urządzenia mobilne responsywne menu WordPress? Użytkownicy mobilni już prześcignęli użytkowników komputerów stacjonarnych w wielu witrynach internetowych. Dodanie responsywnego menu mobilnego ułatwia użytkownikom poruszanie się po witrynie. W tym artykule pokażemy, jak łatwo stworzyć responsywne menu WordPress gotowe na urządzenia mobilne.
Jest to dogłębny samouczek. Pokażemy zarówno metodę wtyczek dla początkujących (bez kodowania), jak i metodę kodowania dla naszych bardziej zaawansowanych użytkowników.
Pod koniec tego samouczka dowiesz się, jak utworzyć przesuwane menu mobilne, rozwijane menu mobilne i przełączane menu mobilne.
Gotowy? Zaczynajmy.
Video Tutorial
Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.
Metoda 1: Dodaj responsywne Menu w WordPress za pomocą wtyczki
Ta metoda jest łatwiejsza i zalecana dla początkujących, ponieważ nie wymaga niestandardowego kodowania.
W tej metodzie stworzymy menu hamburgerowe, które wysuwa się na ekran mobilny.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Responsive Menu. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji wtyczka doda nowy element menu o nazwie „Responsive Menu” do paska administracyjnego WordPress. Kliknięcie na niego przeniesie Cię do strony ustawień wtyczki.
Najpierw musisz wprowadzić szerokość ekranu, w którym momencie wtyczka zacznie wyświetlać responsywne menu. Domyślną wartością jest 800px, która powinna działać dla większości stron internetowych.
Następnie musisz wybrać menu, którego chcesz użyć do menu responsywnego. Jeśli nie utworzyłeś jeszcze menu, możesz je utworzyć, odwiedzając stronę Wygląd ” Menu. Zobacz nasz przewodnik, Jak dodać menu nawigacyjne w WordPress, aby uzyskać szczegółowe instrukcje.
Ostatnią opcją na ekranie jest dostarczenie klasy CSS dla bieżącego Nie responsywnego menu. Pozwoli to wtyczce ukryć Twoje Nie reagujące menu na mniejszych ekranach.
Nie zapomnij kliknąć na „Opcje Aktualizacji” przycisk do przechowywania ustawień.
Możesz teraz odwiedzić swoją witrynę i zmienić rozmiar ekranu przeglądarki, aby zobaczyć responsywne menu w akcji.
Wtyczka responsive menu zawiera wiele innych opcji, które pozwalają zmienić zachowanie i wygląd responsywnego menu. Możesz zbadać te opcje na stronie ustawień wtyczki i dostosować je w razie potrzeby.
Metoda 2: Dodaj rozwijane menu wyboru za pomocą wtyczki
Innym sposobem dodania responsywnego menu jest dodanie rozwijanego menu wyboru. Ta metoda nie wymaga żadnych umiejętności kodowania, dlatego jest zalecana dla początkujących.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Responsive Select Menu. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz odwiedzić Wygląd ” Responsive Select aby skonfigurować ustawienia wtyczki.
Musisz przewinąć w dół do sekcji „Aktywuj lokalizacje motywów”. Domyślnie wtyczka jest aktywowana we wszystkich lokalizacjach motywów. Możesz to zmienić, selektywnie włączając go dla określonych lokalizacji motywów.
Nie zapomnij kliknąć przycisku zapisz wszystkie ustawienia, aby zapisać zmiany.
Możesz teraz odwiedzić swoją witrynę i zmienić rozmiar ekranu przeglądarki, aby zobaczyć responsywne menu wyboru w akcji.
Metoda 3: tworzenie przyjaznego dla urządzeń mobilnych responsywnego Menu z efektem przełączania
Jedną z najczęściej używanych metod wyświetlania menu na ekranach mobilnych jest użycie efektu przełączania.
Ta metoda wymaga dodania niestandardowego kodu do plików WordPress. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem na temat wklejania fragmentów z sieci w WordPress.
Najpierw musisz otworzyć edytor tekstu, taki jak Notatnik i wkleić ten kod.
(function () {
var nav = document.getElementById ('site-navigation'), przycisk, menu;
jeśli ( ! nav ) {
return;
}
button = nav.getElementsByTagName ('button') [0];
menu = nav.getElementsByTagName ('ul') [0];
jeśli ( ! button) {
return;
}
// Ukryj przycisk, jeśli menu nie ma lub jest puste.
jeśli ( ! menu || ! menu.dzieci.length) {
guzik.styl.display = 'none';
return;
}
guzik.onclick = function () {
if (-1 = = = menu.nazwa klasy.indexOf ('NAV-menu')) {
menu.className = 'NAV-menu';
}
if (-1 != = button.nazwa klasy.indexOf ('toggled-on')) {
guzik.className = button.nazwa klasy.replace( 'toggled-on', " );
menu.className = menu.nazwa klasy.replace( 'toggled-on', " );
} else {
guzik.className + = 'toggled-on';
menu.className + = 'toggled-on';
}
};
}) (jQuery);
Teraz musisz zapisać ten plik jako nawigacja.js na pulpicie.
Następnie musisz otworzyć klienta FTP, aby przesłać ten plik do / wp-content / themes / your-theme-dir / js/ folder w Twojej witrynie WordPress.
Zastąp swój-theme-directory katalogiem bieżącego motywu. Jeśli twój katalog motywów nie ma folderu js, musisz go utworzyć.
Po przesłaniu pliku JavaScript następnym krokiem jest upewnienie się, że witryna WordPress ładuje ten JavaScript. Będziesz musiał dodać następujący kod do funkcji motywu.plik php.
wp_enqueue_script ('wpb_togglemenu', get_template_directory_uri (). '/js / nawigacja.js', array ('jquery'), '20160909', true );
Teraz musimy dodać menu nawigacyjne do naszego motywu WordPress. Zazwyczaj menu nawigacyjne jest dodawane do motywu nagłówek.php plik.
<NAV id = "site-navigation" class = "main-navigation" role = "navigation"> < button class="menu-toggle">Menu < / button> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'NAV-menu'));?> < / nav>
Zakładamy, że lokalizacja motywu zdefiniowana przez motyw nazywa się primary. Jeśli tak nie jest, Użyj lokalizacji motywu zdefiniowanej przez motyw WordPress.
Ostatnim krokiem jest dodanie CSS, aby nasze menu używało odpowiednich klas CSS do przełączania, aby działało podczas przeglądania na urządzeniach mobilnych.
/ * Menu Nawigacyjne */
.main-navigation {
margin-top: 24px;
margin-top: 1.714285714 rem;
text-align: center;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714 rem;
font-size: 12px;
font-size: 0.857142857 rem;
line-height: 1.42857143;
}
.main-navigation a {
kolor: # 5e5e5e;
}
.Główna-nawigacja a: hover,
.main-navigation a:focus {
kolor: #21759b;
}
.Główna-nawigacja ul.nav-menu,
.Główna-nawigacja div.nav-menu > ul {
Wyświetlacz: Brak;
}
.Główna-nawigacja ul.nav-menu.toggled-on,
.menu-toggle {
wyświetlacz: inline-block;
}
// CSS do wykorzystania na urządzeniach mobilnych
@media screen and (min-width: 600px) {
.Główna-nawigacja ul.nav-menu,
.Główna-nawigacja div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
wyświetlacz: inline-block !ważne;
text-align: left;
Szerokość: 100%;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
}
.Główna-nawigacja li a,
.main-navigation li {
wyświetlacz: inline-block;
tekst-Dekoracja: Brak;
}
.main-navigation li a {
border-bottom: 0;
kolor: # 6a6a6a;
wysokość linii: 3.692307692;
text-transform: wielkie litery;
white-space: nowrap;
}
.Główna-nawigacja li a: hover,
.main-navigation li a: focus {
kolor: #000;
}
.main-navigation li {
margin: 0 40px 0 0;
margines: 0 2.857142857 rem 0 0;
pozycja: względna;
}
.main-navigation li ul {
margin: 0;
padding: 0;
pozycja: absolutna;
top: 100%;
z-index: 1;
wysokość: 1px;
width: 1px;
przepełnienie: Ukryte;
clip: rect(1px, 1px, 1px, 1px);
}
.main-navigation li ul ul {
top: 0;
pozostało: 100%;
}
.Główna-nawigacja ul li: hover > ul,
.Główna-nawigacja ul li: focus > ul,
.Główna-nawigacja .focus > ul {
border-left: 0;
klip: inherit;
overflow: inherit;
wysokość: Dziedzicz;
szerokość: inherit;
}
.main-navigation li ul li a {
background: # efefef;
border-bottom: 1px solid #ededed;
wyświetlacz: blok;
font-size: 11px;
font-size: 0.785714286 rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571 rem 0.714285714 rem;
width: 180px;
szerokość: 12.85714286 rem;
white-space: normal;
}
.Główna-nawigacja li ul li a: hover,
.main-navigation li ul li a: focus {
background: # e3e3e3;
kolor: # 444;
}
.Główna-nawigacja .current-menu-item > a,
.Główna-nawigacja .current-menu-ancestor > a,
.Główna-nawigacja .current_page_item > a,
.Główna-nawigacja .current_page_ancestor > a {
kolor: # 636363;
font-weight: bold;
}
.menu-toggle {
Wyświetlacz: Brak;
}
}
Możesz teraz odwiedzić swoją witrynę i zmienić rozmiar ekranu przeglądarki, aby zobaczyć responsywne menu przełączania w akcji.
Rozwiązywanie problemów: W zależności od motywu WordPress może być konieczne dostosowanie CSS. Użyj narzędzia inspect element, aby wykryć konflikty CSS z Twoim motywem.
Metoda 4: Dodaj przesuwne Menu mobilne w WordPress
Inną popularną techniką dodawania mobilnego menu jest użycie przesuwanego menu panelu (jak pokazano w metodzie 1).
Metoda 4 wymaga dodania kodu do plików motywów WordPress i jest to po prostu inny sposób na osiągnięcie tych samych wyników, co Metoda 1.
Najpierw musisz otworzyć zwykły edytor tekstu, taki jak Notatnik i dodać następujący kod do pustego pliku tekstowego.
(function ($) {
$('#toggle').toggle(
function () {
$('#popout').animate ({left: 0}, 'slow', function () {
$('#toggle').html ('<img src="https://www.example.com/wp-content/themes/your-theme/images/menu.png" alt = "close"/>');
});
},
function () {
$('#popout').animate ({left: -250 }, 'slow', function () {
$('#toggle').html ('<img src="https://www.example.com/wp-content/themes/your-theme/images/menu.png" alt = "close"/>');
});
}
);
}) (jQuery);
Nie zapomnij wymienić example.com z własną nazwą domeny i Twój-temat z aktualnym katalogiem tematycznym. Zapisz ten plik jako slidepanel.js na pulpit.
Teraz będziesz potrzebował obrazu, który będzie używany jako ikona menu. Ikona hamburgera jest najczęściej używana jako ikona menu. Znajdziesz mnóstwo takich zdjęć z różnych stron internetowych. Będziemy używać ikony menu z biblioteki ikon Google Material.
Po znalezieniu obrazu, którego chcesz użyć, zapisz go jako menu.png.
Następnie musisz otworzyć klienta FTP i przesłać slidepanel.js plik do / wp-content / your-theme / js/ folder.
Jeśli twój katalog motywów nie ma folderu JS, musisz utworzyć tit, a następnie przesłać plik.
Następnie musisz przesłać menu.plik png do / wp-content / themes / your-theme / images/ folder.
Po przesłaniu plików musimy upewnić się, że Twój motyw ładuje właśnie dodany plik JavaScript. Osiągniemy to, pytając o plik JavaScript.
Dodaj ten kod do funkcji motywu.plik php.
wp_enqueue_script ('wpb_slidepanel', get_template_directory_uri (). "/js / slidepanel.js', array ('jquery'), '20160909', true );
Teraz musimy dodać rzeczywisty kod w nagłówku Twojego motywu.plik php do wyświetlenia menu nawigacyjnego. Powinieneś poszukać kodu podobnego do tego:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'NAV-menu'));?>
Chcesz owinąć istniejące menu nawigacyjne kodem HTML, aby wyświetlić menu panelu slajdów na mniejszych ekranach.
< div id = "toggle"> <img src="https://www.example.com/wp-content/themes/your-theme/images/menu.png" alt = "Pokaż" / > < / div> < div id = "popout"> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'NAV-menu'));?> < / div>
Zauważ, że menu nawigacyjne Twojego motywu nadal tam jest. Właśnie owinęliśmy go wokół HTML, że musimy uruchomić menu slidepanel.
Ostatnim krokiem jest dodanie CSS, aby ukryć ikonę obrazu menu na większych ekranach. Będziesz także musiał dostosować pozycję ikony menu.
Oto przykładowy CSS, którego możesz użyć jako punktu wyjścia:
@ media screen and (min-width: 769px) {
# toggle {
Wyświetlacz: Brak;
}
}
@ media screen and (max-width: 768px) {
popout {
pozycja: stała;
wysokość: 100%;
width: 250px;
tło: rgb (25, 25, 25);
tło: rgba(25, 25, 25,.9);
Kolor: Biały;
top: 0px;
left:- 250px;
przepełnienie: auto;
}
# toggle {
float: right;
pozycja: stała;
top: 60px;
/ align = "left" / 45px;
/ width = 28px / ;
wysokość: 24px;
}
.nav-menu li {
border-bottom: 1px solid #eee;
padding: 20px;
Szerokość: 100%;
}
.nav-menu li: hover {
tło: # CCC;
}
.nav-menu li a {
color: # FFF;
tekst-Dekoracja: Brak;
Szerokość: 100%;
}
}
W zależności od motywu WordPress może być konieczne dostosowanie CSS, aby uniknąć konfliktów.
Oto jak to wyglądało na naszej stronie demo:
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak stworzyć responsywne menu WordPress gotowe na urządzenia mobilne. Możesz również zobaczyć nasz przewodnik, Jak dodać responsywne menu pełnoekranowe w WordPress
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
