Fügen Sie dem letzten in jedem ul-Menü eine .last-class hinzu

Ich habe eine Menge Code gesehen, wie man einem WordPress-Menü eine first und last class hinzufügt, aber in meiner Instanz möchte ich eine last class zur letzten li im Untermenü hinzufügen, das WP generiert. Das möchte ich in seiner einfachsten Form erreichen.

 
  • Menu item one
  • Menu item two
  • Menu item three

Und hier ist, was ich derzeit habe, das erste und letzte classn nur den übergeordneten Menüelementen hinzufügt. Könnte das angepasst werden?

 function add_first_and_last($items) { $items[1]->classes[] = 'first'; $items[count($items)]->classes[] = 'last'; return $items; } add_filter('wp_nav_menu_objects', 'add_first_and_last'); 

Ich würde gerne mit PHP für diese bleiben und nicht entweder :last-child (will es in ie7 & 8 arbeiten) oder jQuery.

Solutions Collecting From Web of "Fügen Sie dem letzten in jedem ul-Menü eine .last-class hinzu"

Setzen Sie folgendes in Ihre functions.php

 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 ); } } 

Verwendung

Wenn Sie wp_nav_menu und die letzte class hinzufügen möchten, geben Sie den obigen Walker an:

 wp_nav_menu( array('theme_location'=>'primary','walker' => new SH_Last_Walker(),'depth' => 0) ); 

theme_location und depth können beliebig sein, wichtig ist das walker Attribut.

Nebenbemerkung

Dieser Code kann verbessert werden – möglicherweise indem jedes Element im Array $children_elements[$parent_id] beim $children_elements[$parent_id] und überprüft wird, wenn es bis zum letzten Element (dh wenn es nur ein Element enthält) überprüft wird. Ich denke wp_list_filter wäre hier geeignet. Dies könnte die Effizienz nicht verbessern, könnte aber besser sein.

Außerdem können Sie die Eltern- und ID-Felder fest codieren – ich habe dies nicht für die Portabilität getan. Die folgende class könnte in der Lage sein, alle bereitgestellten Erweiterungen der Walker-class (Seitenlisten, Kategorienlisten usw.) zu erweitern.

Die jQuery würde in etwa so aussehen;

 jQuery(document).ready( function($) { $('.sub-menu > li:last-child').addClass('last-item'); } ); 

Aber bitte schauen Sie sich die Antwort von Rarst HIER an und schauen Sie, ob Ihnen das überhaupt hilft.

AKTUALISIEREN

Rart ‘Lösung von dem obigen Link tut es Tatsache, Arbeit und das Code-Snippet ist;

 add_filter( 'wp_nav_menu_items', 'first_last_class' ); function first_last_class( $items ) { $first = strpos( $items, 'class=' ); if( false !== $first ) $items = substr_replace( $items, 'first ', $first+7, 0 ); $last = strripos( $items, 'class='); if( false !== $last ) $items = substr_replace( $items, 'last ', $last+7, 0 ); return $items; } 

Die Ausgabe gab mir so etwas;

 
  • Menu item one
  • Menu item two
  • Menu item three

Was bedeutet, dass Sie Ihr ul ul li Element über CSS-Selektoren erfolgreich formatieren können.

etwas zu beachten: Während IE7 und IE8 Last-Child nicht unterstützen, unterstützen sie First-Child. Je nachdem, welche CSS Sie für das letzte Element unterschiedlich anwenden müssen, können Sie es umkehren.

Auch, FWIW, Ihr Thema verwendet bereits standardmäßig jQuery in anderen Bereichen (z. B. Kommentarbereich), so dass dies eine schnellere und sauberere Option wäre.