WordPress-Navigation um die CSS-Klassen "first" und "last" erweitern

23.08.2013 -

Bei der Suche im Netz fanden wir zahlreiche Ansätze um die besagten CSS-Klassen in eine WordPress-Navigation einzufügen, doch basieren all die Lösungen auf der Funktion str_replace und waren somit sehr wage und unzuverlässig.

Folgende Code-Zeilen erweitern die WordPress-Navigation um die Klassen "first-menu-item" und "last-menu-item" und iterieren dabei durch den kompletten Navigations-Baum. Dadurch werden auch Child-Element richtig erkannt und um die besagten Klassen erweitert.

/**
 * Add the classes "first-menu-item" and "last-menu-item" in to navigation items
 */
function add_first_and_last($menu) {
    $dom = simplexml_load_string($menu);
    function parseUl($ul)
    {
        $first = 0;
        $last = count($ul->li) - 1;
        for($key=0; $key<=$last; $key++) {
            /** @var $li SimpleXMLElement */
            $li = $ul->li[$key];
            $attributes = $li->attributes();

            if($key == $first) {
                $attributes['class'] .= ' first-menu-item';
            }
            if($key == $last) {
                $attributes['class'] .= ' last-menu-item';
            }

            if(isset($li->ul)) {
                parseUl($li->ul);
            }
        }
    }
    parseUl($dom->ul);
    return str_replace('<?xml version="1.0"?>', '', $dom->asXML());
}
add_filter('wp_nav_menu', 'add_first_and_last');

Um die Funktion in die eigene Template zu implementieren, einfach den Code in die Datei "functions.php" der eigenen Seite einfügen.

© EGARA-CMS ist ein urheberrechtlich geschütztes Produkt der DREIWERKEN GmbH - Ihrer Werbeagentur für Online- und Print-Medien aus Kolbermoor (bei Rosenheim).