smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

WordPress: Individuelle Menü-Ausgabe

21. Mai 2012
Stephan
WordPress

In WordPress gibt es im Admin-Bereich eine leichte Möglichkeit ein individuelles Menü bzw. eine individuelle Navigation zu erstellen.

Wer selber oft WordPress-Themes erstellt oder das eigene Theme gerne anpasst, dem fehlt aber die Möglichkeit direkt im Admin-Bereich den Ausgabe-Code des jeweiligen Menüs nach den eigenen Vorstellungen anzupassen. Beispielweise möchte ich bei meiner Navigation nicht immer die unnötigen HTML-IDs und Klassen (z.B. menu-item-12) ausgegeben haben.

In diesem Artikel möchte ich euch nun zeigen, wie ihr eine individuelle Menü-Ausgabe für euren WordPress-Blog umsetzen könnt.

Menü mit Beschreibung (Description)

Nehmen wir an wir wollen ein Menü erstellen, dass unter dem jeweiligen Menü-Punkt noch eine kleine Beschreibung hat und wie folgt aussieht:

Individuelles WordPress-Menü mit Beschreibungstext

Ein Menü lässt sich in WordPress im Admin-Bereich unter den Menü-Punkt Design > Menü relativ einfach anlegen und innerhalb unseres Themes können wir mittels der Funktion wp_nav_menu unser Menü ausgeben lassen.

Unser Beispiel lässt sich jedoch leider nicht so ohne weiteres umsetzen. Dieses liegt daran, dass die standardmäßige Menü-Ausgabe in WordPress für unser Beispiel so aussehen würde:

<ul>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-12" id="menu-item-12">
        <a href="http://www.smart-webentwicklung.de/" title="Startseite Smart-Webentwicklung">Home</a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11" id="menu-item-11">
        <a href="http://www.smart-webentwicklung.de/ueber-das-blog/" title="Informationen über das Smart-Webentwicklung Blog">Über das Blog</a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10" id="menu-item-10">
    <a href="http://www.smart-webentwicklung.de/gastautor-werden/" title="Gastautor bei Smart-Webentwicklung werden">Gastautor werden</a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9" id="menu-item-9">
        <a href="http://www.smart-webentwicklung.de/kontakt/" title="Kontaktaufnahme bei Fragen, Anregungen &amp; Wünschen">Kontakt</a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8" id="menu-item-8">
        <a href="http://www.smart-webentwicklung.de/impressum/" title="Impressum &amp; Datenschutz">Impressum</a>
    </li>
</ul>

Wir wollen aber erreichen, dass neben dem Namen des Menü-Punktes noch ein kleiner Beschreibungstext innerhalb eines span-Elements vorhanden ist und die automatisch generierten HTML-IDs und Klassen nicht ausgegeben werden:

<ul>
    <li>
        <a href="http://www.smart-webentwicklung.de/" title="Startseite Smart-Webentwicklung">
            Home
            <span>Zum Start</span>
        </a>
    </li>
    <li>
        <a href="http://www.smart-webentwicklung.de/ueber-das-blog/" title="Informationen über das Smart-Webentwicklung Blog">
            Über das Blog
            <span>Infos zum Blog</span>
        </a>
     </li>
    <li>
        <a href="http://www.smart-webentwicklung.de/gastautor-werden/" title="Gastautor bei Smart-Webentwicklung werden">
            Gastautor werden
            <span>Dein Artikel hier im Blog</span>
        </a>
    </li>
    <li>
        <a href="http://www.smart-webentwicklung.de/kontakt/" title="Kontaktaufnahme bei Fragen, Anregungen &amp; Wünschen">
            Kontakt
            <span>Kontaktformular</span>
        </a>
    </li>
    <li>
        <a href="http://www.smart-webentwicklung.de/impressum/" title="Impressum &amp; Datenschutz">
            Impressum
            <span>Datenschutz &amp; Co.</span>
        </a>
    </li>
</ul>

Menü-Ausgabe anpassen

Als erstes fügen wir im Admin-Bereich von WordPress unter Design > Menü für unsere Menü-Punkte eine Beschreibung (Description) hinzu.

Das Feld für die Beschreibung ist standardmäßig ausgeblendet und muss über Optionen einblenden aktiviert werden:

