Suppression du lien "<a>" du menu "<li>" de certains "liens" sans JS

Question

Je souhaite que certains éléments de mon menu de navigation affichent du texte brut, sans hyperlien. Habituellement, ce code est apparu:

<ul class="..." id="...">
<li><a href="">my item</a>
</li>
</ul>

et j'essaie d'obtenir ceci:

<ul class="..." id="...">
<li>my item
</li>
</ul>

mais pas pour tous les éléments de menu, bien sûr, mais pour certains d'entre eux. Dire simplement: je veux supprimer le lien hypertexte de certains éléments de mes menus. Y a-t-il une option pour ce genre de chose?

P.S. le wp_nav_menu:

$items_wrap = '<nav class="...">';
$items_wrap .= '<ul id="%1$s" class="%2$s">%3$s</ul>';
$items_wrap .= '</nav>';
wp_nav_menu( array(
'container'       => false,
 'container_class' => false,
 'menu_class' => '...',
 'echo' => true,
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'depth' => 0,
 'theme_location' => '...',
 'items_wrap'        => $items_wrap,)
 );

Par "...", j'ai supprimé ma classe de navigation, ma classe de menu et le nom de l'emplacement du thème.

Je vous remercie.

Answer 1

En supposant que vous utilisiez wp_nav_menu() pour afficher votre navigation, vous pouvez appliquer un marcheur qui recherche les classes css:

$items_wrap  = '<nav class="...">';
$items_wrap .= '<ul id="%1$s" class="%2$s">%3$s</ul>';
$items_wrap .= '</nav>';

wp_nav_menu( array(
    'container'         => false,
    'container_class'   => false,
    'menu_class'        => '...',
    'echo'              => true,
    'before'            => '',
    'after'             => '',
    'link_before'       => '',
    'link_after'        => '',
    'depth'             => 0,
    'theme_location'    => '...',
    'items_wrap'        => $items_wrap,
    'walker'            => new Texas_Ranger(),
) );

Notez le nouveau Walker Class au bas de la liste de paramètres wp_nav_menu().

Vous devrez ensuite ajouter la classe de marcheur ci-dessous à votre fichier functions.php:

class Texas_Ranger extends Walker_Nav_Menu {

    /**
     * Building the List Item element
     * @param Referenced string $output
     * @param Post Object $item
     * @param int $depth
     * @param array $args
     * @return void
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent         = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' );

        // Passed Classes
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

        // build html
        $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $class_names . '">';

        // If 'noLink' exists in classes, don't HTML anchor tag.
        if( in_array( 'noLink', $classes ) ) {

            $item_output = apply_filters( 'the_title', $item->title, $item->ID );

        } else {

            // link attributes
            $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        ) .'"' : '';
            $attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';

            $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
                $args->before,
                $attributes,
                $args->link_before,
                apply_filters( 'the_title', $item->title, $item->ID ),
                $args->link_after,
                $args->after
            );
        }

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

Cela permet de rechercher une classe noLink et si elle existe dans l'élément de liste, nous ignorons le processus HTML d'ancrage.

La dernière étape consiste à vous connecter à WordPress, accédez à Appearance -> Menus et en haut à droite, cliquez sur Screen Options et assurez-vous que "Classes CSS" est coché:

  

Ensuite, dans les éléments de liste que nous voulons simplement afficher sous forme de texte, nous ajoutons la classe noLinks comme suit: