Adăugare span class în interiorul link-ului anchor din wp_nav_menu

Question

Adăugare span class în interiorul link-ului anchor din wp_nav_menu

15 nov. 2012, 11:12:19

Vizualizări: 27K

Voturi: 4

Am găsit exemple pentru adăugarea unei clase elementelor de nivel superior, astfel încât să putem afișa o săgeată în elementele de meniu cu sub-elemente, dar pare complicat să lucrăm cu clasele deja integrate în WordPress, nu putem afișa săgeata cu stările current și css hover, pur și simplu strică toate stările.

Meniul de navigare actual arată astfel <li><a>Text</a></li>

Există vreo modalitate de a adăuga un  în interiorul tag-urilor părinte <a></a>?

Exemplu,

Adaugă ⇒  în interiorul ⇒ <a/></a> tag-urilor

Astfel ⇒ <li><a>Text</a></li> care este părinte.

Codul actual adaugă tag-urile  în afara tag-urilor <a></a> care sunt părinte

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 .='<span class="arrow"></span>';
        }
        $output .= "\n$indent<ul class=\"sub-menu\">\n";
    }
}

_{Titlul original al întrebării editat din: "adaugă span class în interiorul <a>"}

chris_r

343

meniuri navigare walker

Comentarii

deoarece dorești să editezi elementul, nu întregul nivel, ar trebui să extinzi funcția start_el în loc de start_lvl. aici poți adăuga  în interiorul <a>.

fischi

15 nov. 2012 12:11:20

Toate răspunsurile la întrebare

Ai încercat să folosești parametrii before sau link_before în argumentele array când declari funcția wp_nav_menu?

Notă: folosește after sau link_after pentru efectul opus.

Exemplu:

wp_nav_menu(

    //argumente normale aici... etc

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

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


);

Din Codex:

$before
(string) (opțional) Text afișat înaintea tag-ului <a> al link-ului
Implicit: Niciunul

   ex. 'before'    => ''

sau...

$link_before
(string) (opțional) Text afișat înaintea textului link-ului
Implicit: Niciunul

   ex. 'link_before'    => ''

Resurse suplimentare:

http://codex.wordpress.org/Function_Reference/wp_nav_menu

Adam

16.5K

15 nov. 2012 15:55:12

Ambele răspunsuri postate de userabuser și wordpress_designer sunt grozave, dar aș dori să postez un răspuns care este o combinație a celor două.

Cu acest răspuns, poți folosi logica pentru a defini unde nu dorești ca link_before să fie aplicat. Precum și ce vrei să pui înaintea textului link-ului.

Mai întâi creează o clasă foarte simplă, precum cea de mai jos. Această clasă este de fapt responsabilă doar pentru verificarea dacă elementul nu este un sub-meniu ($depth <= 0) și pentru curățarea și memorarea valorii 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 : '';

            // Goalește `link_before` când parcurgi un element de nivel rădăcină
            if ($depth <= 0 && !empty($before)) {
                $args->link_before = '';
            }

            // Continuă cu clasa implicită/core din wordpress pentru navigarea în meniu
            parent::start_el( $output, $item, $depth, $args, $id );

            // Memorează ce valoare `link_before` au avut inițial $args.
            $args->link_before = $before;
        }
    }
}

Al doilea lucru pe care va trebui să-l faci este să aplici argumentul walker și argumentul link_before în array-ul tău wp_nav_menu, astfel:

wp_nav_menu([
    'link_before' => '<span>Salut</span>',
    'walker' => new PREFIX_Menu_Walker()
]);

luukvhoudt

841

4 dec. 2017 15:52:33

chris_r 343 · Accepted Answer · 2012-11-15T22:32:45Z

Aceasta creează de fapt două instanțe în care afișează un span class în interiorul tag-ului la nivelurile primar și secundar, astfel încât să puteți adăuga imagini diferite pentru span class în scopuri de design și navigare.

Acest lucru ajută utilizatorii și dezvoltatorii să vadă dacă există un meniu derulant în antet și, de asemenea, facilitează navigarea pe site-ul dvs.

1. Adăugați mai întâi acest cod în functions.php.

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. Adăugați codul de mai jos în header.php unde aveți wp_nav_menu instalat.

Explicația de mai jos arată cum se instalează noul meniu personalizat, în acest caz Nav_Walker_Nav_Menu.

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

3. Adăugați niște CSS

Pentru a afișa noile imagini cu săgeți în interiorul tag-urilor span la nivelurile primar și secundar.

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

Sper că vă ajută! :)