Removendo o link '<a>' do menu '<li>' para alguns "links" sem JS
Eu quero alguns dos meus itens de menu de navegação para mostrar texto sem formatação, sem um hiperlink. Normalmente, esse código apareceu:
<ul class="..." id="...">
<li><a href="">my item</a>
</li>
</ul>
e estou tentando conseguir isso:
<ul class="..." id="...">
<li>my item
</li>
</ul>
mas não para todos os itens do menu, é claro, mas para alguns deles. Simplesmente dizendo: Eu quero remover o hiperlink de itens específicos dos meus menus. Existe alguma opção para esse tipo de coisa?
P.S. o 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,)
);
Por "...", removi minha classe de navegação personalizada, a classe de menu e o nome do local do tema
Obrigado.
Assumindo que você está usando wp_nav_menu() para exibir sua navegação, você pode aplicar um walker que procure 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(),
) );
Observe a nova Walker Class na parte inferior da lista de parâmetros wp_nav_menu().
Você precisará adicionar a classe walker abaixo ao seu arquivo 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 );
}
}
O que isso faz é procurar uma classe noLink e, se ela existir no item da lista, ignoramos o processo HTML da âncora.
A etapa final é acessar o WordPress, navegar até Appearance -> Menus e, no canto superior direito, clicar em Screen Options e garantir que as "Classes CSS" sejam marcadas:
Então, em itens de lista, queremos apenas mostrar como texto, adicionamos a classe noLinks da seguinte forma:
