O sistema de menus no WordPress tem uma característica construída onde você pode adicionar descrição nos menus. No entanto, essa característica é escondida por padrão. Mesmo quando ativada, você deve continuar sem ver a descrição nos menus sem ter adicionado alguns códigos no seu tema.

Note: Este tutorial requer que você tenha um conhecimento adequado de HTML, CSS e Desenvolvimento de temas WordPress.

Antes de iniciarmos, primeiro vamos falar um pouco sobre porque você quer adicionar descrição no menu do seu site? Algumas pessoas acham que isso vai ajudar com o SEO, mas nós acreditamos que a razão principal para você querer usá-los deva ser a experiência do usuário no seu site. Descrições podem ser usadas para avisar aos visitantes o que eles vão encontrar quando clicarem naquele menu. Uma descrição intrigante vai atrair melhor os seus visitantes a clicarem no menu do seu site.

Veja a imagem abaixo para um exemplo de descrição em um menu:

Passo 1: Adicione a opção de descrição

Siga para o painel do WordPress em Aparência > Menus. Clique no botão de “Opção de Tela” no canto direito da página. Marque a caixa “Descrição”.

Checando essa caixa você irá ativar a opção de descrição nos itens dos menus:

Agora você pode adicionar a descrição para o menu do seu WordPress. No entanto, estas descrições não irão aparecer ainda em seu tema. Para exibir a descrição do menu nós iremos adicionar alguns códigos.

Adicionando a Classe Walker

Referência: Classe Walker

A Classe Walker estende a classe que já existe no seu WordPress. Ele basicamente adiciona linhas de código para exibir as descrições do menu. Adicione este código em seu arquivo functions.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 );
	}
}

Passo 3: Ativando Walker em wp_nav_menu

Temas WordPress usam a função wp_nav_menu() para exibir os menus. A maioria dos temas WordPress adicionar menus no arquivo header.php. No entanto, é possível que o seu tema tenha usado outros modelos de arquivo para exibir os menus.

O que nós precisamos fazer agora é encontrar a função wp_nav_menu() no seu tema (provavelmente em header.php) e alterar ele assim:

<?php $walker = new Menu_With_Description; ?>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>

Na primeira linha nós configuramos $walker para usar a classe walker que nós definimos antes no arquivo functions.php. Na segunda linha de código, o único argumento extra que precisamos adicionar em nosso menu wp_nav_menu é o argumento ‘walker’ => $walker.

Passo 4: Estilizando a descrição

A Classe walker que adicionamos no inicio exibe as descrições do item nesta linha do código:

$item_output .= '<br /><span class="sub">' . $item->description . '</span>';

O código acima adiciona uma quebra de linha ao menu adicionando uma tag e depois divide sua descrição com uma sub classe span. assim:

<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 a forma como sua descrição é exibida em seu site, você pode adicionar CSS ao seu tema. Nós testamos isso no tema Twenty Twelve e usamos esse css:

.menu-item {
border-left: 1px solid #ccc;
}

span.sub {
font-style:italic;
font-size:small;
}

Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.