Cum să adăugați descrieri de meniu în temele WordPress

Sistemul de meniuri WordPress are o funcție încorporată în care puteți adăuga descrieri cu elemente de meniu. Cu toate acestea, această funcție este ascunsă în mod implicit. Chiar și atunci când este activată, afișarea acestora nu este acceptată fără adăugarea unui cod. Cele mai multe teme nu sunt concepute cu descrieri de meniu-elemente. În acest articol vă vom arăta cum să activați descrierile de meniu în WordPress și cum să adăugați descrieri de meniu în temele WordPress.

Notă: Acest tutorial necesită o înțelegere corectă a dezvoltării temelor HTML, CSS și WordPress.

Când și de ce doriți să adăugați descrieri de meniu?

Unii utilizatori consideră că adăugarea descrierii meniului va ajuta la SEO. Cu toate acestea, considerăm că principalul motiv pentru care doriți să le utilizați este să oferiți utilizatorilor o experiență mai bună pe site-ul dvs..

Descrierile pot fi folosite pentru a spune vizitatorilor ce vor găsi dacă au făcut clic pe un element din meniu. O descriere interesantă va atrage mai mulți utilizatori să facă clic pe meniuri.

Pasul 1: Activați descrierile meniului

Mergi la Aspect »Meniuri. Click pe Opțiuni ecran în colțul din dreapta sus al paginii. Verifică descrieri cutie.

Acest lucru va permite câmpul descrierilor din elementele de meniu. Asa:

Acum puteți adăuga descrieri de meniu la elementele din meniul WordPress. Cu toate acestea, aceste descrieri nu vor apărea încă în temele dvs. Pentru a afișa descrierile de meniuri, va trebui să adăugăm un cod.

Pasul 2: Adăugați clasa Walker:

Clasa Walker extinde clasa existentă în WordPress. În principiu, doar adaugă o linie de cod pentru a afișa descrierile elementelor de meniu. Adăugați acest cod în temele dvs. functions.php fişier.

 clasa Menu_With_Description prelungește Walker_Nav_Menu funcția start_el (& $ output, $ item, $ depth, $ args) global $ wp_query; $ indent = ($ adâncime)? str_repeat ("\ t", adâncime $): "; $ class_names = $ value ="; $ classes = goale ($ item-> classes)? array (): (matrice) $ item-> classes; $ class_names = se alăture (", apply_filters ('nav_menu_css_class', array_filter ($ classes), $ item)); $ class_names = ''; $ output. = $ indent ';„; $ atribute =! gol ($ item-> attr_title)? '': '; $ atributele. =! goale ($ item-> target)?' target = "'. esc_attr ($ item-> target). '' ': "; atribute $. = =! gol ($ item-> xfn)? 'rel =' '. esc_attr ($ item-> xfn).' ''; '; $ attributes = = empty ($ item-> url)?' href = "'. esc_attr ($ item-> url). '' ': "; $ item_output = $ args-> înainte; $ item_output. = ''; $ item_output. = $ args-> link_before. apply_filters ('the_title', $ item-> title, $ item-> ID). $ Args-> link_after; $ item_output. = '
". $ item-> description. ''; $ item_output. = ''; $ item_output. = $ args-> după; $ output = = apply_filters ('walker_nav_menu_start_el', $ item_output, $ item, $ depth, $ args);  

Pasul 3. Activați Walker în wp_nav_menu

Temele WordPress utilizează funcția wp_nav_menu () pentru afișarea meniurilor. De asemenea, am publicat un tutorial pentru începători despre cum să adăugați meniuri de navigare personalizate în teme WordPress. Cele mai multe teme WordPress adaugă meniuri în header.php șablon. Cu toate acestea, este posibil ca tema dvs. să fi folosit un alt fișier de șablon pentru a afișa meniuri.

Trebuie să găsim acum ceea ce trebuie să facem acum wp_nav_menu () funcția în tema dvs. (cel mai probabil în header.php) și schimbați-o astfel.

   'primar', 'menu_class' => 'nav-meniu', 'walker' => $ walker)); ?> 

În prima linie am stabilit $ Walker să folosim clasa Walker pe care am definit-o mai devreme functions.php. În al doilea rând de cod, singurul argument suplimentar pe care trebuie să-l adăugăm la argumentele wp_nav_menu existente este 'Walker' => $ Walker.

Pasul 4. Modelarea descrierilor

Clasa Walker pe care am adăugat-o mai devreme afișează descrierile articolelor la acest rând de cod:

 $ item_output. = '
". $ item-> description. ''; 

Codul de mai sus adaugă o rupere de linie la elementul de meniu prin adăugarea unui element
etichetați și apoi împachetează descrierile într-o perioadă de timp cu clasa sub. Asa:

 
Despre
Cine suntem noi?
 

Pentru a schimba modul în care descrierile apar pe site-ul dvs., puteți adăuga CSS în foaia de stil a temei. Testează asta pe Twenty Twelve și folosește acest css.

 .meniu-element border-left: 1px solid #ccc;  span.sub font-style: italic; font-size: mici;  

Sperăm că veți găsi acest articol util și vă va ajuta să creați meniuri interesante cu descrieri de meniu în tema dvs. Întrebări? Lăsați-le în comentariile de mai jos.

Resurse aditionale

Cum să stil Menus de navigare WordPress

Cum să adăugați elemente personalizate la anumite meniuri WordPress

Meniurile lui Bill Erickson cu clasa de descriere