web-dev-qa-db-fra.com

ajout de la classe span dans la balise d'ancrage du lien wp_nav_menu

J'ai trouvé des exemples d'ajout d'une classe à des éléments de niveau supérieur, nous pouvons donc afficher une flèche dans les éléments de menu avec des sous-éléments, mais il semble terrible de faire face aux classes WordPress déjà intégrées, ne peut pas afficher la flèche avec survol actuel et CSS , ça ruine tous les états.

Le menu de navigation actuel est comme ceci <li><a>Text</a></li>

Est-il possible d'ajouter un <span class="arrow"></span> à la place des balises parent <a></a>?

Exemple,

Ajouter ⇒ <span class="arrow"></span> à l'intérieur de ⇒ tags <a/></a>

Donc ⇒ <li><a>Text<span class="arrow"></span></a></li> qui est le parent.

Le code actuel Ajoute les balises <span></span> en dehors des balises <a></a> qui sont parent

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

Titre de la question d'origine modifié à partir de: " ajouter une classe d'envergure à l'intérieur de <a>"

menusnavigationwalker
3
chris_r

Cela crée en fait deux cas où il affiche une classe étendue dans la balise aux niveaux primaire et secondaire afin que vous puissiez ajouter différentes images à votre classe étendue à des fins de conception et de navigation.

Cela aide les utilisateurs et les développeurs à indiquer s’il existe une liste déroulante dans votre menu d’en-tête et facilite également la navigation dans votre site Web.

1. Ajoutez d'abord ce code à votre fichier 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. Ajoutez le code ci-dessous à votre header.php où votre wp_nav_menu est installé.

Expliqué ci-dessous est le code afin qu'il installe le nouveau menu personnalisé dans ce cas serait Nav_Walker_Nav_Menu.

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

3. Ajouter un peu de CSS

Ainsi, il est capable d'afficher vos nouvelles images de flèche d'étendue dans vos balises aux niveaux primaire et secondaire.

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

espérons cette aide! :)

4
chris_r

Avez-vous essayé d'utiliser les paramètres before ou link_before dans les arguments de votre tableau lors de la déclaration de votre fonction wp_nav_menu?

Remarque: utilisez after ou link_after pour l'effet opposé.

Exemple,

wp_nav_menu(

    //normal arguments here....etc

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

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


);

Du Codex:

$before
(chaîne) (facultatif) Texte avant le lien
Défaut: Aucun

   e.g. 'before'    => ''

ou...

$link_before
(chaîne) (facultatif) Texte avant le texte du lien
Défaut: Aucun

   e.g. 'link_before'    => ''

Ressources de soutien:

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

5
userabuser

Les deux réponses postées par userabuser et wordpress_designer sont excellentes, mais je voudrais poster une réponse concernant la combinaison des deux.

Avec cette réponse, vous pouvez utiliser la logique pour définir les endroits où vous ne souhaitez pas que le link_before soit appliqué. Ainsi que ce que vous voulez mettre avant le texte du lien.

Commencez par créer une classe très simple, comme celle ci-dessous. En réalité, cette classe est uniquement chargée de vérifier si l'élément n'est pas un sous-menu ($depth <= 0) et de nettoyer et de mémoriser la valeur 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;
        }
    }
}

La deuxième chose à faire est d’appliquer l’argument walker et l’argument link_before à votre tableau wp_nav_menu, comme ceci:

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