Niedawno jeden z naszych użytkowników zapytał nas, jak mogą zastąpić swoje menu nawigacyjne menu jQuery slide panel? Menu panelu slajdów może być używane w celu znacznej poprawy komfortu korzystania z witryn mobilnych. W tym artykule pokażemy, jak dodać menu panelu slajdów w WordPress themes.
Uwaga: jest to samouczek na poziomie średniozaawansowanym i wymaga wystarczającej wiedzy HTML i CSS.
Zastąpienie domyślnego Menu menu panelu slajdów w WordPress
Celem jest pokazanie menu panelu slajdów użytkownikom na mniejszych ekranach, zachowując domyślne menu naszego motywu, aby użytkownicy laptopów i komputerów stacjonarnych mogli zobaczyć pełne menu. Zanim zaczniemy, ważne jest, aby wiedzieć, że istnieje wiele różnych motywów WordPress, a później będziesz musiał poradzić sobie z odrobiną CSS.
Pierwszą rzeczą, którą musisz zrobić, to otworzyć zwykły edytor tekstu na komputerze, taki jak Notatnik, i utworzyć nowy plik. Skopiuj i wklej ten kod:
(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);
Zastąp example.com z własną nazwą domeny, a także zastąpić Twój-temat z aktualnym katalogiem tematycznym. Zapisz ten plik jako slidepanel.js na pulpicie. Ten kod używa jQuery do przełączania menu panelu slajdów. Animuje również efekt przełączania.
Otwórz klienta FTP, takiego jak Filezilla i połącz się ze swoją witryną. Następnie przejdź do katalogu motywów i jeśli ma folder js, otwórz go. Jeśli twój katalog motywów nie ma folderu js, musisz go utworzyć i przesłać slidepanel.plik js do folderu js.
Następnym krokiem jest zaprojektowanie lub znalezienie ikony menu. Najczęściej używaną ikoną menu jest ta z trzema liniami. Możesz utworzyć go za pomocą Photoshopa lub znaleźć jeden z wielu istniejących obrazów z google. W tym samouczku używamy ikony menu 27x23px. Po utworzeniu lub znalezieniu ikony menu zmień jej nazwę na menu.png i prześlij go do folderu images w katalogu motywów.
Następnym krokiem jest zapytanie pliku javascript dla panelu slajdów w WordPress. Po prostu skopiuj i wklej ten kod w swoim motywie funkcje.php plik.
wp_enqueue_script ('wpb_slidepanel', get_template_directory_uri (). "/js / slidepanel.js', array ('jquery'), '20131010', true );
Teraz, gdy wszystko jest ustawione, musisz zmodyfikować domyślne menu motywu. Zazwyczaj większość motywów wyświetla menu nawigacji w temacie nagłówek.php plik. Otwórz nagłówek.php plik i znajdź linię podobną do tej:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'NAV-menu'));?>
Celem jest owinąć menu nawigacyjne motywu kodem HTML, aby wyświetlić menu panelu slajdów na mniejszych ekranach. Zapakujemy go w < div id = "toggle"> oraz < div id = "popout">. O tak.:
<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>
Zastąp example.com z własną nazwą domeny i Twoim-theme z katalogiem motywów. Zapisz zmiany.
Ostatnim krokiem jest użycie CSS do ukrycia ikony menu dla użytkowników z większymi ekranami i wyświetlania jej użytkownikom z mniejszymi ekranami. Musimy również dostosować pozycję ikony menu i wygląd panelu slajdów. Skopiuj i wklej ten CSS do arkusza stylów szablonu.
@ 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%;
}
}
Pamiętaj, że menu nawigacyjne motywu może używać różnych klas CSS i mogą one kolidować z tym stylem CSS. Możesz jednak rozwiązać te problemy, korzystając z narzędzia Inspektor Chrome, aby dowiedzieć się, które klasy css są sprzeczne w Twoim arkuszu stylów. Baw się z CSS, aby dopasować swój styl i potrzeby.
Mamy nadzieję, że ten samouczek pomógł Ci dodać menu panelu slajdów w WordPress za pomocą jQuery. Aby uzyskać opinie i pytania, zostaw komentarz poniżej i nie zapomnij śledzić nas na Google+
