WordPress-Navigation um die CSS-Klassen „first“ und „last“ erweitern

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.

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.

Momentan können keine Kommentare hinterlassen werden.

DIESE KUNDEN VERTRAUEN AUF DREIWERKEN: WEBDESIGN-AGENTUR AUS ROSENHEIM

Durch das Fortsetzen der Benutzung dieser Seite, stimmst du der Benutzung von Cookies zu. Weitere Informationen

Die Website verwendet Cookies. Einige davon sind erforderlich, um die Funktionsfähigkeit der Website zu gewährleisten. Andere werden verwendet, um die Benutzerumgebung zu optimieren. Durch die Nutzung der Website stimmen Sie der Verwendung dieser Cookies zu. Weitere Informationen zu Cookies finden Sie in unserem Impressum.

Schließen