Dodaj klasę do konkretnego łącza w menu niestandardowym

Wiem, że możesz dodać klasę w niestandardowych opcjach menu, ale dodaje ją ona do LI przed A. Chcę zastosować klasę bezpośrednio do tego konkretnego A, a nie do całego LI.

Więc zamiast wyjścia

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

Ja też chcę, żeby tak było.

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

Jakieś pomysły?

możesz użyć nav_menu_css_classfiltra

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

Korzystając z tego przedmiotu $ możesz spełnić dowolne warunki. a to doda klasę do konkretnego li i możesz nadać temu stylowi znacznik:

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

Znalazłem rozwiązanie na tej stronie za pomocą niestandardowego chodzika .

Dwa kroki: zastąp domyślny kod wp_nav_menu edytowanym, a następnie dodaj kod do functions.php motywu.

Najpierw zamień domyślny kod wp_nav_ na następujący (kod jest kopiowany z powyższej strony):

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

Następnie dodaj następujący kod do functions.php. W ten sposób możesz faktycznie dodać klasę do łączy menu:

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

        }
}

Pod koniec kodu znajduje się kilka wierszy rozpoczynających się od $ item_output. W szczególności chcesz obejrzeć ten kawałek:

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

Ponieważ ten wiersz określa dane wyjściowe dla początku html łącza. Jeśli zmienisz to na coś takiego:

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

Następnie wszystkie linki w menu będą miały dodane class = "abc".

To powiedziawszy, nie pozwala na niestandardową klasę dla każdego linku (a przynajmniej nie wiem, jak go kodować). To dla mnie problem.

Dla tych, którzy pytają, dlaczego chcesz to zrobić? Chcę, aby moje linki menu były otwarte lightboxy (a konkretnie colorboxy) i do tego wymagają klas na linkach. Na przykład:

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

Czy jest jakiś sposób na dynamiczne generowanie klas, takich jak „lightbox1” dla pierwszego łącza, „lightbox2” dla drugiego łącza i tak dalej?

ROZWIĄZANY!!!! Musiałem to rozgryźć, aby element menu zawierał link do wbudowanego HTML w fancyboksie. Wklej następujący kod do funkcji theme.php:

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

Następnie ... na karcie Menu pulpitu nawigacyjnego WP utwórz niestandardowy link i dodaj go do swojego menu. Na górze, gdzie jest napisane Opcje ekranu, upewnij się, że masz zaznaczoną opcję „Powiązanie linków (XFN)”. Doda to pole do niestandardowego elementu menu. Wpisz „fancybox” (bez cudzysłowów) w polu i zapisz menu.

Funkcja wyszukuje połączenie z menu nawigacyjnym, a następnie znajduje gdziekolwiek masz a rel="fancybox"i zamienia je na rel="fancybox" class="fancybox". Możesz zastąpić fancybox dowolną klasą, którą musisz dodać do pozycji menu. Gotowe i gotowe!

Obecne odpowiedzi wydają się nie rozpoznawać, że pytanie polega na tym, jak dodać klasę do aelementu, a nie do lielementu, lub są zbyt skomplikowane. Oto proste podejście wykorzystujące nav_menu_link_attributesfiltr, który pozwala kierować reklamy na określone menu na podstawie informacji o ślimaku i na określony link do strony w tym menu na podstawie jego identyfikatora. Możesz var_dump $ args i $ item, aby uzyskać więcej sposobów na stworzenie swojego stanu.

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

Wiem, że udzielono odpowiedzi dawno temu, ale tak jak ogólne informacje, znalazłem, jak dodać klasę do każdej pozycji menu indywidualnie, korzystając z opcji „Ekran” strony administracyjnej WordPress dla menu niestandardowych.

Musiałem ostatnio zrobić coś podobnego i wymyśliłem inny sposób. Musiałem dodać podobną klasę dla wtyczki lightbox Nivo. Dodałem więc „nivo” do atrybutu rel („Relacja łącza (XFN)”), a następnie do nav_menu_link_attributesfiltru.

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

W górnej części Appearance -> Menusstrony kliknij, aby rozwinąć Screen Options, zaznacz pole wyboru CSS Classes. Teraz, gdy rozwiniesz każdy z dodanych elementów menu, zobaczysz CSS Classes (optional)pole.