Adicionar classe ao link específico no menu personalizado

9

Eu sei que você pode adicionar uma classe nas opções do menu personalizado, mas ela é adicionada ao LI antes do A. Eu quero aplicar a classe diretamente a esse A específico, e não ao LI inteiro.

Então, em vez de a 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 idéia?

    
por Rarst 22.02.2011 / 21:12

6 respostas

11

você pode usar o filtro 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;
}

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

.my_class a{
   background-color: #FFFFFF;
}
    
por Bainternet 22.02.2011 / 22:10
4

Eu encontrei uma solução neste site através de o uso de um walker personalizado .

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

Primeiro, substitua o padrão wp_nav_code 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 adicionar uma classe aos links de 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 como isto:

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

Em seguida, todos os seus links no menu terão class="abc" adicionado a eles.

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

Para aqueles perguntando por que você gostaria de fazer isso? Eu quero ter meus links de menu abertos (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?

    
por Raiman Au 29.03.2011 / 08:47
3

RESOLVIDO !!!! Eu precisava descobrir isso para fazer o link do item de menu para HTML embutido em um fancybox. Cole o seguinte código na função .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');

Em seguida ... na aba Menu do WP Dashboard, crie um link personalizado, adicione-o ao seu menu. No topo onde está escrito Screen Options, verifique se você tem "Link Relationship (XFN)" marcado. 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 no menu de navegação e, em seguida, localiza onde você tem um rel="fancybox" e o substitui por rel="fancybox" class="fancybox" . Você pode substituir o fancybox com qualquer classe que precisar adicionar aos seus itens de menu. Feito e feito!

    
por HahahaComedy 14.12.2011 / 22:47
1

As respostas atuais parecem não reconhecer que a pergunta é como adicionar uma classe ao elemento a e não ao elemento li , ou são muito complicadas. Aqui está uma abordagem simples usando o filtro nav_menu_link_attributes que permite que você segmente um menu específico com base em seu slug e um link de página específico nesse menu com base em seu 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;
}
    
por MarcGuay 06.03.2016 / 21:17
0

Eu sei que isso foi respondido há muito tempo, mas assim 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.

    
por RaiGA 21.11.2011 / 21:49
0

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

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);
    
por darrinb 08.01.2015 / 02:28

Tags