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

Ich weiß, dass Sie eine Klasse in den benutzerdefinierten Menüoptionen hinzufügen können, aber sie fügt sie dem LI vor dem A hinzu. Ich möchte die Klasse direkt auf dieses bestimmte A und nicht auf das gesamte LI anwenden.

Also statt der Ausgabe zu sein

<li id="menu-item-51" class="NEWCLASS menu-item menu-item-type-custom menu-item-51"><a href="#">Link</a> </li>

Ich möchte, dass es auch so ist.

<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-51"><a href="#" class="NEWCLASS">Link</a></li>

Irgendwelche Ideen?

Sie können nav_menu_css_classFilter verwenden

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 fügt die Klasse dem spezifischen li hinzu und Sie können das a-Tag basierend darauf wie folgt formatieren:

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

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

Zwei Schritte: Ersetzen Sie den Standardcode wp_nav_menu durch einen bearbeiteten und fügen Sie dann der Datei functions.php des Themas Code hinzu.

Ersetzen Sie zunächst den Standard-wp_nav_code durch den folgenden (der Code wird von der obigen Site 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())
     );

Fügen Sie als Nächstes den folgenden Code zu functions.php hinzu. Auf diese Weise können Sie den Menü-Links tatsächlich eine Klasse 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 . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

       $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
       $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
       $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
       $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

       $prepend = '<strong>';
       $append = '</strong>';
       $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

       if($depth != 0)
       {
                 $description = $append = $prepend = "";
       }

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
        $item_output .= $description.$args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

                    if ($item->menu_order == 1) {
            $classes[] = 'first';
        }

        }
}

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

$item_output .= '<a'. $attributes .'>';

Weil diese Zeile die Ausgabe für den Anfang des Links HTML bestimmt. Wenn Sie es in so etwas ändern:

$item_output .= '<a'. $attributes . 'class="abc"' .'>';

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

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

Für diejenigen, die fragen, warum Sie dies tun möchten? Ich möchte, dass meine Menü-Links Leuchtkästen öffnen (genauer gesagt Farbfelder), und dazu sind Klassen für die Links erforderlich. Beispielsweise:

<a class="lightbox1" href="#">Photo</a>

Gibt es möglicherweise eine Möglichkeit, die Klassen dynamisch zu generieren, z. B. "lightbox1" für den ersten Link, "lightbox2" für den zweiten Link usw.?

Gelöst !!!! Ich musste das herausfinden, um den Menüpunkt mit Inline-HTML in einer Fancybox zu verknüpfen. Fügen Sie den folgenden Code in die function.php Ihres Themas ein:

function add_menuclass($ulclass) {
    return preg_replace('/<a rel="fancybox"/', '<a class="fancybox"', $ulclass, -1);
}
add_filter('wp_nav_menu','add_menuclass');

Erstellen Sie dann auf der Registerkarte "Menü" des WP-Dashboards einen benutzerdefinierten Link und fügen Sie ihn Ihrem Menü hinzu. Stellen Sie oben sicher, dass "Link Relationship (XFN)" aktiviert ist. Dieses Feld wird Ihrem benutzerdefinierten Menüelement hinzugefügt. Geben Sie "Fancybox" (ohne Anführungszeichen) in das Feld ein und speichern Sie Ihr Menü.

Die Funktion sucht nach dem Aufruf des Navigationsmenüs, findet dann, wo immer Sie eine haben, rel="fancybox"und ersetzt sie durch eine rel="fancybox" class="fancybox". Sie können Fancybox durch jede Klasse ersetzen, die Sie zu Ihren Menüelementen hinzufügen müssen. Gemacht und gemacht!

Aktuelle Antworten scheinen nicht zu erkennen, dass die Frage lautet, wie eine Klasse zum aElement und nicht zum liElement hinzugefügt werden soll , oder dass sie zu kompliziert sind. Hier ist ein einfacher Ansatz, bei dem der nav_menu_link_attributesFilter verwendet wird, mit dem Sie ein bestimmtes Menü basierend auf seinem Slug und einen bestimmten Seitenlink in diesem Menü basierend auf seiner ID auswählen können. Sie können var_dump $ args und $ item verwenden, um weitere Möglichkeiten zum Erstellen Ihrer Bedingung zu erhalten.

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

Ich weiß, dass dies vor langer Zeit beantwortet wurde, aber genau wie allgemeine Informationen habe ich mithilfe der Option "Bildschirm" der WordPress-Administrationsseite für benutzerdefinierte Menüs herausgefunden, wie jedem Menüelement einzeln eine Klasse hinzugefügt werden kann.

Ich musste kürzlich etwas Ähnliches tun und fand einen anderen Weg. Ich musste eine ähnliche Klasse für ein Nivo Lightbox-Plugin hinzufügen. Also habe ich "nivo" zum rel-Attribut ("Link Relationship (XFN)") und dann das Folgende zum nav_menu_link_attributesFilter hinzugefügt .

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

Aktivieren Sie im oberen Bereich der Appearance -> MenusSeite Screen Optionsdas Kontrollkästchen von CSS Classes. Wenn Sie nun jeden der hinzugefügten Menüpunkte erweitern, wird ein CSS Classes (optional)Feld angezeigt.