O sistema de menus do WordPress possui um recurso integrado onde você pode adicionar descrições aos itens do menu. No entanto, esse recurso está oculto por padrão. Mesmo quando ativado, a exibição deles não é suportada sem adicionar algum código. A maioria dos temas não é projetada pensando nas descrições de itens de menu. Neste artigo, mostraremos como ativar descrições de menu no WordPress e como adicionar descrições de menu em seus temas do WordPress.
Observação: Este tutorial requer que você tenha um bom entendimento de HTML, CSS e desenvolvimento de temas do WordPress.
Quando e por que você gostaria de adicionar descrições de menu?
Alguns usuários acham que adicionar descrições de menu ajudará no SEO. No entanto, acreditamos que a principal razão pela qual você gostaria de usá-los é para oferecer uma melhor experiência ao usuário em seu site.
As descrições podem ser usadas para dizer aos visitantes o que eles encontrarão se clicarem em um item de menu. Uma descrição intrigante atrairá mais usuários para clicar nos menus.
Etapa 1: Ativar Descrições de Menu
Vá para Aparência » Menus. Clique no botão Opções de Tela no canto superior direito da página. Marque a caixa Descrições.
Isso ativará o campo de descrições em seus itens de menu. Assim:
Agora você pode adicionar descrições de menu aos itens do seu menu do WordPress. No entanto, essas descrições ainda não aparecerão em seus temas. Para exibir descrições de menu, teremos que adicionar algum código.
Etapa 2: Adicionar a classe walker:
A classe Walker estende a classe existente no WordPress. Basicamente, ela apenas adiciona uma linha de código para exibir as descrições dos itens de menu. Adicione este código ao arquivo functions.php do seu tema.
class Menu_With_Description 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 ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Etapa 3. Ativar Walker em wp_nav_menu
Temas do WordPress usam a função wp_nav_menu() para exibir menus. Também publicamos um tutorial para iniciantes sobre como adicionar menus de navegação personalizados em temas do WordPress. A maioria dos temas do WordPress adiciona menus em header.php. No entanto, é possível que seu tema tenha usado outro arquivo de modelo para exibir menus.
O que precisamos fazer agora é encontrar a função wp_nav_menu() em seu tema (muito provavelmente em header.php) e alterá-la assim.
<?php $walker = new Menu_With_Description; ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
Na primeira linha, definimos $walker para usar a classe walker que definimos anteriormente em functions.php. Na segunda linha de código, o único argumento adicional que precisamos adicionar aos nossos argumentos existentes de wp_nav_menu é 'walker' => $walker.
Passo 4. Estilizando as Descrições
A classe walker que adicionamos anteriormente exibe as descrições dos itens nesta linha de código:
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
O código acima adiciona uma quebra de linha ao item do menu adicionando uma tag
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">About<br /><span class="sub">Who are we?</span></a></li>
Para alterar como suas descrições aparecem em seu site, você pode adicionar CSS na folha de estilos do seu tema. Testamos isso no Twenty Twelve e usamos este CSS.
.menu-item {
border-left: 1px solid #ccc;
}
span.sub {
font-style:italic;
font-size:small;
}
Esperamos que você ache este artigo útil e que ele o ajude a criar menus com descrições de menu com aparência legal em seu tema. Perguntas? Deixe-as nos comentários abaixo.
Recursos Adicionais
Como Estilizar Menus de Navegação do WordPress
Como Adicionar Itens Personalizados a Menus Específicos do WordPress
Menus com Classe de Descrição de Bill Erickson
Matthew Blaxton
Em PHP 8.0 e superior, isso lançará um erro crítico.
Você precisa encontrar esta linha:
function start_el( $output, $item, $depth, $args ) {
Alterar essa linha para a seguinte deve fazer o erro desaparecer:
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
WPBeginner Support
Obrigado por compartilhar isso para quem usa PHP 8.
Admin
Norman
Olá,
Como você pode tornar a descrição clicável também?
WPBeginner Support
We cover that in step 4
Admin
kayvan A.Gilani
Para Adicionar Descrições de Menu em Meus Temas WordPress, fiz os passos 1 e 2 deste blog, mas não consegui seguir o passo 3 para avançar e realizar a mudança total.
WPBeginner Support
Se você não encontrar a função em seu tema, recomendamos entrar em contato com o suporte específico do seu tema, e eles deverão ser capazes de ajudar.
Admin
yiannis
Olá,
Como desativar a descrição da categoria de produto no max mega menu?
Eu já fui em Mega Menu > Configurações Gerais e defini Descrições de Itens do Menu como desativado, mas o problema persiste.
WPBeginner Support
Você deve entrar em contato com o suporte do plugin, e eles poderão ajudar com a configuração que não está funcionando corretamente.
Admin
Sergio
Muito obrigado!
WPBeginner Support
You’re welcome
Admin
Lanka
Muito obrigado, você me salvou
JKLYN
Obrigado. Economizou meu tempo.
dan
Isso pode funcionar com o WP_Bootstrap_Navwalker?
pois eu tentei e quebrou meu site....
kalpana
Muito obrigado.... foi muito útil para mim.... você salvou meu dia
Steven
como desativar a descrição no layout mobile?
Anzani Zahrani
Olá.. Por favor, ajude..
Como adicionar título de categoria, sem usar descrição de título de categoria?
Ido Schacham
Totalmente útil, obrigado!
Rahman
Ótima dica, mas na descrição do menu não suporta tags html. Alguém sabe sobre isso?
Obrigado
Iryna
Olá pessoal,
Alguma ideia de como permitir tags html na descrição?
remove_filter(‘nav_menu_description’, ‘strip_tags’);
esta não funcionou para mim.
Damien Carbery
@Iryna: Você pode postar seu código em algum lugar, por exemplo, pastebin.com.
Onde você chama remove_filter() determinará se funciona – ele precisa ser chamado após a chamada de add_filter().
Chamar isso pouco antes da chamada de wp_nav_menu() pode funcionar.
Max
Existe alguma maneira para a descrição não ser hiperlinkada?
Ashok
obrigado… funcionou. mas na descrição do menu não suporta tags html.
igorasas
Já pode estar lá pronto para conectar? Como este hack funcionará com o tema "Twenty TwelveVersão: 1.5"
? E assim como com o plugin wpml?
Cara
Obrigado pela dica
Phong
Obrigado, isso foi realmente útil para apenas copiar e colar isso e ter uma imagem rápida.
Chad
Ei cara, adicionei a classe walker ao functions.php, mas não consigo encontrar o wp_nav_menu no tema genesis. O que estou perdendo? Não tenho ideia do que fazer a seguir?!?!
Ksenia
Você explica muito bem – detalhado e claro. 1 minuto e as descrições dos itens do menu estão ok. Obrigado!
Mary Anne
Muito obrigado por este tutorial. Foi recomendado para mim e funcionou perfeitamente para fazer as alterações que eu queria. No entanto, ao fazer essas alterações, perdi meus menus de subitens suspensos. Alguma ideia do que afetou isso na mudança de código?
Obrigado pelo seu tempo e tutorial
WPBeginner Support
Parece um problema de CSS, sentimos muito por não podermos ser mais específicos. Tente usar as ferramentas de desenvolvedor do Google Chrome para depurar.
Admin
Paul Renault
Implementei as descrições do menu e funcionou muito bem. Agora meu cliente está pedindo uma quebra de linha dentro de uma das descrições. Tentei colocar um retorno de carro e inserir uma tag
no campo de descrição através do admin. Não aparece no front-end. O WP remove essas edições. Existe alguma maneira de resolver isso?
WPBeginner Support
Se o seu cliente apenas quer espaçamento, você pode usar CSS para isso.
Admin
Paul Renault
O cliente quer uma quebra de linha. Existe alguma maneira de inserir uma tag
na descrição? Se eu colocar uma agora, ela é removida.
Barry
Ótimo tutorial, pessoal, só quero saber como implementar isso em um menu personalizado exibido usando o widget Menu Personalizado?
Oryan Consulting
Obrigado! Trabalho com WordPress há anos e nunca tinha ouvido falar disso antes. Eu estava querendo remover as descrições, pois eram muito redundantes no site em que estou trabalhando. Procurei em todos os lugares de onde elas vinham.
Ah, que alegria!
sambassador
funciona!
mas para php 5.4 você terá que corresponder aos argumentos do wp walker para a função start_el:
function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 )
e substitua $item por $object.
Steve Covello
Você é demais!! Funcionou perfeitamente.
Kevin Gilbert
Perfeito. Era exatamente o que eu precisava para finalizar um site. Tive alguns problemas com o CSS, mas finalmente descobri e consegui fazer funcionar. Obrigado pelos ótimos artigos.
Jon
Dica excelente. Funcionou perfeitamente!
Jedediah White
Isso funcionou perfeitamente para mim. A função de classe também é perfeita. Muito obrigado!
Pankaj
Eu precisava criar a mesma coisa e estava totalmente perdido.
Eu estava planejando fazer algumas coisas estúpidas para conseguir isso.
Graças a Deus encontrei este post e economizei tempo e estresse!
Eu simplesmente amo este site, aprendi tantas coisas.
Muito obrigado por mostrar as coisas mais fáceis aqui.
Pankaj
A tag span também está aparecendo nos submenus.
não está aparecendo lá, mas está ocupando tanto espaço que fica muito estranho.
existe alguma solução alternativa para isso??
DiTesco
Este é realmente um ótimo tutorial e eu estava me perguntando se isso funcionaria no Thesis 1.8.5? Se não, seria ótimo se você pudesse fornecer um. Com certeza ajudarei você a divulgá-lo. Parabéns!
svet
Segui seu tutorial e adicionei descrições ao meu menu. Obrigado! No entanto, quando estou no modo mobile, o menu se converte em um menu dropdown e o título e a descrição do menu ficam conectados. Por exemplo, se meu item de menu for “sobre” e a descrição “mais sobre mim”, a versão mobile mostra “sobremais sobre mim”. Existe uma maneira de corrigir isso?
David
Tive o mesmo problema. Eis o que fiz.
Eu mudei isto:
$description = ! empty( $item->description ) ? ‘<span>’.esc_attr( $item->description ).'</span>’ : ”;
Para isto:
$description = ! empty( $item->description ) ? ‘<br /><span>’.esc_attr( $item->description ).'</span>’ : ”;
Não tenho certeza se é a melhor solução, mas funcionou para mim.
Garrett Hyder
Obrigado pessoal, encontrei o que SVET e DAVID fizeram com o menu móvel.
O código parece ter mudado, a minha mudança foi simplesmente anexar em um span com o separador de traço e na minha consulta de desktop simplesmente suprimi-o, pois não era necessário lá.
$item_output .= ‘ – ‘;
Dentro da minha consulta apenas para desktop, defina o span para display none;
@media only screen and (min-width: 740px) {
header #submenu li span.dash { display:none; }
Espero que ajude, resolveu meu problema muito bem.
Nicola
Ótimo post – muito claro, exatamente o que eu precisava e funcionou perfeitamente. Obrigado!
Samedi Amba
Obrigado pelo ótimo tutorial. Fiz os principais passos bem, como você pode ver em
http://ueab.ac.ke/demo/index
Fiquei preso com o estilo - como reduzo o espaço entre o Rótulo do Menu Principal e a descrição? Sua ajuda é muito apreciada.
Equipe Editorial
Tem a ver com a altura da linha da sua classe .menu a do seu tema. Se você reduzir isso, o espaçamento se reduzirá.
Admin
Chris Rouse
Ótima postagem. Tentei investigar isso antes, mas as instruções anteriores que encontrei não eram tão fáceis de seguir. Consegui inserir o código do functions.php, descobrir como alterar a classe walker no meu arquivo de cabeçalho (diferente para o tema que uso, mas direto ao ponto) e fazer as coisas funcionarem em cerca de 15 minutos do início ao fim.
Uma parte que você pode querer adicionar é como incluir a borda direita no último item do menu usando a propriedade :last-child.
.menu-item:last-child { border-right: 1px solid #ccc; }
Damien Carbery
Em vez de estender Walker_Nav_Menu, seria bom (e mais fácil) se um filtro fosse fornecido, por exemplo: Se o código principal tivesse: $item_output .= apply_filters( ‘walker_nav_menu_description’, $item->description);
Então a função de filtro personalizada teria apenas: return "" . $description . "";
Cathy Earle
Ótimas informações… vou começar a adicionar isso aos meus sites. Obrigado!