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.

Menu

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.

descrição

Agora o campo de descrição deve aparecer nos seus menus do item, assim:

descrição no item

É 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!