System menu WordPress ma wbudowaną funkcję, która pozwala dodawać opisy do pozycji menu. Jednak ta funkcja jest domyślnie ukryta. Nawet po jej włączeniu, wyświetlanie ich nie jest obsługiwane bez dodania kodu. Większość motywów nie jest zaprojektowana z myślą o opisach pozycji menu. W tym artykule pokażemy, jak włączyć opisy menu w WordPress i jak dodać opisy menu w Twoich motywach WordPress.
Uwaga: Ten samouczek wymaga od Ciebie dobrego zrozumienia HTML, CSS i tworzenia motywów WordPress.
Kiedy i dlaczego warto dodawać opisy menu?
Niektórzy użytkownicy uważają, że dodanie opisu menu pomoże w SEO. Jednak uważamy, że głównym powodem, dla którego warto ich używać, jest zapewnienie lepszego doświadczenia użytkownika na Twojej stronie.
Opisy mogą być używane do informowania odwiedzających, co znajdą, jeśli klikną na pozycję menu. Intrygujący opis zachęci więcej użytkowników do klikania w menu.
Krok 1: Włącz opisy menu
Przejdź do Wygląd » Menu. Kliknij przycisk Opcje ekranu w prawym górnym rogu strony. Zaznacz pole Opisy.
To włączy pole opisów w twoich elementach menu. Tak jak to:
Teraz możesz dodawać opisy do elementów menu w swoim menu WordPress. Jednak te opisy nie pojawią się jeszcze w Twoich motywach. Aby wyświetlić opisy menu, będziemy musieli dodać trochę kodu.
Krok 2: Dodaj klasę wykonawcy:
Klasa Walker rozszerza istniejącą klasę w WordPress. W zasadzie dodaje linię kodu do wyświetlania opisów elementów menu. Dodaj ten kod do pliku functions.php Twojego motywu.
class Menu_With_Description extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Krok 3. Włączanie Walkera w wp_nav_menu
Motywy WordPress używają funkcji wp_nav_menu() do wyświetlania menu. Opublikowaliśmy również samouczek dla początkujących o tym, jak dodawać niestandardowe menu nawigacyjne w motywach WordPress. Większość motywów WordPress dodaje menu w szablonie header.php. Jednak możliwe jest, że Twój motyw użył innego pliku szablonu do wyświetlania menu.
Teraz musimy znaleźć funkcję wp_nav_menu() w twoim motywie (najprawdopodobniej w header.php) i zmienić ją w ten sposób.
<?php $walker = new Menu_With_Description; ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
W pierwszej linii ustawiamy $walker tak, aby używał klasy walker, którą wcześniej zdefiniowaliśmy w functions.php. W drugiej linii kodu jedynym dodatkowym argumentem, który musimy dodać do naszych istniejących argumentów wp_nav_menu, jest 'walker' => $walker.
Krok 4. Stylizowanie opisów
Klasa walker, którą dodaliśmy wcześniej, wyświetla opisy elementów w tej linii kodu:
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
Powyższy kod dodaje łamanie linii do pozycji menu poprzez dodanie znacznika
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">About<br /><span class="sub">Who are we?</span></a></li>
Aby zmienić sposób wyświetlania opisów na Twojej stronie, możesz dodać CSS do arkusza stylów swojego motywu. Testowaliśmy to na Twenty Twelve i użyliśmy tego CSS.
.menu-item {
border-left: 1px solid #ccc;
}
span.sub {
font-style:italic;
font-size:small;
}
Mamy nadzieję, że ten artykuł okaże się przydatny i pomoże Ci tworzyć fajnie wyglądające menu z opisami menu w Twoim motywie. Pytania? Zostaw je w komentarzach poniżej.
Dodatkowe zasoby
Jak stylizować menu nawigacyjne WordPress
Jak dodać niestandardowe elementy do konkretnych menu WordPress
Menu z klasą opisu Billa Ericksona
Matthew Blaxton
W PHP 8.0 i nowszych spowoduje to krytyczny błąd.
Musisz znaleźć tę linię:
function start_el( $output, $item, $depth, $args ) {
Zmiana tej linii na poniższą powinna spowodować zniknięcie błędu:
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
Wsparcie WPBeginner
Dziękuję za udostępnienie tego dla użytkowników PHP 8.
Admin
Norman
Cześć,
Jak można sprawić, aby opis również był klikalny?
Wsparcie WPBeginner
We cover that in step 4
Admin
kayvan A.Gilani
Aby dodać opisy menu w moich motywach WordPress, wykonałem kroki 1 i 2 tego bloga, ale nie mogłem postępować zgodnie z krokiem 3, aby przejść dalej i dokonać całkowitej zmiany.
Wsparcie WPBeginner
Jeśli nie możesz znaleźć funkcji w swoim motywie, zalecamy skontaktowanie się z pomocą techniczną swojego konkretnego motywu, a oni powinni być w stanie pomóc.
Admin
yiannis
Cześć,
Jak wyłączyć opis kategorii produktów w Max Mega Menu?
Poszedłem już do Mega Menu > Ustawienia ogólne i ustawiłem Opisy elementów menu na wyłączone, ale problem nadal występuje.
Wsparcie WPBeginner
Powinieneś skontaktować się z pomocą techniczną wtyczki, a oni będą w stanie pomóc z ustawieniem, które nie działa poprawnie
Admin
Sergio
Dziękuję bardzo!
Wsparcie WPBeginner
You’re welcome
Admin
Lanka
Dziękuję bardzo, uratowałeś mnie
JKLYN
Dzięki. Oszczędziłeś mi czas.
dan
Czy to może działać z WP_Bootstrap_Navwalker?
ponieważ próbowałem i to psuje moją stronę....
kalpana
Dziękuję bardzo... było dla mnie bardzo pomocne... uratowałeś mi dzień
Steven
jak wyłączyć opis w układzie mobilnym?
Anzani Zahrani
Witaj.. Proszę o pomoc..
Jak dodać tytuł kategorii, nie używając opisu tytułu kategorii ?
Ido Schacham
Całkowicie pomocne, dzięki!
Rahman
Świetna wskazówka, ale opis menu nie obsługuje tagów HTML. Czy ktoś o tym wie?
Dzięki
Iryna
Cześć wszystkim,
Jakieś pomysły, jak zezwolić na tagi HTML w opisie?
remove_filter(‘nav_menu_description’, ‘strip_tags’);
Ten kod mi nie działa.
Damien Carbery
@Iryna: Czy możesz opublikować swój kod gdzieś, np. na pastebin.com.
Miejsce, w którym wywołasz remove_filter() zadecyduje, czy zadziała – musi być wywołane po wywołaniu add_filter().
Wywołanie go tuż przed wywołaniem wp_nav_menu() może zadziałać.
Max
Czy jest jakiś sposób, aby opis nie był hiperłączem?
Ashok
dzięki... zadziałało. ale opis menu nie obsługuje tagów html.
igorasas
Czy może już tam być gotowy do podłączenia? Jak ten hack będzie działał z motywem „Twenty TwelveWersja: 1.5”
? I tak samo jak z wtyczką wpml?
Guy
Dzięki za wskazówkę
Phong
Dziękuję, to było naprawdę pomocne, po prostu skopiowałem to i uzyskałem szybki obraz.
Chad
Hej, dodałem klasę walker do functions.php, ale nie mogę znaleźć wp_nav_menu w motywie genesis. Coś przeoczyłem? Nie mam pojęcia, co robić dalej?!?!
Ksenia
Wyjaśniasz bardzo dobrze – szczegółowo i jasno. Opisy pozycji menu i 1 minuta są w porządku. Dziękuję!
Mary Anne
Dziękuję bardzo za ten tutorial. Został mi polecony i zadziałał idealnie, wprowadzając zmiany, które chciałem wprowadzić. Jednak wprowadzając te zmiany, straciłem moje rozwijane menu podrzędne. Czy masz pomysł, co wpłynęło na to w zmianie kodu?
Dziękuję za Twój czas i tutorial
Wsparcie WPBeginner
Wygląda na problem z CSS, przepraszamy, że nie mogliśmy być bardziej szczegółowi. Spróbuj użyć narzędzi deweloperskich Google Chrome do debugowania.
Admin
Paul Renault
Zaimplementowałem opisy menu i działało świetnie. Teraz mój klient prosi o łamanie linii w jednym z opisów. Próbowałem wstawić powrót karetki i tag w pole opisu przez administratora. Nie pojawia się na stronie front-end. WP usuwa te edycje. Czy jest sposób, aby to naprawić?
Wsparcie WPBeginner
Jeśli twój klient potrzebuje tylko odstępu, możesz użyć do tego CSS.
Admin
Paul Renault
Klient chce łamania linii. Czy jest sposób, abym mógł wstawić tag w opisie? Jeśli go teraz wstawię, zostanie usunięty.
Barry
Świetny tutorial, chłopaki, chcę tylko wiedzieć, jak zaimplementować to w niestandardowym menu wyświetlanym za pomocą widżetu Custom Menu?
Oryan Consulting
Dziękuję! Pracuję z WordPressem od lat i nigdy o tym nie słyszałem. Chciałem usunąć opisy, ponieważ były bardzo redundantne na stronie, nad którą pracuję. Szukałem wszędzie, skąd pochodziły.
Och, radości!
sambassador
działa!
ale dla php 5.4 będziesz musiał dopasować argumenty wp walker dla funkcji start_el:
function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 )
i zamień $item na $object.
Steve Covello
Jesteście super!! Działało idealnie.
Kevin Gilbert
Doskonale. Tego właśnie potrzebowałem, aby dokończyć pracę nad stroną. Miałem pewne problemy z CSS, ale w końcu udało mi się je rozwiązać i sprawić, że działa. Dziękuję za świetne artykuły.
Jon
Doskonała wskazówka. Działa idealnie!
Jedediah White
To zadziałało dla mnie idealnie. Funkcja klasy jest również doskonała. Wielkie dzięki!
Pankaj
Musiałem stworzyć to samo i byłem całkowicie zagubiony.
Planowałem zrobić kilka głupich rzeczy, żeby to załatwić.
dzięki bogu znalazłem ten post i zaoszczędziłem czas i stres!
Po prostu uwielbiam tę stronę, dowiedziałem się tyle rzeczy.
Dziękuję bardzo za pokazanie najprostszych rzeczy tutaj.
Pankaj
Tag span pojawia się również w podmenu.
nie pokazuje się tam, ale zajmuje tyle miejsca, że wygląda to zbyt dziwnie.
czy jest jakieś obejście tego samego??
DiTesco
To naprawdę świetny tutorial i zastanawiałem się, czy zadziałałby na Thesis 1.8.5? Jeśli nie, byłoby wspaniale, gdybyś mógł taki dostarczyć. Z pewnością pomogę Ci go opublikować. Kciuk w górę!
svet
Podążyłem za Twoim tutorialem i dodałem opis do mojego menu. Dzięki! Jednak, gdy jestem w trybie mobilnym, menu konwertuje się na menu rozwijane, a tytuł menu i opis są połączone. Na przykład, jeśli moim elementem menu jest „o nas”, a opis „więcej o mnie”, wersja mobilna pokazuje „o naswięcej o mnie”. Czy jest sposób, aby to naprawić?
David
Miałem ten sam problem. Oto, co zrobiłem.
Zmieniłem to:
$description = ! empty( $item->description ) ? ‘’.esc_attr( $item->description ).'’ : ”;
Do tego:
$description = ! empty( $item->description ) ? ‘<br /><span>’.esc_attr( $item->description ).'</span>’ : ”;
Nie jestem pewien, czy to najlepsze rozwiązanie, ale u mnie zadziałało.
Garrett Hyder
Dzięki chłopaki, natknąłem się na to, co SVET i DAVID zrobili z menu mobilnym.
Kod wydaje się zmienić moją zmianę, polegała ona po prostu na dodaniu w elemencie span z separatorem myślnika, a w moim zapytaniu na pulpicie po prostu go ukryłem, ponieważ nie był tam potrzebny.
$item_output .= ‘ – ‘;
W moim zestawie zapytań tylko na pulpit ustaw span na display none;
@media only screen and (min-width: 740px) {
header #submenu li span.dash { display:none; }
Mam nadzieję, że to pomoże, świetnie rozwiązało mój problem.
Nicola
Świetny post – bardzo jasny, dokładnie to, czego potrzebowałem i działał idealnie. Dziękuję!
Samedi Amba
Dzięki za świetny tutorial. Wykonałem główne kroki dobrze, jak widać z
http://ueab.ac.ke/demo/index
Utknąłem ze stylami - jak zmniejszyć odstęp między etykietą Menu Głównego a opisem? Będę bardzo wdzięczny za pomoc.
Personel redakcyjny
Ma to związek z wysokością linii Twojej klasy .menu a w Twoim motywie. Jeśli ją zmniejszysz, odstępy również się zmniejszą.
Admin
Chris Rouse
Świetny post. Próbowałem się w to zagłębić wcześniej, ale poprzednie instrukcje, które znalazłem, nie były tak łatwe do naśladowania. Udało mi się wkleić kod do functions.php, dowiedzieć się, jak zmienić klasę walker w moim pliku nagłówka (inną dla używanego przeze mnie motywu, ale prostą) i uruchomić rzeczy w około 15 minut od początku do końca.
Jedną rzeczą, którą możesz chcieć dodać, jest to, jak uwzględnić prawy pasek na ostatnim elemencie menu za pomocą właściwości :last-child.
.menu-item:last-child { border-right: 1px solid #ccc; }
Damien Carbery
Zamiast rozszerzać Walker_Nav_Menu, byłoby miło (i łatwiej), gdyby istniał filtr, na przykład:
Gdyby kod rdzenia zawierał:
$item_output .= apply_filters( ‘walker_nav_menu_description’, $item->description);
Wtedy niestandardowa funkcja filtra zawierałaby tylko:
return ” . $description . ”;
Cathy Earle
Świetne informacje… zacznę dodawać to do moich stron. Dziękuję!