WordPress – Behalten Sie die “aktive” Klasse im übergeordneten Menüelement bei

Lesezeit: 3 Minuten

Benutzer-Avatar
Ali

Ich implementiere ein Theme in WordPress. Dieses Thema hat ein oberes Navigationsmenü mit horizontalen Untermenüs unter jedem übergeordneten Element. Es setzt eine “aktive” Klasse auf die aktuell angezeigten übergeordneten Elemente (andernfalls werden die untergeordneten Untermenüelemente nicht angezeigt). Ich habe es irgendwie geschafft, die “aktive” Klasse für aktuelle übergeordnete Elemente beizubehalten, indem ich diese beiden Funktionen in functions.php verwendet habe.

/**
 * Wp Nav Menu Customizer.
 */
function special_nav_class($classes, $item){
     if( in_array('current-menu-item', $classes) ){
             $classes[] = 'active ';
     }
     return $classes;
}
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);


class SH_Last_Walker extends Walker_Nav_Menu{

   function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {

        $id_field = $this->db_fields['id'];

       //If the current element has children, add class 'sub-menu'
       if( isset($children_elements[$element->$id_field]) ) { 
            $classes = empty( $element->classes ) ? array() : (array) $element->classes;
            $classes[] = 'has-sub-menu';
            $element->classes =$classes;
       }
        // We don't want to do anything at the 'top level'.
        if( 0 == $depth )
            return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );

        //Get the siblings of the current element
        $parent_id_field = $this->db_fields['parent'];      
        $parent_id = $element->$parent_id_field;
        $siblings = $children_elements[ $parent_id ] ;

        //No Siblings?? 
        if( ! is_array($siblings) )
            return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );

        //Get the 'last' of the siblings.
        $last_child = array_pop($siblings);
        $id_field = $this->db_fields['id'];

            //If current element is the last of the siblings, add class 'last'
        if( $element->$id_field == $last_child->$id_field ){
            $classes = empty( $element->classes ) ? array() : (array) $element->classes;
            $classes[] = 'last';
            $element->classes =$classes;
        }

        return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
}

Aber jetzt ist mein Problem, dass, wenn ich auf ein Untermenü oder ein untergeordnetes Element eines übergeordneten Menüelements klicke, es mich erfolgreich zur untergeordneten Seite führt, aber die “aktive” Klasse vom übergeordneten Element entfernt und auf untergeordnete Elemente setzt (weil es die aktuell angezeigte Seite ist). Ich möchte nicht, dass diese Klasse Kindern zugewiesen wird, ich möchte, dass sie (auf dem übergeordneten Element) immer dann vorhanden ist, wenn ihre Kinder angezeigt werden.

Jede Hilfe wäre sehr willkommen.

  • Wenn Sie nur Stiländerungen für das übergeordnete Element im Menü benötigen, können Sie es einfach mit CSS oder jQuery verwalten.

    – sven

    17. Dezember 2013 um 6:34 Uhr

Wenn Sie möchten, dass das Dropdown-Grand-Grand-Elternteil aktiv ist, wenn das untergeordnete Menüelement aktiv ist, können Sie nach dem aktuellen Menüvorfahren oder dem aktuellen Seitenvorfahren suchen. In Ihrem Fall denke ich, dass die Überprüfung des aktuellen Menüvorfahren erfolgt ist am günstigsten.

function special_nav_class($classes, $item){
     if( in_array('current-menu-item', $classes) || in_array('current-menu-ancestor', $classes) ){
             $classes[] = 'active ';
     }
     return $classes;
}

Ich hoffe das hilft, schönen Tag noch 🙂

  • vielen Dank Sovit Tamrakar. Sie sind mein Held. du hast meinen Tag gerettet. hab dich lieb kumpel 😉

    – Ali

    17. Dezember 2013 um 18:58 Uhr

Wenn Sie nur einen Stil oder andere Eigenschaften hinzufügen möchten, indem Sie auf das übergeordnete Element abzielen, bietet WordPress Ihnen beispielsweise integrierte Klassen dafür:

Wenn Sie sich auf einer untergeordneten Seite befinden, können Sie Klassen wie sehen current-menu-parent current-page-parent current_page_parent current_page_ancestor Wenn diese von WordPress zur übergeordneten Seite hinzugefügt werden, können Sie eine davon auswählen, um auf das übergeordnete Element abzuzielen.

  • nette Informationen, aber das sind die eingebauten Klassen von WordPress, angenommen, ich habe eine eigene Klasse, wie sage ich dann WordPress, dass meine Klasse auf dem übergeordneten oder übergeordneten Menüelement der aktuellen Seite verwendet wird. das wollte ich wissen 🙂

    – Ali

    19. Dezember 2013 um 11:07 Uhr


Wenn Sie auf den Untermenüpunkt klicken, fügt WordPress hinzu .current-menu-item Klasse zu diesem Untermenüpunkt und .current-menu-parent Klasse zum übergeordneten Menüelement dieses Untermenüelements. Sie können diese spezifischen Klassen nach Ihren Bedürfnissen gestalten.

1312140cookie-checkWordPress – Behalten Sie die “aktive” Klasse im übergeordneten Menüelement bei

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy