Solution 1: utilisation de la personnalisation du déambulateur
J'ai eu une idée de la classe d' ajout de span dans la balise d'ancrage de lien wp_nav_menu et j'ai apporté quelques modifications à vos besoins.
1. Ajoutez d'abord ce code ci-dessous à votre fichier functions.php.
class Nav_Walker_Nav_Menu 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 ) .'"' : '';
$description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'><span data-hover="'. $item->title .'">';
$item_output .=$args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
$item_output .= $description.$args->link_after;
$item_output .= '</span></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
emplacement d' wp_nav_menu
installation.
Le code est expliqué ci-dessous, il installe donc le nouveau menu personnalisé dans ce cas Nav_Walker_Nav_Menu
.
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'walker' => new Nav_Walker_Nav_Menu() ) ); ?>
J'espère que cela vous aidera bien!
Solution 2: utilisation wp_list_pages
Veuillez consulter cette page . Vous pouvez voir leur extrait. Si vous mettez les portées autour des balises de lien, vous pouvez utiliser link_before
etlink_after
wp_list_pages("link_before=<span data-hover="link-text-here">&link_after=</span>");
AddWeb Solution Pvt Ltd
la source
Depuis la version 4.4.0, le filtre «nav_menu_item_args» a été ajouté. Cela vous permet de définir les attributs «link_before» et «link_after» pour chaque élément.
la source
S'il vous plaît essayez ce qui suit:
Et ajoutez ceci à
functions.php
:De cette façon, vous pouvez facilement ajouter une balise span ...
la source