Skip Navigation
Aktualisiert
Januar 21, 2013

WPML ermöglicht Ihnen die Erstellung von kreativen Navigationsmenüs mithilfe Ihres eigenen HTML-Codes für Menüoptionen.

Beginnen wir mit einem Beispiel. Angenommen, Sie möchten wie in diesem Beispiel Symbole und eine kurze Beschreibung in die Navigationsmenüs am oberen Bildschirmrand einfügen:

Optionen in Dropdown-Menüs haben Symbole und eine Beschreibung.
Optionen in Dropdown-Menüs haben Symbole und eine Beschreibung.

Wir fügen jeder Seite benutzerdefinierte Felder hinzu, welche die Symbole und den beschreibenden Text enthalten sollen. Dann verknüpfen wir diese mit der Menüfunktion und sorgen dafür, dass sie diese Felder in den Menüoptionen verwendet.

Schritt 1) Fügen Sie den Seiten die benutzerdefinierten Felder hinzu

Damit jede Seite eigene Symbole und Beschreibungen erhalten kann, verwenden wir benutzerdefinierte Felder.

Seite mit hinzugefügten benutzerdefinierten Feldern für Symbole und Beschreibungen
Seite mit hinzugefügten benutzerdefinierten Feldern für Symbole und Beschreibungen

Schritt 2) Erstellen Sie die Theme-Funktion, welche die Menüoptionen erstellt

Wir müssen eine Funktion erstellen, welche den HTML-Code für die Menüoptionen erstellt. Standardmäßig erhält jede Option im Menü den Seitentitel. Diese Funktion ermöglicht es uns, beliebigen HTML-Code in den Menüoptionen zu platzieren.

WPML erstellt weiterhin das Gesamtmenü, einschließlich Dropdown-Effekte, Abschnitte und alles andere. Mit dieser Funktion können wir den Inhalt jeder Option steuern.

Dies ist meine Funktion:

function text_for_menu($page_id, $menu_level){
  $ret = '';
  $icon = get_post_meta($page_id,'icon',true);
  $description = get_post_meta($page_id,'Description',true);
  if($menu_level==0){
    if ($icon) $ret .= '<img width="24" height="24" style="vertical-align: middle; margin:0 5px 0 5px;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
    $ret .= '<br /><span>'.$description.'</span>';
  } else {
    if ($icon) $ret .= '<img width="16" height="16" style="vertical-align: middle; margin:0 5px 0 0;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
  }
  return $ret;
}

Was bewirkt sie:

  1. Sie ruft die Inhalte „icon“ und „Description“ der benutzerdefinierten Felder: get_post_meta($page_id,’icon‘,true); ab
  2. Sie überprüft, zu welcher Menüebene die Option gehört. Die Menüoptionen am oberen Bildschirmrand sind „0“ und die Optionen des Dropdown-Menüs sind „1“.
  3. Für die Menüoptionen am oberen Bildschirmrand fügt sie ein Symbol der Größe 24×24, gefolgt vom Seitentitel und der Beschreibung, hinzu.
  4. Für Optionen des Dropdown-Menüs fügt sie ein Symbol der Größe 16×16 gefolgt vom Seitentitel hinzu.

Schritt 3) Verknüpfen Sie diese Funktion mit WPML

Als letztes teilen wir WPML mit, dass es diese Funktion zur Erstellung der Menüoptionen verwenden soll. Zu diesem Zweck fügen wir functions.php die folgende Zeile hinzu:

add_filter('icl_nav_page_html', 'text_for_menu', 1, 2);

Dadurch wird WordPress dazu aufgefordert, eine Funktion mit dem Namen text_for_menu zu WPMLs icl_nav_page_html hinzuzufügen. Dies ist ein standardmäßiger WP-Filter, dadurch können Sie ihn mehrmals aufrufen und noch mehr Felder hinzufügen.