Nun gibt es da – wie sollte es auch anders sein – ein kleines Problemchen, bzw. eine kleine Herausforderung. Leider ist das generierte HTML vom automatisch erstellten Menü etwas anders als das des benutzerdefinierten Menüs. Auch die CSS-Klassen sind ein klein wenig unterschiedlich. Während beim automatisch erstellten Menü die Untermenüs zum Beispiel die Klasse “children” haben, ist es beim Custom Menü “sub-menu“. Auch der das Menü umgebende DIV-Container hat entweder die Klasse “menu” oder “menu-name-des-gewaehlten-custom-menues”. Dieses Verhalten kann zu kleineren Unannehmlichkeiten führen, besonders was das CSS angeht, wenn man die Menüelemente gezielt ansprechen will oder gar muss, was ja durchaus mal vorkommen kann. Aber dem kann Abhilfe geschaffen werden.

Aufgerufen wird das Menü im Themetemplate mittels wp_nav_menu() und diese Funktion bietet einiges an Optionen, welche einem Helfen können zumindest einen Teil der Herausforderungen zu meistern. Zum Beispiel die Klasse des Containers anzupassen. Leider behebt diese immer noch nicht das Ding mit der Klasse der Untermenüs. Nicht ganz, denn hier hat man auch die Möglichkeit eine Walker-Klasse zu definieren. Dies ist eine PHP-Klasse, welche über das Menü “läuft” – daher Walker – und dieses anpassen kann.

Genug Geschwafel – Auf gehts.

Die Walker-Klasse

Diese erweitert die schon vorhandene Walker-Klasse von WordPress.

1
2
3
4
5
6
7
8
if(!class_exists('My_Menu_Walker')) {
    class My_Menu_Walker extends Walker_Nav_Menu {
        function start_lvl(&$output, $depth = 0, $args = array()) {
            $indent = str_repeat("\t", $depth);
            $output .= "\n$indent<ul class=\"children\">\n";
        } // END function start_lvl(&$output, $depth = 0, $args = array())
    } // END class My_Menu_Walker extends Walker_Nav_Menu
}// END if(!class_exists('My_Menu_Walker'))

Wie zu sehen, keine wirklich große Sache, sondern es wird einfach das Ding mit dem Startlevel hergenommen.

Der Menüaufruf

Dies muss dann im Template stehen. Hierbei wird vorher natürlich noch geprüft, ob hier ein Custom Menü geladen werden soll, oder doch das automatisch generierte. Denn im letzteren Fall, wird natürlich die Walker-Klasse nicht gebraucht.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$array_MenuLocations = get_nav_menu_locations();

// Prüfe ob ein Custom Menü geladen werden soll
if(!empty($array_MenuLocations['primary'])) {
    $var_sCustomMenuPrimary = wp_get_nav_menu_object($array_MenuLocations['primary']);
}

$var_sPrimaryMenu = wp_nav_menu(array(
    'theme_location' => 'primary',
    'items_wrap' => '<ul id="%1$s" class="%2$s clearfix">%3$s</ul>',
    'walker' => (isset($var_sCustomMenuPrimary)) ? new My_Menu_Walker() : '',
    'container_class' => 'menu',
    'echo' => false
));
echo $var_sPrimaryMenu;

Das wars eigentlich schon. So schnell bekommt man die CSS-Klassen und das HTML einheitlich hin und man muss nicht groß im CSS rumzaubern :-)

Artikel / Seite weiterempfehlen

2 Meinungen zu “WordPress: CSS-Klassen in automatischen und custom Menüs angleichen

  1. Wie immer geniale Tipps von dir. Die Menüse benutze ich schon lange, wobei sicherlich viele WP User nicht einmal diese kennen. Aber wie man das mit den CSS Klassen anwendet war mit bisher unbekannt. Darum muss ich mich jetzt mal kümmern.

  2. Ich arbeite mich gerade in WordPress ein und heute standen Menüs auf dem “Stundenplan”. Habs ganz gut hinbekommen, aber an den Styles muss ich noch etwas schrauben. Danke für die Tipps!

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>