post
Adicionar CLASS customizada no LI do menu WordPress
Publicado em: 19/12/2021 / Atualizado em: 19/12/2021
Caso você já tenha registrado seu menu em seu tema WordPress como mostra este artigo (Registrar e adicionar menu no Tema WordPress), você pode adicionar mais um parâmetro customizado para adicionar uma Class de CSS que se repete em todas as LI (tag de lista) em seu menu.
1° Adicionar parâmetro no menu
Como no exemplo mostrado neste artigo que criei anteriormente, o menu está com a estrutura abaixo:
<?php wp_nav_menu(array(
'theme_location' => 'menu-principal',
'container_class' => '{CLASS CONTAINER TAG DIV}',
'menu_class' => '{CLASS DA TAG UL}',
)) ?>
Agora vamos adicionar um o parâmetro 'add_li_class' => '{CLASS DA LISTA}'
, onde “class da lista” é onde você vai colocar quantas class
você quiser, podendo separa-las por espaço, como por exemplo: 'add_li_class' => 'class_numero_1 class_numero_2'
Seu menu vai ficar com está aaparencia:
<?php wp_nav_menu(array(
'theme_location' => 'menu-principal',
'container_class' => '{CLASS CONTAINER TAG DIV}',
'menu_class' => '{CLASS DA TAG UL}',
'add_li_class' => '{CLASS DA LISTA}',
)) ?>
2° Registrar função personalizada no arquivo functions.php
Abra o arquivo functions.php
do seu tema, e adicione a função abaixo:
function class_li_menu_wp($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'class_li_menu_wp', 1, 3);
Salve o arquivo, e pronto!
Dicas: Caso queira adicionar uma class em apenas 1 item do menu especifico, você pode acessar o próprio painel adm do wordpress e adicionar em seu gerenciador de menu, veja o artigo clicando aqui.
Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/1292
ID de Referência: 1292
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.