Slik legger du til menybeskrivelser i WordPress-temaene

WordPress menysystem har en innebygd funksjon der du kan legge til beskrivelser med menyelementer. Denne funksjonen er imidlertid gjemt som standard. Selv når de er aktivert, blir det ikke støttet å vise dem uten å legge til noe kode. De fleste temaer er ikke utformet med menyelementbeskrivelser i tankene. I denne artikkelen vil vi vise deg hvordan du aktiverer menybeskrivelser i WordPress og hvordan du legger til menybeskrivelser i WordPress-temaene dine.

Merk: Denne opplæringen krever at du har en rettferdig forståelse av HTML, CSS og WordPress tema utvikling.

Når og hvorfor du vil legge til menybeskrivelser?

Noen brukere tror tror at legge til menybeskrivelse vil hjelpe med SEO. Vi tror imidlertid at hovedgrunnen til at du vil bruke dem, er å tilby en bedre brukeropplevelse på nettstedet ditt.

Beskrivelser kan brukes til å fortelle besøkende hva de vil finne hvis de klikker på et menyelement. En spennende beskrivelse vil tiltrekke flere brukere å klikke på menyer.

Trinn 1: Slå på Menybeskrivelser

Gå til Utseende »Menyer. Klikk på Skjermalternativer knappen øverst til høyre på siden. Undersøk beskrivelser eske.

Dette vil aktivere beskrivelsesfelt i menyelementene dine. Som dette:

Nå kan du legge til menybeskrivelser for elementer i WordPress-menyen. Disse beskrivelsene vises imidlertid ikke i dine temaer. For å vise menybeskrivelser må vi legge til noen kode.

Trinn 2: Legg til walker-klassen:

Walker-klassen utvider den eksisterende klassen i WordPress. Det legger i utgangspunktet bare en linje med kode for å vise menyelementbeskrivelser. Legg til denne koden i temaet ditt functions.php fil.

 klasse Menu_With_Description utvider Walker_Nav_Menu funksjon start_el (& $ output, $ item, $ depth, $ args) global $ wp_query; $ indent = ($ dybde)? str_repeat ("\ t", $ dybde): "; $ class_names = $ value ="; $ classes = empty ($ item-> classes)? array (): (array) $ item-> klasser; $ class_names = join (", apply_filters ('nav_menu_css_class', array_filter ($ classes), $ item)); $ class_names = ''; $ output. = $ innrykk. ''; $ attributter =! tomt ($ item-> attr_title)? '': "; $ attributter. =! tomt ($ item-> target)? 'target ="'. esc_attr ($ item-> target). '"':"; $ attributter. =! tomt ($ item-> xfn)? 'rel =' '. esc_attr ($ item-> xfn).' '': "; $ attributter. =! tomt ($ item-> url)? 'href ="'. esc_attr ($ item-> url). '"':"; $ item_output = $ args-> før; $ item_output. = ''; $ item_output. = $ args-> link_before. apply_filters ('the_title', $ item-> title, $ item-> ID). $ Args-> link_after; $ item_output. = '
'. $ item-> beskrivelse. ''; $ item_output. = ''; $ item_output. = $ args-> etter; $ output. = apply_filters ('walker_nav_menu_start_el', $ item_output, $ item, $ depth, $ args);  

Trinn 3. Aktiver Walker i wp_nav_menu

WordPress-temaer bruker wp_nav_menu () -funksjonen til å vise menyer. Vi har også publisert en veiledning for nybegynnere om hvordan du legger til egendefinerte navigasjonsmenyer i WordPress Themes. De fleste WordPress-temaer legger til menyer i header.php mal. Det er imidlertid mulig at temaet ditt kanskje har brukt en annen malfil for å vise menyer.

Det vi trenger å gjøre nå, er å finne wp_nav_menu () Funger i temaet ditt (mest sannsynlig i header.php) og endre det slik.

   'primær', 'menu_class' => 'nav-meny', 'walker' => $ walker)); ?> 

I den første linjen satt vi $ walker å bruke walker klasse vi definerte tidligere i functions.php. I den andre linjen med kode er det eneste ekstraargumentet vi må legge til i våre eksisterende wp_nav_menu-argumenter 'Walker' => $ Walker.

Trinn 4. Styling Beskrivelsene

Walker-klassen vi la til tidligere, viser elementbeskrivelser på denne linjen med kode:

 $ item_output. = '
'. $ item-> beskrivelse. ''; 

Ovennevnte kode legger til en linjeskift i menyelementet ved å legge til en
tag og deretter omslutt dine beskrivelser i et span med klassen under. Som dette:

 
Handle om
Hvem er vi?
 

For å endre hvordan beskrivelsene dine vises på nettstedet ditt, kan du legge til CSS i temaets stilark. Vi prøvde dette på tjue tolv og brukte dette css.

 .menyelement border-left: 1px solid #ccc;  span.sub font-style: kursiv; font-size: liten;  

Vi håper at du vil finne denne artikkelen nyttig, og det vil hjelpe deg med å lage kule utseende menyer med menybeskrivelser i temaet ditt. Spørsmål? Legg igjen dem i kommentarene nedenfor.

Tilleggsressurser

Hvordan Stil WordPress Navigasjons Menyer

Slik legger du til egendefinerte elementer til bestemte WordPress-menyer

Bill Ericksons menyer med beskrivelsesklasse