Så här lägger du till menybeskrivningar i dina WordPress-teman

WordPress menysystem har en inbyggd funktion där du kan lägga till beskrivningar med menyalternativ. Den här funktionen är dock dold som standard. Även när det är aktiverat, visas dem inte utan att lägga till någon kod. De flesta teman är inte utformade med menyobjektbeskrivningar i åtanke. I den här artikeln kommer vi att visa hur du aktiverar menybeskrivningar i WordPress och hur man lägger till menybeskrivningar i WordPress-teman.

Obs! Denna handledning kräver att du har en rättvisande förståelse av HTML, CSS och WordPress-temat utveckling.

När och varför skulle du vilja lägga till menybeskrivningar?

Vissa användare tycker att att lägga till menybeskrivning hjälper till med SEO. Men vi tror att den främsta anledningen till att du skulle vilja använda dem är att erbjuda en bättre användarupplevelse på din webbplats.

Beskrivningar kan användas för att berätta för besökare vad de hittar om de klickade på ett menyalternativ. En spännande beskrivning kommer att locka fler användare att klicka på menyer.

Steg 1: Slå på menybeskrivningar

Gå till Utseende »Menyer. Klicka på Skärmalternativ knappen längst upp till höger på sidan. Kolla beskrivningar låda.

Detta kommer att möjliggöra beskrivningar fält i dina menyalternativ. Så här:

Nu kan du lägga till menybeskrivningar till objekt i din WordPress-meny. Dessa beskrivningar visas dock inte i dina teman. För att visa menybeskrivningar måste vi lägga till en kod.

Steg 2: Lägg till walker klass:

Walker-klassen utökar den befintliga klassen i WordPress. Det lägger i grunden bara en rad kod för att visa menyobjektbeskrivningar. Lägg till den här koden i ditt tema functions.php fil.

 klassen Menu_With_Description utökar Walker_Nav_Menu funktion start_el (& $ output, $ item, $ depth, $ args) global $ wp_query; $ indent = ($ djup)? str_repeat ("\ t", $ djup): "; $ 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 = ''; $ output. = $ indent. ''; $ attribut =! tomt ($ item-> attr_title)? '': "; $ attributes. =! tomt ($ item-> target)? 'target ="'. esc_attr ($ item-> target). '"':"; $ attribut. =! tomt ($ item-> xfn)? 'rel =' '. esc_attr ($ item-> xfn).' '': "; $ attributes. =! tomt ($ item-> url)? 'href ="'. esc_attr ($ item-> url). '"':"; $ item_output = $ args-> före; $ 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-> efter; $ output. = apply_filters ('walker_nav_menu_start_el', $ item_output, $ item, $ depth, $ args);  

Steg 3. Aktivera Walker i wp_nav_menu

WordPress-teman använder wp_nav_menu () -funktionen för att visa menyer. Vi har också publicerat en handledning för nybörjare om hur man lägger till egna navigationsmenyer i WordPress Themes. De flesta WordPress-teman lägger till menyer i header.php mall. Det är dock möjligt att ditt tema kan ha använt någon annan mallfil för att visa menyer.

Vad vi behöver göra nu är att hitta wp_nav_menu () funktion i ditt tema (troligtvis i header.php) och ändra det så här.

   'primära', 'menu_class' => 'nav-meny', 'walker' => $ walker)); ?> 

I första raden ställer vi in $ walker att använda walker klass vi definierade tidigare i functions.php. I den andra raden av kod är det enda extraargumentet vi behöver lägga till i våra befintliga wp_nav_menu-argument 'walker' => $ walker.

Steg 4. Styling the Descriptions

Walker klassen som vi lagt till tidigare visar objektbeskrivningar på den här koden:

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

Ovanstående kod lägger till en radbrytning i menyalternativet genom att lägga till en
taggar och sedan omsluter dina beskrivningar i ett span med klassens under. Så här:

 
Handla om
Vilka är vi?
 

För att ändra hur dina beskrivningar visas på din webbplats kan du lägga till CSS i temat stilark. Vi testade detta på tjugo tolv och använde detta css.

 .menyalternativ border-left: 1px solid #ccc;  span.sub font-style: italic; font-size: small;  

Vi hoppas att du hittar den här artikeln användbar och det hjälper dig att skapa snygga menyer med menybeskrivningar i ditt tema. Frågor? Lämna dem i kommentarerna nedan.

Ytterligare resurser

Hur man stilar WordPress Navigation Menyer

Så här lägger du till anpassade objekt till specifika WordPress-menyer

Bill Ericksons menyer med beskrivningsklass