Freaky Friday: Beschreibungstexte für das WordPress Menü

Es ist wieder soweit. Die Freaky Friday Reihe wird fortgesetzt. In diesem Jahr ganz neu aus dem wunderschönen Wiesbaden. Heute soll es mal um die Erweiterung des WordPress Menüs gehen. In einem sehr spannenden Projekt für die Hamburger Journalistin Silke Schröckert programmiere ich gerade an einem WordPress Projekt, welches unter anderem auch Beschreibungstexte für das Hauptmenü als Entwicklungspunkt vorgab. Wie man soetwas ganz einfach mit WordPress umsetzen kann, zeige ich Euch heute.

Das Erstellen eines WordPress Menüs

Das Erstellen eines WordPress Menüs geht einem eigentlich normal von der Hand. Unter dem Design Menüpunkt im WordPress Backend findet ihr auch die Einstellungen für das Menü. Hierüber lässt sich die Menüstruktur wunderbar einstellen. Allerdings verbirgt WordPress hier einige Einstellungsmöglichkeiten. Fügt man eine Seite der Menü Struktur hinzu, kann man lediglich den angezeigten Namen und ein Title Attribut für diesen Menüpunkt festlegen. Es gibt aber noch sehr viel mehr. Klick ganz oben rechts auf Ansicht anpassen lässt sich unter anderen die Einstellung Beschreibung anwählen. Jeder Menüpunkt erhält nun ein zusätzliches Textfeld, in dem eine Beschreibung zum Menüpunkt hinterlegt werden kann. Diese Einstellung ist in den meisten Themes deaktivert.

Beschreibungstexte im Menü aktivieren

Wie kann man diese Texte nun aktivieren, so dass sie tatsächlich im Frontend angezeigt werden? Hierzu müssen minimale Änderungen an der functions.php im Theme Verzeichnis vorgenommen werden. Wichtig! Damit Euer Theme updatefähig bleibt, empfiehlt es sich hier ein Childtheme anzulegen, in dem ihr alle Änderungen unabhängig von Eurem Theme anlegen könnt. Folgende Zeilen sollten dann in der functions.php hinterlegt werden.

1
2
3
4
5
6
7
8
9
10
function mmn_main_menu_description( $item_output, $item, $depth, $args )
{
    if ( 'main_menu' == $args->theme_location && !$depth && $item->description ) {
        $item_output = str_replace( '', '<span class="mmn-menu-description">' . $item->description . '</span>', $item_output );
    }
 
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'mmn_main_menu_description', 10, 4 );
 

Ich gehe in diesem Code Beispiel einfach davon aus, dass Euer Theme ein Hauptmenü bestitzt und dieses mit main_menu im Theme registriert ist. Unter Umständen heißt Euer Hauptmenü in Eurem eingesetzten WordPress Theme aber auch anders. In diesem Fall muss das name hier angepasst werden. Der Output wird mit der str_replace Funktion angepasst. Die Description in diesem Teil ist genau der Text, den ihr im Backend als Beschreibung angegeben hat. Natürlich muss das alles noch per CSS gestylt werden. Dann könnte es aussehen wie im folgenden Beispiel.

About Author: Marcel
Ich bin Senior PHP Developer bei MM Newmedia. Seit 2005 bin ich begeisterter Webentwickler und arbeite als Freelancer für namenhafte Firmen und entwickle jede Menge abgefahrenes Zeug und berichte darüber in meinem Blog.

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.