Das WordPress-Menüsystem verfügt über eine integrierte Funktion, mit der Sie Beschreibungen zu Menüpunkten hinzufügen können. Diese Funktion ist jedoch standardmäßig ausgeblendet. Selbst wenn sie aktiviert ist, wird die Anzeige ohne zusätzlichen Code nicht unterstützt. Die meisten Themes sind nicht für Menüpunktbeschreibungen konzipiert. In diesem Artikel zeigen wir Ihnen, wie Sie Menübeschreibungen in WordPress aktivieren und wie Sie Menübeschreibungen in Ihren WordPress-Themes hinzufügen.
Hinweis: Dieses Tutorial erfordert ein gutes Verständnis von HTML, CSS und der Entwicklung von WordPress-Themes.
Wann und warum Sie Menü-Beschreibungen hinzufügen möchten?
Manche Benutzer glauben, dass das Hinzufügen von Menübeschreibungen für SEO hilfreich ist. Wir glauben jedoch, dass der Hauptgrund, warum Sie sie verwenden möchten, darin besteht, ein besseres Benutzererlebnis auf Ihrer Website zu bieten.
Beschreibungen können verwendet werden, um Besuchern mitzuteilen, was sie finden, wenn sie auf einen Menüpunkt klicken. Eine ansprechende Beschreibung wird mehr Benutzer dazu verleiten, auf Menüs zu klicken.
Schritt 1: Menübeschreibungen aktivieren
Gehen Sie zu Darstellung » Menüs. Klicken Sie oben rechts auf der Seite auf die Schaltfläche Bildschirmoptionen. Aktivieren Sie das Kontrollkästchen Beschreibungen.
Dies aktiviert das Beschreibungsfeld in Ihren Menüelementen. So:
Jetzt können Sie Ihren Menüpunkten in Ihrem WordPress-Menü Beschreibungen hinzufügen. Diese Beschreibungen werden jedoch noch nicht in Ihren Themes 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. Sie fügt im Grunde nur eine Codezeile hinzu, um Beschreibungen von Menüpunkten anzuzeigen. Fügen Sie diesen Code in die Datei functions.php Ihres Themes ein.
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. Walker in wp_nav_menu aktivieren
WordPress-Themes verwenden die Funktion wp_nav_menu(), um Menüs anzuzeigen. Wir haben auch ein Tutorial für Anfänger veröffentlicht, wie man benutzerdefinierte Navigationsmenüs in WordPress-Themes hinzufügt. Die meisten WordPress-Themes fügen Menüs in der Vorlagendatei header.php hinzu. Es ist jedoch möglich, dass Ihr Theme eine andere Vorlagendatei zur Anzeige von Menüs verwendet hat.
Was wir jetzt tun müssen, ist, die Funktion wp_nav_menu() in Ihrem Theme zu finden (höchstwahrscheinlich in header.php) und sie wie folgt zu ändern.
<?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 zuvor in functions.php definierte Walker-Klasse zu verwenden. 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. Formatierung der Beschreibungen
Die von uns zuvor hinzugefügte Walker-Klasse zeigt die Artikelbeschreibungen in dieser Codezeile an:
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
Der obige Code fügt einen Zeilenumbruch zum Menüpunkt hinzu, indem ein
<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 zu ändern, wie Ihre Beschreibungen auf Ihrer Website angezeigt werden, können Sie CSS in die Stylesheet-Datei Ihres Themes einfü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 er Ihnen hilft, coole Menüs mit Menübeschreibungen in Ihrem Theme zu erstellen. Fragen? Hinterlassen Sie sie unten in den Kommentaren.
Zusätzliche Ressourcen
So gestalten Sie WordPress-Navigationsmenüs
Benutzerdefinierte Elemente zu bestimmten WordPress-Menüs hinzufügen
Bill Ericksons Menüs mit Beschreibungs-Klasse
Matthew Blaxton
In PHP 8.0 und höher wird dies einen kritischen Fehler auslösen.
Sie müssen diese Zeile finden:
function start_el( $output, $item, $depth, $args ) {
Wenn Sie diese Zeile in die folgende ändern, sollte der Fehler verschwinden:
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
WPBeginner Support
Vielen Dank für die Weitergabe für diejenigen, die PHP 8 verwenden.
Admin
Norman
Hallo,
Wie kann man die Beschreibung auch anklickbar machen?
WPBeginner Support
We cover that in step 4
Admin
kayvan A.Gilani
Um Menü-Beschreibungen in meinen WordPress-Themes hinzuzufügen, habe ich Schritt 1 und 2 dieses Blogs durchgeführt, konnte aber Schritt 3 nicht folgen, um fortzufahren und die gesamte Änderung vorzunehmen.
WPBeginner Support
Wenn Sie die Funktion in Ihrem Theme nicht finden können, empfehlen wir Ihnen, sich an den Support Ihres spezifischen Themes zu wenden, und dieser sollte Ihnen helfen können.
Admin
yiannis
Hallo,
Wie kann ich die Produktkategoriebeschreibung im Max Mega Menu deaktivieren?
Ich bin bereits zu Mega Menu > Allgemeine Einstellungen gegangen und habe Menüpunktbeschreibungen auf deaktiviert gesetzt, aber das Problem besteht weiterhin.
WPBeginner Support
Sie sollten sich an den Support des Plugins wenden, und dieser kann Ihnen bei der nicht korrekt funktionierenden Einstellung helfen.
Admin
Sergio
Vielen Dank!
WPBeginner Support
You’re welcome
Admin
Lanka
Vielen Dank, Sie haben mich gerettet
JKLYN
Danke. Hat mir Zeit gespart.
dan
Kann das mit dem WP_Bootstrap_Navwalker funktionieren?
da ich es versucht habe und es meine Website kaputt macht....
kalpana
Vielen Dank... war sehr nützlich für mich... Sie haben mir den Tag gerettet
Steven
Wie schalte ich die Beschreibung im mobilen Layout aus?
Anzani Zahrani
Hallo.. Bitte helfen Sie..
Wie füge ich den Titel der Kategorie hinzu, ohne die Beschreibung des Kategorietitels zu verwenden?
Ido Schacham
Total hilfreich, danke!
Rahman
Toller Tipp, aber in der Menübeschreibung werden keine HTML-Tags unterstützt. Weiß das jemand?
Danke
Iryna
Hallo Leute,
Irgendwelche Ideen, wie man HTML-Tags in der Beschreibung zulässt?
remove_filter(‘nav_menu_description’, ‘strip_tags’);
Das hier funktioniert bei mir nicht.
Damien Carbery
@Iryna: Können Sie Ihren Code irgendwo posten, z.B. pastebin.com.
Wo Sie remove_filter() aufrufen, bestimmt, ob es funktioniert – es muss nach dem add_filter()-Aufruf aufgerufen werden.
Wenn Sie es kurz vor dem wp_nav_menu()-Aufruf aufrufen, könnte es funktionieren.
Max
Gibt es eine Möglichkeit, dass die Beschreibung nicht verlinkt wird?
Ashok
danke... es hat funktioniert. Aber in der Menübeschreibung werden keine HTML-Tags unterstützt.
igorasas
Könnte es schon fertig zum Einstecken sein? Wie wird dieser Hack mit dem Thema „Twenty TwelveVersion: 1.5“ funktionieren?
? Und genau wie beim Plugin wpml?
Guy
Danke für den Tipp
Phong
Danke, das war wirklich hilfreich, einfach das hier zu kopieren und einzufügen, um schnell ein Bild zu bekommen.
Chad
Hey Mann, ich habe die Walker-Klasse zu functions.php hinzugefügt, aber ich kann wp_nav_menu im Genesis-Theme nicht finden. Was fehlt mir? Ich habe keine Ahnung, was ich als Nächstes tun soll?!?!
Ksenia
Sie erklären sehr gut – detailliert und klar. 1 Minute und Menüpunkte Beschreibungen sind in Ordnung. Danke!
Mary Anne
Vielen Dank für dieses Tutorial. Es wurde mir empfohlen und hat perfekt funktioniert, um die gewünschten Änderungen vorzunehmen. Bei diesen Änderungen habe ich jedoch meine Dropdown-Untermenüs verloren. Haben Sie eine Idee, was das in der Codeänderung beeinflusst hat?
Vielen Dank für Ihre Zeit und das Tutorial
WPBeginner Support
Es scheint ein CSS-Problem zu sein, es tut uns leid, dass wir nicht spezifischer sein konnten. Versuchen Sie, die Entwicklertools von Google Chrome zu verwenden, um es zu debuggen.
Admin
Paul Renault
Ich habe die Menübeschreibungen implementiert und es hat großartig funktioniert. Jetzt bittet mein Kunde um einen Zeilenumbruch innerhalb einer der Beschreibungen. Ich habe versucht, einen Wagenrücklauf einzufügen und ein Tag in das Beschreibungsfeld über das Admin-Panel einzufügen. Es erscheint nicht im Frontend. WP entfernt diese Bearbeitungen. Gibt es eine Möglichkeit, dies zu beheben?
WPBeginner Support
Wenn Ihr Kunde nur etwas Abstand wünscht, können Sie dafür CSS verwenden.
Admin
Paul Renault
Der Kunde wünscht einen Zeilenumbruch. Gibt es eine Möglichkeit, ein Tag in die Beschreibung einzufügen? Wenn ich jetzt eins einfüge, wird es entfernt.
Barry
Tolles Tutorial, Leute, ich möchte nur wissen, wie ich das in einem benutzerdefinierten Menü implementiere, das mit dem Custom Menu-Widget angezeigt wird?
Oryan Consulting
Danke! Ich arbeite seit Jahren mit WordPress und habe das noch nie zuvor gehört. Ich wollte die Beschreibungen entfernen, da sie auf der Website, an der ich arbeite, sehr redundant waren. Ich habe überall gesucht, woher sie kamen.
Oh Freude!
sambassador
funktioniert!
aber für PHP 5.4 müssen Sie die wp_walker-Argumente für die start_el-Funktion anpassen:
function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 )
und ersetzen Sie $item durch $object.
Steve Covello
Ihr seid spitze!! Hat perfekt funktioniert.
Kevin Gilbert
Perfekt. Das war genau das, was ich brauchte, um eine Website fertigzustellen. Ich hatte einige Probleme mit dem CSS, aber ich habe es schließlich herausgefunden und zum Laufen gebracht. Danke für die tollen Artikel.
Jon
Ausgezeichneter Tipp. Hat perfekt funktioniert!
Jedediah White
Das hat für mich perfekt funktioniert. Die Klassenfunktion ist auch perfekt. Vielen Dank!
Pankaj
Ich musste dasselbe erstellen und war völlig verloren.
Ich hatte vor, ein paar dumme Dinge zu tun, um diese Sache zu erledigen.
Gott sei Dank habe ich diesen Beitrag gefunden und Zeit und Stress gespart!
Ich liebe diese Seite, habe so viel gelernt.
Vielen Dank, dass Sie die einfachsten Dinge hier gezeigt haben.
Pankaj
Das Span-Tag erscheint auch bei Untermenüs.
Es wird dort nicht angezeigt, aber es nimmt so viel Platz ein, dass es zu seltsam aussieht.
Gibt es dafür eine Umgehungslösung?
DiTesco
Das ist wirklich eine tolle Anleitung und ich habe mich gefragt, ob das auch für Thesis 1.8.5 funktionieren würde? Wenn nicht, wäre es toll, wenn Sie eine bereitstellen könnten. Ich werde Ihnen auf jeden Fall helfen, sie zu veröffentlichen. Daumen hoch!
svet
Ich habe Ihr Tutorial befolgt und meinem Menü eine Beschreibung hinzugefügt. Danke! Wenn ich jedoch im mobilen Modus bin, verwandelt sich das Menü in ein Dropdown-Menü und der Menütitel und die Beschreibung sind verbunden. Wenn mein Menüpunkt zum Beispiel „Über uns“ und die Beschreibung „Mehr über mich“ lautet, zeigt die mobile Version „Über unsMehr über mich“ an. Gibt es eine Möglichkeit, dies zu beheben?
David
Ich hatte das gleiche Problem. Hier ist, was ich getan habe.
Ich habe dies geändert:
$description = ! empty( $item->description ) ? ‘<span>’.esc_attr( $item->description ).'</span>’ : ”;
Dazu:
$description = ! empty( $item->description ) ? ‘<br /><span>’.esc_attr( $item->description ).'</span>’ : ”;
Nicht sicher, ob es die beste Lösung ist, aber für mich hat es funktioniert.
Garrett Hyder
Danke Leute, ich bin auf das gestoßen, was SVET und DAVID mit dem mobilen Menü gemacht haben.
Der Code scheint meine Änderung geändert zu haben, die einfach nur ein Span mit dem Trennzeichen angehängt hat und in meiner Desktop-Abfrage einfach unterdrückt wurde, da sie dort nicht benötigt wurde.
$item_output .= ‘ – ‘;
Innerhalb meines Desktop Only Query-Sets wird der Span auf display none gesetzt;
@media only screen and (min-width: 740px) {
header #submenu li span.dash { display:none; }
Ich hoffe, das hilft, hat mein Problem gut gelöst.
Nicola
Toller Beitrag – sehr klar, genau das, was ich brauchte und funktionierte perfekt. Danke!
Samedi Amba
Vielen Dank für das großartige Tutorial. Ich habe die wichtigsten Schritte gut erledigt, wie Sie sehen können unter
http://ueab.ac.ke/demo/index
Ich steckte beim Styling fest – wie kann ich den Abstand zwischen dem Hauptmenü-Label und der Beschreibung verringern? Ihre Hilfe wird sehr geschätzt.
Redaktion
Das hat mit der Zeilenhöhe Ihrer .menu a-Klasse Ihres Themes zu tun. Wenn Sie diese reduzieren, wird der Abstand reduziert.
Admin
Chris Rouse
Toller Beitrag. Ich habe versucht, mich vorher damit zu beschäftigen, aber die vorherigen Anleitungen, die ich gefunden habe, waren nicht so einfach zu befolgen. Ich konnte den functions.php-Code einfügen, herausfinden, wie ich die Walker-Klasse in meiner Header-Datei ändere (unterschiedlich für das von mir verwendete Theme, aber geradlinig) und die Dinge in etwa 15 Minuten von Anfang bis Ende zum Laufen bringen.
Ein Punkt, den Sie vielleicht hinzufügen möchten, ist, wie man den rechten Rand beim letzten Menüpunkt mit der :last-child-Eigenschaft einfügt.
.menu-item:last-child { border-right: 1px solid #ccc; }
Damien Carbery
Anstatt Walker_Nav_Menu zu erweitern, wäre es schön (und einfacher), wenn ein Filter bereitgestellt würde, z.B.
Wenn der Kerncode hätte:
$item_output .= apply_filters( ‘walker_nav_menu_description’, $item->description);
Dann würde die benutzerdefinierte Filterfunktion nur enthalten:
return ” . $description . ”;
Cathy Earle
Tolle Infos … werde das jetzt auf meine Websites übertragen. Danke!