Beschreibungsfeld für Menü-Punkte aktivieren

Damit wir nun die Ausgabe des Menüs anpassen können, werden wir die Walker_Nav_Menu-Klasse, die von WordPress zum Generieren des Menüs genutzt wird, ableiten und anpassen.

Für nähere Informationen zum Aufbau der Walker-Klassen siehe wp.tutsplus.com.

Die Walker-Klasse für die Menü-Generierung befindet sich im Verzeichnis wp-includes/ in der Datei nav-menu-template.php. Die Methode die wir eigentlich nur benötigen, ist die start_el-Methode, die so wie sie ist in unsere abgeleitete Klasse übernommen und dann angepasst werden kann.

Unsere abgeleitete Klasse fügen wir einfach in unsere functions.php-Datei ein:

class My_Nav_Menu_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args)
    {
        global $wp_query;

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class = in_array('current-menu-item', $classes) ? ' class="active"' : '';

        $output .= '<li>';

        $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_description = !empty($item->description) ? esc_attr($item->description) : '';

        $item_output = $args->before;
        $item_output .= '<a'.$class. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '<span>'.$item_description.'</span>';
        $item_output .= '</a>';
        $item_output .= $args->after;
    
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

Die hervorgehobenen Zeilen kennzeichnen die Zeilen, die angepasst wurden. Mit diesen Anpassungen wird unser Menü nun genau so ausgegeben wir wir es wollten.

Ausgabe des angepassten Menüs

Damit WordPress bei der Ausgabe unseres Menüs auch die richtige Klasse, also unsere erstelle My_Nav_Menu_Walker-Klasse verwendet, müssen wir den Klassennamen nur als zusätzlichen Parameter der wp_nav_menu-Funktion übergeben:

wp_nav_menu(array(
    'container' => 'false',
    'theme_location' => 'main-menu',
    'walker' => new My_Nav_Menu_Walker()
));

Fazit

Das vorgestellte Beispiel-Menü könnt ihr natürlich gerne euren Vorstellungen entsprechend anpassen. Wie wir gesehen haben, lässt sich mit einer individuellen Walker_Nav_Menu-Klasse die Ausgabe unseres Menüs leicht anpassen.

Falls ihre mehrere Menüs in eurem Theme verwendet und verschiedene Ausgaben für die jeweiligen Menüs haben wollt, könnt ihr weitere Walker_Nav_Menu-Klassen erstellen.

Habt ihr eventuell irgendwelche Fragen, Ergänzungen oder Anregungen?

Kommentare  
3 Kommentare vorhanden
1 Tom schrieb am 22. Mai 2012 um 21:43 Uhr

Genau das ist mein Schwachpunkt! 😛 Aber ich werds mir mal reinziehen.^^

2 Gerald schrieb am 11. Februar 2015 um 17:50 Uhr

Super gut! Mein Problem ist grad nur, könnte man das „current_menu_item“ stehen lassen, damit man die aktuelle Seite mittels CSS anders einfärben könnte? Oder gibt es dafür eine andere gute Möglichkeit?

3 Katharina schrieb am 26. April 2015 um 03:10 Uhr

Toller Beitrag und sehr aufschlußreich,

dennoch eine Frage an dich als Profi. Hast du die Möglichkeit mir zu sagen wie ich es schaffe eine x-beliebige Zeichenkette im Linkfeld vom Menü einzugeben? Sprich, ich habe .js im Einsatz und will per Menülink z.Bsp. „Tell a friend“ oder „drucken“ anbieten. Diese werden in manueller Programmierung über h-ref..js:display-oder-anderes…(usw) in a gesetzt, bei WordPress werden diese Linkeingaben nicht angenommen, ich kann nur die typischen http…usw. eingeben.

Kann ich da im WordPress (irgendwo in einer Datei) was ändern das jede Zeichenkette als Linkeingabe im Menü angenommen wird? wenn ich nur Raute setz, wird die ja auch richtig ausgegeben zwischen“..“, also müsste doch eine Möglickeit sein auch einen .js Aufruf als Link einzugeben. Das geht bis Dato nicht und nervt ganz schön weil so mehr PlugIns (jQuery usw.) eingesetzt werden müssen.

Liebe Grüße
Katharina

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!