add classe span dentro da tag âncora do link wp_nav_menu

3

Eu encontrei exemplos adicionando uma classe aos itens de nível mais alto, para que possamos exibir uma seta nos itens de menu com subitens, mas é terrível lidar com as classes já construídas do WordPress, não é possível exibir a seta com as atuais e css pairar, apenas estraga todos os estados.

O menu de navegação atual é assim <li><a>Text</a></li>

Existe alguma maneira de adicionar <span class="arrow"></span> dentro das tags parent <a></a> ?

Exemplo,

Adicione ⇒ <span class="arrow"></span> dentro ⇒ <a/></a> tags

Assim ⇒ <li><a>Text<span class="arrow"></span></a></li> que é pai.

O código atual Adiciona as tags <span></span> fora das tags <a></a> que são pai

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth, $args) {
        $indent = str_repeat("\t", $depth);
        if('primary' == $args->theme_location && $depth ==0){
            $output .='&lt;span class="arrow">&lt;/span>';
        }
        $output .= "\n$indent<ul class=\"sub-menu\">\n";
    }
}

O título da pergunta original foi editado em: " adicione a classe span dentro de <a> "

    
por chris_r 15.11.2012 / 10:12

3 respostas

4

Isso cria duas instâncias em que exibe uma classe de span dentro da tag nos níveis primário e secundário, para que você possa adicionar imagens diferentes à sua classe de span para fins de design e navegação.

Isso ajuda os usuários e desenvolvedores a mostrar se há um menu suspenso no menu de cabeçalho e também facilita a navegação em seu website.

1. Adicione este código abaixo ao seu functions.php primeiro.

class Nav_Walker_Nav_Menu extends Walker_Nav_Menu {
     function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $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        ) .'"' : '';

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

        if ( 'primary' == $args->theme_location ) {
            $submenus = 0 == $depth || 1 == $depth ? get_posts( array( 'post_type' => 'nav_menu_item', 'numberposts' => 1, 'meta_query' => array( array( 'key' => '_menu_item_menu_item_parent', 'value' => $item->ID, 'fields' => 'ids' ) ) ) ) : false;
            $item_output .= ! empty( $submenus ) ? ( 0 == $depth ? '<span class="arrow"></span>' : '<span class="sub-arrow"></span>' ) : '';
        }
        $item_output .= '</a>';
        $item_output .= $args->after;

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

2. Adicione o código abaixo ao seu header.php onde o seu wp_nav_menu está instalado.

Abaixo está explicado o código para que o novo menu personalizado seja instalado, neste caso, Nav_Walker_Nav_Menu.

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'walker' => new Nav_Walker_Nav_Menu() ) ); ?>

3. Adicione um pouco de CSS

Assim, é possível mostrar suas novas imagens de flecha de alcance em suas tags no nível primário e secundário.

#menu-header-menu li span.arrow { height:12px;background-image: url("images/nav-arrows.png");background-position: -8px -3px;background-repeat: no-repeat;float: right;margin: 0 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu li a:hover span.arrow{ height:12px;background-image: url("images/nav-arrows.png");background-position: -39px -3px;background-repeat: no-repeat;float: right;margin: 0 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu ul.sub-menu li span.sub-arrow { height:12px;background-image: url("images/nav-arrows.png");background-position: -8px -39px;background-repeat: no-repeat;float: right;margin: -2px 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu ul.sub-menu li a:hover span.sub-arrow{ height:12px;background-image: url("images/nav-arrows.png");background-position: -39px -39px;background-repeat: no-repeat;float: right;margin: -2px 0px 0 10px;text-indent: -9999px;width: 12px;}

espero que essa ajuda! :)

    
por chris_r 15.11.2012 / 21:32
5

Você já tentou usar os parâmetros before ou link_before nos argumentos da matriz ao declarar sua função wp_nav_menu ?

Nota: use after ou link_after para o efeito oposto.

Exemplo,

wp_nav_menu(

    //normal arguments here....etc

    'before'    => '<span class="arrow"></span>',

    //or 'link_before' => '<span class="arrow"></span>',


); 

Do códice:

  

$before
(string) (opcional) Texto de saída antes do link
      Padrão: nenhum

   e.g. 'before'    => ''

ou ...

  

$link_before
(string) (opcional) Texto de saída antes do texto do link
     Padrão: nenhum

   e.g. 'link_before'    => ''

Recursos de suporte:

enlace

    
por userabuser 15.11.2012 / 14:55
0

Ambas as respostas postadas por userabuser e wordpress_designer são ótimas, mas eu gostaria de postar uma resposta que é uma combinação das duas.

Com essa resposta, você pode usar a lógica para definir onde não deseja que link_before seja aplicado. Bem como o que você deseja colocar antes do texto do link.

Primeiro crie uma classe muito simples como a abaixo. Esta classe é, na verdade, apenas responsável por verificar sempre que o elemento não é um submenu ( $depth <= 0 ) e por limpar e lembrar o valor link_before .

if ( ! class_exists('PREFIX_Menu_Walker')) {
    class PREFIX_Menu_Walker extends Walker_Nav_Menu {
        public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $before = property_exists($args, 'link_before') ? $args->link_before : '';

            // Empty the 'link_before' when walking over a root level element
            if ($depth <= 0 && !empty($before)) {
                $args->link_before = '';
            }

            // Continue with the default/core wordpress nav menu walker class
            parent::start_el( $output, $item, $depth, $args, $id );

            // Remember what 'link_before' $args where set.
            $args->link_before = $before;
        }
    }
}

A segunda coisa que você terá que fazer é aplicar o argumento walker e o argumento link_before à sua matriz wp_nav_menu , desta forma:

wp_nav_menu([
    'link_before' => '<span>Hello</span>',
    'walker' => new PREFIX_Menu_Walker()
]);
    
por Fleuv 04.12.2017 / 14:52