Das WordPress-Menüsystem verfügt über eine integrierte Funktion, mit der Sie Beschreibungen mit Menüelementen hinzufügen können. Diese Funktion ist jedoch standardmäßig ausgeblendet. Auch wenn sie aktiviert sind, wird ihre Anzeige ohne Hinzufügen von Code nicht unterstützt. Die meisten Themes sind nicht auf die Beschreibung von Menüelementen ausgelegt. In diesem Artikel zeigen wir Ihnen, wie Sie Menübeschreibungen in WordPress aktivieren und Menübeschreibungen in Ihren WordPress-Themes hinzufügen.
Hinweis: Dieses Tutorial erfordert ein angemessenes Verständnis der Entwicklung von HTML-, CSS- und WordPress-Themes.
Wann und warum möchten Sie Menübeschreibungen hinzufügen?
Einige Benutzer denken, dass das Hinzufügen einer Menübeschreibung bei der SEO helfen wird. Wir glauben jedoch, dass der Hauptgrund, warum Sie sie verwenden möchten, darin besteht, eine bessere Benutzererfahrung auf Ihrer Website zu bieten.
Beschreibungen können verwendet werden, um Besuchern mitzuteilen, was sie finden, wenn sie auf einen Menüpunkt klicken. Eine faszinierende Beschreibung wird mehr Benutzer dazu bringen, auf Menüs zu klicken.
Schritt 1: Aktivieren Sie die Menübeschreibungen
Gehe zu Aussehen » Menüs. Klicke auf Bildschirmoptionen Schaltfläche in der oberen rechten Ecke der Seite. Überprüf den Beschreibungen Kasten.
Dadurch wird das Beschreibungsfeld in Ihren Menüpunkten aktiviert. So was:
Jetzt können Sie Menübeschreibungen zu Elementen in Ihrem WordPress-Menü hinzufügen. Diese Beschreibungen werden jedoch noch nicht in Ihren Designs angezeigt. Um Menübeschreibungen anzuzeigen, müssen wir etwas Code hinzufügen.
Schritt 2: Fügen Sie die Walker-Klasse hinzu:
Die Walker-Klasse erweitert die bestehende Klasse in WordPress. Es fügt im Grunde nur eine Codezeile hinzu, um die Beschreibungen der Menüelemente anzuzeigen. Füge diesen Code in dein Theme ein functions.php
Datei.
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 ); } }
Schritt 3. Aktivieren Sie Walker in wp_nav_menu
Verwendung von WordPress-Themes wp_nav_menu() Funktion zum Anzeigen von Menüs. Wir haben auch ein Tutorial für Anfänger zum Hinzufügen benutzerdefinierter Navigationsmenüs in WordPress-Themes veröffentlicht. Die meisten WordPress-Themes fügen Menüs in . hinzu header.php
Vorlage. Es ist jedoch möglich, dass Ihr Design eine andere Vorlagendatei verwendet hat, um Menüs anzuzeigen.
Was wir jetzt tun müssen, ist zu finden wp_nav_menu()
Funktion in deinem Theme (höchstwahrscheinlich in header.php) und ändere es so.
<?php $walker = new Menu_With_Description; ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
In der ersten Zeile setzen wir $walker
um die Walker-Klasse zu verwenden, die wir zuvor in . definiert haben functions.php
. In der zweiten Codezeile ist das einzige zusätzliche Argument, das wir unseren bestehenden wp_nav_menu-Argumenten hinzufügen müssen 'walker' => $walker
.
Schritt 4. Styling der Beschreibungen
Die Walker-Klasse, die wir zuvor hinzugefügt haben, zeigt Artikelbeschreibungen in dieser Codezeile an:
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
Der obige Code fügt dem Menüpunkt einen Zeilenumbruch hinzu, indem er a . hinzufügt
-Tag und umschließt dann Ihre Beschreibungen in eine Spanne mit Klasse sub. So was:
<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>
Um die Darstellung Ihrer Beschreibungen auf Ihrer Website zu ändern, können Sie dem Stylesheet Ihres Themes CSS hinzufügen. Wir haben dies auf Twenty Twelve getestet und dieses CSS verwendet.
.menu-item { border-left: 1px solid #ccc; } span.sub { font-style:italic; font-size:small; }
Wir hoffen, dass Sie diesen Artikel nützlich finden und Ihnen dabei helfen, cool aussehende Menüs mit Menübeschreibungen in Ihrem Thema zu erstellen. Fragen? Hinterlassen Sie sie in den Kommentaren unten.
Zusätzliche Ressourcen
So gestalten Sie WordPress-Navigationsmenüs
So fügen Sie benutzerdefinierte Elemente zu bestimmten WordPress-Menüs hinzu
Bill Ericksons Menüs mit Beschreibungsklasse