Poucos conhecem a propriedade existente no sistema de menus do WordPress que permite adicionar uma descrição aos itens de um menu. Isto se dá principalmente por que esta opção está desativada por padrão e mesmo se ativo, é necessário adicionar um pouco de código para que funcione. A maioria dos temas não levam essa opção em conta, mas neste artigo vamos ensinar a habilitar em qualquer tema.
Mas antes, por que adicionar uma descrição aos menus? O menu ideal é o auto-explicativo; o usuário olha e sabe do que se trata. O menu “Sobre” deve ter informações sobre o site ou empresa, “Serviços” deve mostrar o que oferecem. Mas mesmo assim, as descrições podem ajudar com a experiência do usuário (UX – User Experience) ao acessar seu site. Uma descrição direta pode ajudar ao usuário encontrar facilmente o que ele procura.
Um menu com descrição é especialmente útil quando ele é muito extenso, ou possui itens que possam parecer contraditórios, por exemplo: um ítem chamado “Serviços” e outro “Produtos”. O primeiro descreve o que a empresa ou o site pode fazer e o segundo é o que a empresa já possui feito.
1. Habilitando as descrições do menu
Para isto, basta acessar o seu painel do WordPress, ir em “Aparência > Menus” (ou “Appearance > Menus“). No canto superior direito da janela existe uma aba chamada “Opções de Tela” (“Screen Options“) que, ao clicar, se expande e mostra a opção “Descrição” que estamos procurando. Habilite-a.
Agora o campo de descrição deve aparecer nos seus menus do item, assim:
É possível inserir a descrição do seu ítem de menu, mas ele não vai aparecer direto no seu tema ainda. Para isto, precisamos adicionar um pouco de código.
2. Adicionando a classe Walker
A classe Walker extende a classe existente no WordPress. Em termos simples, ele adiciona uma linha de código para mostrar a descrição do seu menu. Para isto, basta adicionar o seguinte no seu arquivo de functions.php:
<?php 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 ); } } ?>
Mas ainda não acabou.
3. Habilite o Walker no wp_nav_menu
Os temas do WordPress usam a função wp_nav_menu() para mostrar o menu na tela – inclusive, já mostramos como criar um menu dropdown. A maioria dos temas incluem os menus em seu template do header.php, mas é possível que seu tema utilize outro arquivo. Neste caso, basta procurar nos arquivos do seu tema.
O que precisamos encontrar é a função wp_nav_menu() e mudá-lo para ficar assim:
<?php $walker = new Menu_With_Description; ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
Na primeira linha estamos puxando a classe Walker que definimos antes no functions.php. E na segunda linha, a única linha extra que precisamos adicionar é o ‘walker’ => $walker (pode inclusive manter o wp_nav_menu como está, adicionando só isto).
4. Estilizando a descrição
A classe walker vai mostrar a descrição na seguinte linha:
<?php $item_output .= '<br /><span class="sub">' . $item->description . '</span>'; ?>
O código acima adiciona um break (br) após o link e envolve a descrição dentro de uma span, assim:
<li id="menu-item-01" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.exemplo.com/sobre/">Sobre<br /><span class="sub">Quem somos nós?</span></a></li>
Para estilizar, vamos abrir o style.css e adicionar o seguinte estilo:
span.sub { font-style:italic; font-size:small; }
Pode parecer um pouco trabalhoso, mas o resultado final pode valer a pena. Seus leitores encontram facilmente o conteúdo e você não precisa se debater para instalar plugins ou criar um menu estático que seja difícil de editar mais tarde.
Abraços!