Adicionar classe ao link específico no menu personalizado

Eu sei que você pode adicionar uma classe nas opções de menu personalizadas, mas a adiciona ao LI antes do A. Quero aplicar a classe diretamente a esse A específico e não ao LI inteiro.

Então, ao invés da saída ser

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

Eu também quero que seja assim.

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

Alguma ideia?

você pode usar nav_menu_css_classfiltro

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

Usando este item $, você pode qualquer condição que desejar. e isso adicionará a classe ao li específico e você poderá estilizar a tag a com base da seguinte forma:

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

Encontrei uma solução neste site através do uso de um andador personalizado .

Duas etapas: substitua o código padrão wp_nav_menu por um código editado e adicione código ao functions.php do tema.

Primeiro, substitua o wp_nav_code padrão pelo seguinte (o código é copiado do site acima):

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

Em seguida, adicione o seguinte código ao functions.php. Ao fazer isso, você pode realmente adicionar uma classe aos links do 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';
        }

        }
}

No final do código, há várias linhas que começam com $ item_output. Em particular, você quer olhar para esta peça:

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

Porque esta linha determina a saída para o início do link html. Se você mudar para algo assim:

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

Todos os seus links no menu terão class = "abc" adicionado a eles.

Dito isto, ele não permite uma classe personalizada para cada link (ou pelo menos eu não sei como codificá-lo). Este é um problema para mim.

Para aqueles que perguntam por que você quer fazer isso? Desejo que meus links de menu abram as caixas de luz (caixas de cores, para ser mais específico), e eles exigem classes nos links para fazer isso. Por exemplo:

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

Existe possivelmente uma maneira de gerar dinamicamente as classes, como "lightbox1" para o primeiro link, "lightbox2" para o segundo link e assim por diante?

RESOLVIDO !!!! Eu precisava descobrir isso para criar o link do item de menu para HTML embutido em uma caixa de fantasia. Cole o seguinte código na function.php do seu tema:

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

Então ... na guia Menu do WP Dashboard, crie um link personalizado e adicione-o ao seu menu. No topo, onde diz Opções de tela, verifique se a opção "Link Relationship (XFN)" está marcada. Ele adicionará esse campo ao seu item de menu personalizado. Digite "fancybox" (sem aspas) no campo e salve seu menu.

A função procura a chamada para o menu de navegação, localiza onde quer que você a tenha rel="fancybox"e a substitui por a rel="fancybox" class="fancybox". Você pode substituir o fancybox por qualquer classe que precise adicionar aos itens de menu. Feito e feito!

As respostas atuais parecem não reconhecer que a questão é como adicionar uma classe ao aelemento e não ao lielemento, ou são muito complicadas. Aqui está uma abordagem simples usando o nav_menu_link_attributesfiltro que permite segmentar um menu específico com base na lesma e um link de página específico nesse menu com base no ID. Você pode var_dump $ args e $ item para obter mais maneiras de criar sua condição.

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

Eu sei que isso foi respondido há muito tempo, mas, como informações gerais, descobri como adicionar uma classe a cada item de menu individualmente usando a opção "Tela" da página de administração do WordPress para menus personalizados.

Eu tive que fazer algo semelhante recentemente e descobri de outra maneira. Eu tive que adicionar uma classe semelhante para um plugin do Nivo lightbox. Então, adicionei "nivo" ao atributo rel ("Link Relationship (XFN)") e depois o seguinte no nav_menu_link_attributesfiltro.

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

Na área superior da Appearance -> Menuspágina, clique para expandir a Screen Options, marque a caixa de seleção CSS Classes. Agora, quando você expandir cada item de menu adicionado, verá um CSS Classes (optional)campo.