Bisherige Situation

Childmenüs sind bisher nur mit der CSS-Klasse “sub-menu” gekennzeichnet. Dies erlaub schon mal ein gewisses Maß an CSS, jedoch leider nicht immer ausreichend. Auch wird es schwer, wenn diese Childs selbst nun wieder Childs enthalten, dann wird es oftmals recht kniffelig, diese auseinander zu halten. Auch ist es so nicht möglich, die Menüpunkte, welche nun Childs haben zu kennzeichnen, da es einfach keine CSS-Klasse dafür gibt.

Lösung

Eine kleine Funktion muss also her, welche in die functions.php des Themes eingebunden wird.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
 * Mark the parent menu with an extra class "has-children"
 */

if(!function_exists('my_menu_with_child_class')) {
    function my_menu_with_child_class($menu) {
        $obj_Dom = new DomDocument();
        $obj_Dom->loadHTML(utf8_decode($menu));
        $xpath = new DOMXpath($obj_Dom);
        $parents = $xpath->evaluate('//li/ul/ancestor::li');

        for($a = 0; $a < $parents->length; $a++) {
            $p = $parents->item($a);
            $css = $p->getAttribute('class');
            $p->removeAttribute('class');
            $p->setAttribute('class', sprintf('%s has-children', $css));
        } // END for($a = 0; $a < $parents->length; $a++)

        $menu = $obj_Dom->saveHTML();
        $menu = preg_replace(array('/<\?xml([^>]+)?>/i', '/<!DOCTYPE[^>]+>/i', '/<body([^>]+)?>/i', '/<html([^>]+)?>/i', '/<\/body>/i', '/<\/html>/i'), '', $menu);

        /**
         * Unload classes
         */

        unset($obj_Dom);
        unset($xpath);

        return $menu;
    } // END function my_menu_with_child_class($menu)
} // END if(!function_exists('my_menu_with_child_class'))

Anwendung

Nun findet man im Theme den folgenden Aufruf:

1
wp_nav_menu(array('theme_location' => 'primary'));

Meistens wird man in der header.php fündig. Dieser muss nun etwas angepasst werden, denn so wie hier, wird das Menü einfach via echo ausgegeben, was natürlich etwas hinderlich ist, wenn man es noch nachbearbeiten will, also muss man hier erst mal das echo unterdrücken. Dafür gibt es eine Option. Dann übergibt man das Ganze noch an eine Variable.

1
2
3
4
$primary_menu = wp_nav_menu(array(
    'theme_location' => 'primary',
    'echo' => false
));

Nun kann man dieses einfach an die neue Funktion übergeben und per echo ausgeben lassen. Und siehe da. alle Menüpunkte, die ein Child haben, besitzen nun die Klasse “has-child“, welche bequem per CSS angesprochen werden kann. Der Aufruf der Funktion sieht demnach wie folgt aus:

1
if($primary_menu) {echo my_menu_with_child_class($primary_menu);}

Nun kann man in aller Ruhe auch mehrere Menüs in seinem Theme definieren. hier noch schnell ein Beispiel für ein Zweites:

1
2
3
4
5
6
7
8
$secondary_menu = wp_nav_menu(array(
    'theme_location' => 'secondary',            // Zweites Menü
    'fallback_cb' => false,                     // Kein automatisches Menü
    'walker' => new My_Description_Walker(),    // Walkerklasse um Beschreibungen der Menüpunkte anzuzeigen (nicht bei WordPress vorhanden)
    'echo' => false                             // Keine automatische Ausgabe des Menüs
));

if($secondary_menu) {echo my_menu_with_child_class($secondary_menu);}

Ich wünsche viel Spaß damit :-)

Artikel / Seite weiterempfehlen

2 Meinungen zu “WordPress: Parentmenü mit Klasse für CSS versehen

  1. Hi! Zunächst mal ein Lob für die vielen Tipps, die anderen WP Nutzern das Leben erleichtern. ;)

    Es gibt in WP noch eine Möglichkeit ohne Programmierung seinen Menü-Elementen bestimmte CSS Klassen zuzuweisen. Dazu im Admin-Bereich “Design”>”Menüs” ganz oben neben der Hilfe auf “Optionen einblenden” klicken. Dort kann man die erweiterte Menü-Eigenschaft “CSS-Klasse” aktivieren. Jetzt kann man für jeden Menü-Eintrag direkt noch eine eigene Menü-Klasse dazu geben.

    Normalerweise sind die Webseiten-Menüs so übersichtlich, dass es bequemer ist hier die CSS-Klassen per Hand einzutragen. Damit sollte dem Menü-Design dann (fast) nix mehr im Wege stehen. ;)

    • Dann hast Du diese Funktion hier ganz falsch verstanden. Es geht nicht darum, jedem Menüpunkt eine eigene Klasse zu geben, sondern um die Vereinheitlichung der Klassen bei automatisch generierten und benutzerdefinierten Menüs. Hier unterscheiden sich die Klassen der Elemente, die Submenüs haben, was zu dazu führen kann, dass – durch fehlende Definitionen im CSS – die Menüs komplett anders aussehen.

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>