So fügen Sie Menübeschreibungen in Ihren WordPress-Themes hinzu

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. Selbst wenn diese Option aktiviert ist, wird das Anzeigen dieser Anzeigen ohne das Hinzufügen von Code nicht unterstützt. Die meisten Themen sind nicht für Menüelemente gedacht. In diesem Artikel zeigen wir Ihnen, wie Sie Menübeschreibungen in WordPress aktivieren und Menübeschreibungen in Ihren WordPress-Themes hinzufügen.

Hinweis: In diesem Lernprogramm müssen Sie die HTML-, CSS- und WordPress-Theme-Entwicklung gut verstehen.

Wann und warum möchten Sie Menübeschreibungen hinzufügen??

Einige Benutzer denken, dass das Hinzufügen von Menübeschreibungen beim SEO hilfreich ist. 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 den 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 oben rechts auf der Seite. Überprüf den Beschreibungen Box.

Dadurch wird das Beschreibungsfeld in Ihren Menüelementen aktiviert. So was:

Jetzt können Sie den Elementen in Ihrem WordPress-Menü Menübeschreibungen 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:

Walker-Klasse erweitert die vorhandene Klasse in WordPress. Es fügt im Grunde nur eine Zeile Code hinzu, um Beschreibungen der Menüelemente anzuzeigen. Fügen Sie diesen Code Ihrem Thema hinzu Functions.php Datei.

 Klasse Menu_With_Description erweitert Walker_Nav_Menu function start_el (& $ output, $ item, $ depth, $ args) global $ wp_query; $ indent = ($ depth)? str_repeat ("\ t", $ depth): "; $ class_names = $ value ="; $ classes = leer ($ item-> classes)? array (): (array) $ item-> classes; $ class_names = join (", apply_filters ('nav_menu_css_class', array_filter ($ classes), $ item)); $ class_names = ''; $ output. = $ indent. ''; $ attributes =! leer ($ item-> attr_title)? '': "; $ attributes. =! empty ($ item-> target)? 'target ="'. esc_attr ($ item-> target). '"':"; $ Attribute. =! leer ($ item-> xfn)? 'rel = "'. esc_attr ($ item-> xfn). '"': "; $ attributes. =! empty ($ item-> url)? 'href ="'. esc_attr ($ item-> url). '"": "; $ item_output = $ args-> before; $ item_output. = ''; $ item_output. = $ args-> link_before. apply_filters ('the_title', $ item-> title, $ item-> ID). $ args-> link_after; $ item_output. = '
'. $ item-> Beschreibung. ''; $ item_output. = ''; $ item_output. = $ arg-> after; $ output. = apply_filters ('walker_nav_menu_start_el', $ item_output, $ item, $ tiefe, $ args);  

Schritt 3. Aktivieren Sie den Walker im wp_nav_menu

WordPress-Themes verwenden die Funktion wp_nav_menu (), um Menüs anzuzeigen. Wir haben auch ein Tutorial für Anfänger über das Hinzufügen benutzerdefinierter Navigationsmenüs in WordPress-Themes veröffentlicht. Die meisten WordPress-Themes fügen Menüs hinzu header.php Vorlage. Es ist jedoch möglich, dass Ihr Design möglicherweise eine andere Vorlagendatei verwendet hat, um Menüs anzuzeigen.

Was wir jetzt tun müssen, ist zu finden wp_nav_menu () Funktion in Ihrem Design (höchstwahrscheinlich in header.php) und ändern Sie es so.

   'primary', 'menu_class' => 'nav-menu', 'walker' => $ walker))); ?> 

In der ersten Zeile setzen wir $ walker Walker-Klasse verwenden, die wir zuvor definiert haben Functions.php. In der zweiten Codezeile ist das einzige zusätzliche Argument, das wir unseren vorhandenen wp_nav_menu-Argumenten hinzufügen müssen, Folgendes 'walker' => $ walker.

Schritt 4. Gestalten der Beschreibungen

Die zuvor hinzugefügte Walker-Klasse zeigt Elementbeschreibungen in dieser Codezeile:

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

Der obige Code fügt dem Menüelement einen Zeilenumbruch hinzu, indem a hinzugefügt wird
tag und fügt die Beschreibungen in einem Bereich mit class sub ein. So was:

 
Über
Wer sind wir?
 

Um zu ändern, wie Ihre Beschreibungen auf Ihrer Website angezeigt werden, können Sie CSS im Stylesheet Ihres Themes hinzufügen. Wir testeten dies bei Twenty Twelve und verwendeten dieses CSS.

 .Menüpunkt Rand links: 1px fest #ccc;  span.sub font-style: kursiv; Schriftgröße: klein;  

Wir hoffen, dass Sie diesen Artikel als nützlich erachten und er wird Ihnen dabei helfen, cool aussehende Menüs mit Menübeschreibungen in Ihrem Thema zu erstellen. Fragen? Hinterlassen Sie sie in Kommentaren.

Zusätzliche Ressourcen

Wie man WordPress-Navigationsmenüs gestaltet

Hinzufügen von benutzerdefinierten Elementen zu bestimmten WordPress-Menüs

Bill Erickson's Menüs mit Beschreibungsklasse