Ich verwende für meine WordPress Installation ein Custom Menü. Die sichtbare Menübezeichnung sollte aus Gründen der Übersichtlichkeit und manchmal auch aus Platzgründen möglichst kurz gehalten werden. Zu einer ordentlichen Verlinkung gehört aber auch der HTML Title-Tag, der beim Hovern mit der Maus über den Menüpunkt als Ballontip oder Popup am Mauszeiger gezeigt wirde. Aus SEO Sicht aber auch aus Gründen der Usability ist es sinnvoll, wenn sich der sichtbare <a> Tag (Anchor-Tag) und der im Quelltext vorhandene HTML Title Tag im Navigationsmenü unabhängig voneinander festlegen lassen.

WordPress bietet im Backend unter Design->Menüs->Optionen eine erweiterte Optionspalette, mit der sich die benötigten Eingabefelder für Title-Tag aber auch z. B. für eine CSS-Klasse oder eine Description anzeigen lassen (siehe Screenshot).

Erweiterte Menüoptionen von WordPress Menüs freischalten

Die „Optionen“ Schaltfläche oben Rechts kann man auf einem großen Monitor bei hoher Auflösung als WordPress Neuling schnell übersehen 🙂

Nachdem ich sie gefunden hatte und die ersten Title-Tags und CSS-Klassen für Menüsymbole vergeben hatte, stellte sich aber schnell Ernüchterung ein. Mein verwendetes WordPress Theme nutzt eine eigene Nav-Bar und überschreibt die WordPress Standard Einstellung bzw. wird mein vorgeschlagener Title Tag nicht von WordPress übernommen.

Um das Menü zu verändern sollte man sich zuerst in den Template Pfas seiner WordPress Installation begeben. Den Template Pfad findet Ihr unter „\wp-content\themes\mein-Theme\“. Dort schaut ihr euch die „header.php“ mit einem Texteditior wie bspw. NotePad++ an. Hier sieht man, dass die Ausgabe des Menüs über die Funktion „wp_nav_menu“ mit einem sogenannten „walker“ erfolgt. Dieser wiederum versteckt sich in der „functions.php“ in eurem Theme Ordner. Auch diese Datei öffnet ihr mit dem Editor und findet beim Suchen nach „nav walker“ den Pfas zur nächsten Datei. In meinem Fall die „navwalker.php“ im Unterordner „/lib/“ meines Templates.

Was in eurer Datei steht kann je nach Theme variieren. Ich beschreibe hier als Gedankenstütze die Änderung, die ich an meiner „navwalker.php“ vorgenommen habe:

$atts['title']  = ! empty( $item->title )   ? $item->title  : '';

Mit dieser Zeile wird der Seitentitel (Feld „Angezeigter Name“ im Backend) als title-Attribut des Anchor Tags gesetzt. Dadurch ist der Title Tag aber immer gleich dem Anchor Tag, was wir ja nicht möchten. Wir wollen, dass der im Backend vergebene Titel aus dem Feld „HTML-Attribut title (optional)“ auch als Title Tag gesetzt wird. Im PHP hat dieses Feld den Namen „attr_title“. Wir ersetzten diese Zeile also durch:

$atts['title']  = ! empty( $item->attr_title )   ? $item->attr_title  : $item->title;

Wenn der im Backend vergebene Title nicht leer ist (attr_title) dann wird der Titel auch als titel Attribut gesetzt sonst bleibt der „title“ (der Wert aus dem Feld „Angezeigter Name“) wie gehabt.

Somit lassen sich Anchor Tag und HTML-Title getrennt voneinander einstellen.

Icons im Menü mit Klassen vergeben

Mein WordPress Theme bietet einige tolle Icons, die mittels CSS Klassen gesetzt werden können. Für den Link auf meine Hauptseite wollte ich gerne das kleine Haus als Symbol im Menü einstellen. Dieses kann mit der CSS Klasse „icon-home icon-large“ aufrufen.

Das nun im Backend vorhandene Feld „CSS-Klassen (optional)“ schreibt in meinem Template die Klassen leider in das <ul>-Tag des Menüpunktes anstatt in das <a>-Tag meines Links. Dadurch verrutschen meine Symbole und haben eine falsche Farbe. Hier ist wieder die Anpassung der „navwalker.php“ gefragt:

if(! empty( $item->description )){
  $item_output .= '<a'. $attributes .'><span class="glyphicon ' . esc_attr( $item->description ) . '"></span>&nbsp;';
} else {
  $item_output .= '<a'. $attributes .'>';
}

Sobald für das WordPress Nav Menü eine Description im Backend vergeben wurde setzt dieser Code die im Description Feld eingegebenen CSS Klassen in den <span>-Tag

Jetzt wird das Häuschen Symbol vor dem Link der Hauptseite angezeigt. So weit so gut.

Es steht aber immer noch „Home“ oder der vergebene Seitentitel im <a>-Tag. Man könnte sich jetzt behelfen, indem man den Menüpunkt im Backend mit einem „&nbsp“ füllt (wenn man es komplett leer lässt, löscht WordPress den Menüpunkt). Die elegantere bzw. automatische Lösung führt aber wieder über die „navwalker.php“ Datei.

if(! empty( $item->description )){
  $item_output .= $args->link_before . apply_filters( 'the_title', '', $item->ID ) . $args->link_after;
} else {
  $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
}

Wenn eine Description im Backend vergeben wurde wird der titel nicht in das <a>-Tag geschrieben sondern einfach mit “ leer gelassen.

Ich hoffe euch hat die Anleitung weiter geholfen. Über einen Like oder Kommentar freue ich mich sehr.