post

Adicionar CLASS customizada no LI do menu WordPress

Publicado em: 19/12/2021 / Atualizado em: 19/12/2021

Categorias: BlogWordpress

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.

Bruno Devs News


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.

Clique aqui e entre em contato


Comentários