Sistemul de meniuri WordPress are o funcționalitate încorporată prin care puteți adăuga descrieri la elementele de meniu. Cu toate acestea, această funcționalitate este ascunsă implicit. Chiar și atunci când este activată, afișarea lor nu este suportată fără a adăuga cod. Majoritatea temelor nu sunt concepute având în vedere descrierile elementelor de meniu. În acest articol vă vom arăta cum să activați descrierile meniurilor în WordPress și cum să adăugați descrieri de meniu în temele dumneavoastră WordPress.
Notă: Acest tutorial necesită să aveți o înțelegere corectă a HTML, CSS și a dezvoltării temelor WordPress.
Când și de ce ai dori să adaugi descrieri de meniuri?
Unii utilizatori cred că adăugarea descrierii meniului ajută la SEO. Cu toate acestea, credem că principalul motiv pentru care ați dori să le utilizați este să oferiți o experiență mai bună utilizatorului pe site-ul dvs.
Descrierile pot fi folosite pentru a spune vizitatorilor ce vor găsi dacă dau clic pe un element de meniu. O descriere intrigantă va atrage mai mulți utilizatori să dea clic pe meniuri.
Pasul 1: Activați Descrierile Meniului
Accesați Aspect » Meniuri. Faceți clic pe butonul Opțiuni ecran din colțul din dreapta sus al paginii. Bifați caseta Descrieri.
Acest lucru va activa câmpul de descrieri în elementele meniului tău. Ca acesta:
Acum puteți adăuga descrieri la elementele meniului în meniul dvs. WordPress. Cu toate acestea, aceste descrieri nu vor apărea încă în temele dvs. Pentru a afișa descrierile meniului, va trebui să adăugăm niște cod.
Pasul 2: Adaugă clasa walker:
Clasa Walker extinde clasa existentă în WordPress. Practic, adaugă doar o linie de cod pentru a afișa descrierile elementelor de meniu. Adăugați acest cod în fișierul functions.php al temei dvs.
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 );
}
}
Pasul 3. Activarea Walker în wp_nav_menu
Teme WordPress folosesc funcția wp_nav_menu() pentru a afișa meniuri. De asemenea, am publicat un tutorial pentru începători despre cum să adăugați meniuri de navigare personalizate în temele WordPress. Majoritatea temelor WordPress adaugă meniuri în fișierul de șablon header.php. Cu toate acestea, este posibil ca tema dvs. să fi folosit un alt fișier de șablon pentru a afișa meniuri.
Ceea ce trebuie să facem acum este să găsim funcția wp_nav_menu() în tema ta (cel mai probabil în header.php) și să o modificăm astfel.
<?php $walker = new Menu_With_Description; ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
În prima linie setăm $walker să folosească clasa walker definită anterior în functions.php. În a doua linie de cod, singurul argument suplimentar pe care trebuie să-l adăugăm argumentelor noastre existente wp_nav_menu este 'walker' => $walker.
Pasul 4. Stilul descrierilor
Clasa walker pe care am adăugat-o anterior afișează descrierile elementelor la această linie de cod:
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
Codul de mai sus adaugă o linie nouă la elementul de meniu prin adăugarea unei etichete
<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>
Pentru a schimba modul în care apar descrierile dvs. pe site-ul dvs., puteți adăuga CSS în foaia de stil a temei dvs. Am testat acest lucru pe Twenty Twelve și am folosit acest css.
.menu-item {
border-left: 1px solid #ccc;
}
span.sub {
font-style:italic;
font-size:small;
}
Sperăm că veți găsi acest articol util și vă va ajuta să creați meniuri cu aspect cool cu descrieri de meniu în tema dvs. Întrebări? Lăsați-le în comentariile de mai jos.
Resurse suplimentare
Cum să stilizezi meniurile de navigare WordPress
Cum să adăugați elemente personalizate la meniuri WordPress specifice
Meniuri cu clasa de descriere de la Bill Erickson
Matthew Blaxton
În PHP 8.0 și versiunile superioare, acest lucru va genera o eroare critică.
Trebuie să găsești această linie:
function start_el( $output, $item, $depth, $args ) {
Schimbarea acelei linii cu următoarea ar trebui să facă eroarea să dispară:
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
Suport WPBeginner
Mulțumesc pentru că ați împărtășit asta pentru cei de pe PHP 8.
Admin
Norman
Salut,
Cum pot face și descrierea să fie clicabilă?
Suport WPBeginner
We cover that in step 4
Admin
kayvan A.Gilani
Pentru a adăuga descrieri de meniu în temele mele WordPress, am urmat pașii 1 și 2 ai acestui blog, dar nu am putut urma pasul 3 pentru a merge mai departe și a efectua schimbarea totală.
Suport WPBeginner
Dacă nu puteți găsi funcția în tema dvs., vă recomandăm să contactați suportul temei dvs. specifice și aceștia ar trebui să vă poată ajuta.
Admin
yiannis
Salut,
Cum să dezactivez descrierea categoriei de produse în max mega menu?
Am mers deja la Mega Menu > Setări generale și am setat Descrierile elementelor de meniu la dezactivat, dar problema persistă.
Suport WPBeginner
Ar trebui să contactați suportul plugin-ului și aceștia ar putea să vă ajute cu setarea care nu funcționează corect
Admin
Sergio
Mulțumesc foarte mult!
Suport WPBeginner
You’re welcome
Admin
Lanka
Mulțumesc mult, m-ai salvat
JKLYN
Mulțumesc. Mi-ați economisit timp.
dan
Poate funcționa cu WP_Bootstrap_Navwalker?
așa cum am încercat și îmi strică site-ul....
kalpana
Vă mulțumesc foarte mult... a fost foarte util pentru mine... mi-ați salvat ziua
Steven
cum să dezactivezi descrierea în aspectul mobil?
Anzani Zahrani
Salut.. Vă rog să mă ajuta..
Cum să adaug o categorie de titlu, fără a folosi descrierea categoriei de titlu?
Ido Schacham
Total util, mulțumesc!
Rahman
Sfat grozav, dar în descrierea meniului nu suportă etichete html. Știe cineva despre asta?
Mulțumesc
Iryna
Salut băieți,
Aveți idei cum să permit etichete html în descriere?
remove_filter(‘nav_menu_description’, ‘strip_tags’);
aceasta nu funcționează pentru mine.
Damien Carbery
@Iryna: Poți să-ți postezi codul undeva, de ex. pastebin.com.
Locul unde apelezi remove_filter() va determina dacă funcționează – trebuie apelat după apelul add_filter().
Apelarea lui chiar înainte de apelul wp_nav_menu() ar putea funcționa.
Max
Există vreo modalitate ca descrierea să nu fie hiperlegată?
Ashok
mulțumesc... a funcționat. dar în descrierea meniului nu suportă etichete html.
igorasas
Poate fi deja acolo gata de conectat? Cum va funcționa acest hack cu tema „Twenty TwelveVersiune: 1.5”
? Și la fel ca și cu pluginul wpml?
Guy
Mulțumesc pentru pont
Phong
Mulțumesc, a fost foarte util să copiez și să lipesc asta pentru a obține o imagine rapidă.
Chad
Salut, am adăugat clasa walker în functions.php, dar nu găsesc wp_nav_menu în tema Genesis. Ce îmi lipsește? Nu am idee ce să fac în continuare?!?!
Ksenia
Explici foarte bine – detaliat și clar. Descrierile elementelor de meniu și cele de 1 minut sunt în regulă. Mulțumesc!
Mary Anne
Vă mulțumesc foarte mult pentru acest tutorial. Mi-a fost recomandat și a funcționat perfect pentru a face modificările pe care doream să le fac. Cu toate acestea, făcând aceste modificări, mi-am pierdut meniurile derulante cu sub-elemente. Aveți idee ce a afectat asta în modificarea codului?
Vă mulțumesc pentru timpul acordat și pentru tutorial
Suport WPBeginner
Pare a fi o problemă CSS, ne pare rău că nu am putut fi mai specifici. Încearcă să folosești instrumentele pentru dezvoltatori ale Google Chrome pentru a o depana.
Admin
Paul Renault
Am implementat descrierile meniului și a funcționat grozav. Acum clientul meu cere o linie nouă în interiorul uneia dintre descrieri. Am încercat să pun un retur de car și să inserez o etichetă
în câmpul de descriere prin administrator. Nu apare pe front-end. WP elimină aceste modificări. Există o modalitate de a remedia acest lucru?
Suport WPBeginner
Dacă clientul tău dorește doar spațiere, atunci poți folosi CSS pentru asta.
Admin
Paul Renault
Clientul dorește o linie nouă. Există o modalitate de a insera o etichetă în descriere? Dacă pun una acum, este eliminată.
Barry
Tutorial grozav, băieți, doar vreau să știu cum să implementez asta pe un meniu personalizat afișat folosind widget-ul Meniu Personalizat?
Oryan Consulting
Mulțumesc! Lucrez la WordPress de ani de zile și nici măcar nu am auzit de asta înainte. Căutam să elimin descrierile, deoarece erau foarte redundante pe site-ul la care lucrez. Am căutat peste tot de unde veneau.
Oh, bucurie!
sambassador
funcționează!
dar pentru php 5.4 va trebui să potriviți argumentele wp walker pentru funcția start_el:
function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 )
și înlocuiți $item cu $object.
Steve Covello
Ești grozav!! A funcționat perfect.
Kevin Gilbert
Perfect. Acesta a fost exact ceea ce aveam nevoie pentru a finaliza un site. Am avut câteva probleme cu CSS, dar în cele din urmă am rezolvat-o și am făcut-o să funcționeze. Mulțumiri pentru articolele grozave.
Jon
Sfat excelent. A funcționat perfect!
Jedediah White
Acest lucru a funcționat perfect pentru mine. Funcția de clasă este perfectă, de asemenea. Mulțumesc mult!
Pankaj
A trebuit să creez același lucru și am fost complet pierdut.
Planificam să fac niște lucruri stupide pentru a rezolva această problemă.
Slavă Domnului că am găsit acest post și mi-am economisit timp și stres!
Pur și simplu iubesc acest site, am aflat atâtea lucruri.
Vă mulțumesc mult pentru că ați arătat cele mai simple lucruri aici.
Pankaj
Eticheta span apare și pe sub-meniuri.
nu se afișează acolo, dar ocupă mult spațiu, ceea ce îl face să pară prea ciudat.
există vreo soluție pentru același lucru??
DiTesco
Acesta este într-adevăr un tutorial grozav și mă întrebam dacă ar funcționa pe Thesis 1.8.5? Dacă nu, ar fi grozav dacă ați putea oferi unul. Cu siguranță vă voi ajuta să-l publicați. Bravo!
svet
Am urmat tutorialul dvs. și am adăugat descrieri la meniul meu. Mulțumesc! Totuși, când sunt în modul mobil, meniul se transformă într-un meniu derulant, iar titlul și descrierea meniului sunt conectate. De exemplu, dacă elementul meu de meniu este „despre” și descrierea „mai multe despre mine”, versiunea mobilă afișează „despremai multe despre mine”. Există o modalitate de a remedia acest lucru?
David
Am avut aceeași problemă. Iată ce am făcut.
Am schimbat asta:
$description = ! empty( $item->description ) ? ‘<span>’.esc_attr( $item->description ).'</span>’ : ”;
La aceasta:
$description = ! empty( $item->description ) ? ‘<br /><span>’.esc_attr( $item->description ).'</span>’ : ”;
Nu sunt sigur dacă este cea mai bună soluție, dar a funcționat pentru mine.
Garrett Hyder
Mulțumesc băieți, am întâlnit ceea ce SVET și DAVID au făcut cu meniul mobil.
Codul pare să fi schimbat modificarea mea a fost pur și simplu adăugarea într-un span cu separatorul dash și în interogarea mea desktop pur și simplu l-am suprima, deoarece nu era necesar acolo.
$item_output .= ‘ – ‘;
În setul meu de interogare Desktop Only, setați span la display none;
@media only screen and (min-width: 740px) {
header #submenu li span.dash { display:none; }
Sper că ajută, mi-a rezolvat problema frumos.
Nicola
Postare grozavă – foarte clară, exact ce aveam nevoie și a funcționat perfect. Mulțumesc!
Samedi Amba
Mulțumesc pentru tutorialul grozav. Am făcut pașii majori bine, așa cum puteți vedea de pe
http://ueab.ac.ke/demo/index
Mă blocasem la stilizare – cum reduc spațiul dintre eticheta meniului principal și descriere? Ajutorul dumneavoastră este foarte apreciat.
Personal editorial
Are legătură cu înălțimea liniei clasei dvs. .menu a din tema dvs. Dacă o reduceți, spațiul se va reduce singur.
Admin
Chris Rouse
Postare grozavă. Am încercat să aprofundez acest subiect înainte, dar instrucțiunile anterioare pe care le-am găsit nu au fost atât de ușor de urmat. Am reușit să introduc codul functions.php, să înțeleg cum să schimb clasa walker în fișierul meu header (diferit pentru tema pe care o folosesc, dar simplu) și să pun lucrurile în mișcare în aproximativ 15 minute de la început până la sfârșit.
Un aspect pe care ați putea dori să-l adăugați este cum să includeți marginea dreaptă la ultimul element de meniu folosind proprietatea :last-child.
.menu-item:last-child { border-right: 1px solid #ccc; }
Damien Carbery
În loc să extindem Walker_Nav_Menu ar fi frumos (și mai ușor) dacă s-ar oferi un filtru, de ex.
Dacă codul de bază ar avea:
$item_output .= apply_filters( ‘walker_nav_menu_description’, $item->description);
Atunci funcția de filtrare personalizată ar avea doar:
return ” . $description . ”;
Cathy Earle
Informații grozave… voi începe să adaug asta pe site-urile mele. Mulțumesc!