Hinzufügen einer class zu einem bestimmten Link im benutzerdefinierten Menü

Ich weiß, dass Sie eine class in den benutzerdefinierten Menüoptionen hinzufügen können, aber es fügt es zu dem LI vor dem A hinzu. Ich möchte die class direkt auf diesem bestimmten A lieber als dem gesamten LI anwenden.

Also statt der Ausgabe ist

 

Ich möchte, dass es auch so ist.

  

Irgendwelche Ideen?

Solutions Collecting From Web of "Hinzufügen einer class zu einem bestimmten Link im benutzerdefinierten Menü"

Sie können den Filter nav_menu_css_class

 add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 2); function my_nav_special_class($classes, $item){ if(your condition){ //example: you can check value of $item to decide something... $classes[] = 'my_class'; } return $classes; } 

Mit diesem $ Item können Sie jede gewünschte Bedingung erfüllen. und dies wird die class zu der spezifischen li hinzufügen und Sie können das a-Tag basierend darauf wie folgt stylen:

 .my_class a{ background-color: #FFFFFF; } 

Ich habe an dieser Stelle eine Lösung gefunden, indem ich einen benutzerdefinierten Walker verwendet habe .

In zwei Schritten: Ersetzen Sie den Standardcode wp_nav_menu durch einen bearbeiteten und fügen Sie dann Code zur functions.php des Themes hinzu.

Ersetzen Sie zuerst den Standard-wp_nav_code durch den folgenden Code (der Code wird von der obigen Website kopiert):

  wp_nav_menu( array( 'menu' => 'Main Menu', 'container' => false, 'menu_class' => 'nav', 'echo' => true, 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 0, 'walker' => new description_walker()) ); 

Als Nächstes fügen Sie functions.php den folgenden Code hinzu. Auf diese Weise können Sie den Menüverknüpfungen eine class hinzufügen:

 class description_walker extends Walker_Nav_Menu { function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); $class_names = ' class="'. esc_attr( $class_names ) . '"'; $output .= $indent . ' 

Gegen Ende des Codes sind mehrere Zeilen, die mit $ item_output beginnen. Insbesondere möchten Sie sich dieses Stück ansehen:

 $item_output .= ''; 

Weil diese Zeile die Ausgabe für den Beginn des Links html bestimmt. Wenn Sie es in etwa so ändern:

 $item_output .= ''; 

Dann wird allen Ihren Links im Menü class = “abc” hinzugefügt.


Das heißt, es erlaubt keine benutzerdefinierte class für jeden Link (oder zumindest weiß ich nicht, wie man es programmiert). Das ist ein Problem für mich.

Für diejenigen, die fragen, warum möchten Sie das tun? Ich möchte, dass meine Menüverknüpfungen Lightboxen öffnen (Farbboxen, um genauer zu sein), und sie benötigen classn auf den Links, um das zu tun. Beispielsweise:

 Photo 

Gibt es möglicherweise eine Möglichkeit, die classn dynamisch zu generieren, z. B. “lightbox1” für den ersten Link, “lightbox2” für den zweiten Link und so weiter?

Getriggers !!!! Ich musste das herausfinden, um den Menüpunkt Link zu Inline-HTML in einer Fancybox zu machen. Fügen Sie den folgenden Code in die function.php Ihres Themes ein:

 function add_menuclass($ulclass) { return preg_replace('/ 

Erstellen Sie dann auf der Registerkarte "Menü" des WP-Dashboards einen benutzerdefinierten Link und fügen Sie ihn zu Ihrem Menü hinzu. Stellen Sie oben, wo Bildschirmoptionen angezeigt werden, sicher, dass "Verknüpfungsbeziehung (XFN)" aktiviert ist. Es wird dieses Feld zu Ihrem benutzerdefinierten Menüelement hinzufügen. Geben Sie "fancybox" (ohne Anführungszeichen) in das Feld ein und speichern Sie Ihr Menü.

Die function sucht nach dem Aufruf des Navigationsmenüs, findet dann, wo Sie eine rel="fancybox" und ersetzt sie durch eine rel="fancybox" class="fancybox" . Sie können fancybox durch die class ersetzen, die Sie Ihren Menüpunkten hinzufügen möchten. Gemacht und gemacht!

Ich weiß, dass das vor langer Zeit beantwortet wurde, aber als allgemeine Informationen habe ich herausgefunden, wie man jedem Menüpunkt einzeln eine class hinzufügt, indem man die “Screen” -Option der WordPress-Admin-Seite für Custom Menus verwendet.

Ich musste kürzlich etwas Ähnliches machen und habe einen anderen Weg gefunden. Ich musste eine ähnliche class für ein Nivo Lightbox-Plugin hinzufügen. Also habe ich “nivo” zum Rel-Attribut hinzugefügt (“Link Relationship (XFN)”) und dann Folgendes im nav_menu_link_attributes Filter.

 function add_nivo_menuclass($atts, $item, $args) { if( is_array($atts) && !empty($atts['rel']) && $atts['rel'] = 'nivo' ) { $atts['class'] = 'lightbox'; $atts['data-lightbox-type'] = 'inline'; } return $atts; } add_filter('nav_menu_link_attributes','add_nivo_menuclass', 0,3); 

Aktuelle Antworten scheinen nicht zu erkennen, dass die Frage ist, wie man dem a Element und nicht dem li Element eine class hinzufügt oder zu kompliziert ist. Hier ist ein einfacher Ansatz, der nav_menu_link_attributes Filter nav_menu_link_attributes , mit dem Sie ein bestimmtes Menü basierend auf seinem Slug und einem bestimmten Seitenlink in diesem Menü basierend auf seiner ID nav_menu_link_attributes können. Sie können $ args und $ item var_dump verwenden, um mehr Möglichkeiten zu erhalten, Ihre Bedingung zu erstellen.

 add_filter('nav_menu_link_attributes', 'custom_nav_menu_link_attributes', 10, 4); function custom_nav_menu_link_attributes($atts, $item, $args, $depth){ if ($args->menu->slug == 'your-menu-slug' && $item->ID == 1){ $class = "button"; // Make sure not to overwrite any existing classes $atts['class'] = (!empty($atts['class'])) ? $atts['class'].' '.$class : $class; } return $atts; }