SÄ hÀr lÀgger du till menybeskrivningar i dina WordPress-teman

How to add menu descriptions in WordPress themes

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 om det Ă€r aktiverat stöds det inte att visa dem utan att lĂ€gga till lite kod. De flesta teman Ă€r inte utformade med menyobjektbeskrivningar i Ă„tanke. I den hĂ€r artikeln visar vi dig hur du aktiverar menybeskrivningar i WordPress och hur du lĂ€gger till menybeskrivningar i dina WordPress-teman.

NÀr och varför vill du lÀgga till menybeskrivningar?

Vissa anvÀndare tror att lÀgga till menybeskrivning kommer att hjÀlpa till med SEO. Vi tror dock 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Ä menyerna.

Menybeskrivningar

Steg 1: Aktivera menybeskrivningar

GÄ till Utseende »Menyer. Klicka pÄ SkÀrmalternativ knappen lÀngst upp till höger pÄ sidan. Markera rutan.

Aktivera menybeskrivningar i WordPress

Detta aktiverar beskrivningsfÀltet i dina menyalternativ. SÄ hÀr:

BeskrivningsfÀlt har lagts till i menyalternativen

Nu kan du lÀgga till menybeskrivningar för objekt i din WordPress-meny. Dessa beskrivningar kommer dock Ànnu inte att visas i dina teman. För att visa menybeskrivningar mÄste vi lÀgga till lite kod.

Steg 2: LĂ€gg till rullatorklassen:

Walker-klassen utökar den befintliga klassen i WordPress. Det lÀgger i princip bara till en kodrad för att visa beskrivningar av menyobjekt. LÀgg till den hÀr koden i ditt temas funktioner.php-fil.


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 );
	}
}

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 du lÀgger till anpassade navigeringsmenyer i WordPress-teman. 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 () -funktionen i ditt tema (troligen i header.php) och Àndra den sÄ hÀr.



<?php $walker = new Menu_With_Description; ?>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>


I den första raden stĂ€ller vi in ​​$ walker för att anvĂ€nda walker class som vi definierade tidigare i functions.php. I den andra kodraden Ă€r det enda extra argumentet vi behöver lĂ€gga till vĂ„ra befintliga wp_nav_menu-argument ‘walker’ => $ walker.

Steg 4. Styling av beskrivningarna

Walkerklassen vi lade till tidigare visar artikelbeskrivningar pÄ denna kodrad:


$item_output .= '<br /><span class="sub">' . $item->description . '</span>';

OvanstÄende kod lÀgger till en radbrytning i menyalternativet genom att lÀgga till en
taggen och slÄr sedan in dina beskrivningar i ett intervall med klassundern. SÄ hÀr:


<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>

För att Àndra hur dina beskrivningar visas pÄ din webbplats kan du lÀgga till CSS i temat. Vi testade detta pÄ Twenty Twelve och anvÀnde denna css.


.menu-item {
border-left: 1px solid #ccc;
}

span.sub { 
font-style:italic;
font-size:small;
}

Vi hoppas att du kommer att hitta den hÀr artikeln anvÀndbar och den hjÀlper dig att skapa snygga menyer med menybeskrivningar i ditt tema. FrÄgor? LÀmna dem i kommentarerna nedan.

Ytterligare resurser

Hur man utformar WordPress-navigeringsmenyer

SÄ hÀr lÀgger du till anpassade objekt till specifika WordPress-menyer

Bill Ericksons menyer med beskrivningsklass