Beschreibungen in der Navigation ergänzen (Wordpress)

Um die Beschreibung von Navigationspunkten zu ermöglichen, müssen diese erst in Wordpress aktiviert werden. Das Tutorial wird anhand des Standard-Theme “Twenty Eleven 1.3” erklärt. Zum Menü navigieren: “Design -> Menüs” -> neues Menü erstellen / oder vorhandenes ergänzen und in den “Optionen -> Erweiterte Menüeigenschaften anzeigen -> Beschreibung (rechts oben)” aktivieren:

Als nächstes findet man die Beschreibung des Navigationspunktes in den jeweiligen Menüpunkt:

Falls das Theme die Beschreibung schon unterstützt, brauchen nichts mehr als das CSS anpassen. Wenn das aber nicht der Fall sein sollte, müssen wir ein wenig Code schreiben. In die “wp-content/themes/twentyeleven/functions.php” wird folgender Code angehängt:

class description_walker 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 . '</pre>
<ul>
<li id="&quot;menu-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        ) .'"' : '';

		$prepend = '<strong>';
		$append = '</strong>';
		$description  = ! empty( $item->description ) ? ''.esc_attr( $item->description ).'' : '';

		if($depth != 0)
		{
			$description = $append = $prepend = "";
		}

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
		$item_output .= $description.$args->link_after;
		$item_output .= '';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

Jetzt muss nur noch das Menü in der “wp-content/themes/twentyeleven/header.php” in der Zeile 118 ersetzt werden:

<?php 
/*wp_nav_menu( array( 'theme_location' => 'primary' ) );*/
wp_nav_menu( array(
	 'container' =>false,
	 'menu_class' => 'nav',
	 'echo' => true,
	 'before' => '',
	 'after' => '',
	 'link_before' => '',
	 'link_after' => '',
	 'depth' => 0,
	 'walker' => new description_walker())
	 );

Im letzten Schritt brauchen wir nur noch das CSS individuell anpassen!