Madly Luv - O mLuv é um blog pessoal no qual aborda vários assuntos como design, músicas, literatura, arte, televisão etc. Desenvolvido e mantido por Ana Flávia Cador.

WP: Criando menus dinâmicos

Tutorial Wordpress

Um menu dinâmico para o wordpress é a coisa mais linda de se ver, haha. Ele é ótimo para dar liberdade para você criar o menu que você deseja e altera-lo quando quiser sem precisar mexer em código nenhum. Gosto muito de colocar esta opção para meus clientes porque assim dá mais autonomia para eles.

O legal de se utilizar menus dinâmicos no wordpress é, além da praticidade de manutenção, o item do menu fica em destaque na página, localizando o usuário sobre qual página ele está.

Percebeu que, ao entrar na página de Extras, o seu link do menu fica com cor diferente? Isso chama-se Highlight Active Menu.

Esta é a estrutura que fica no seu painel de controle. Você pode arrastar e deixar na ordem que quiser!

Neste tutorial lhe darei 2 tipos de menus. Um é utilizado em lista comum do html, que é o padrão do wordpress, e a outra opção é um hack pelo qual substitui a lista como um link normal mesmo. Ficou meio confuso? Segue o tutorial para saber mais. :)


Opção 1) Menu padrão do wordpress

Este é o estilo padrão que se utiliza o menu dinâmico. Há várias formas de se utiliza-lo, mas em sua síntese ele transforma os links de seu menu em uma lista no html através da tag wp_nav_menu(). Sua estrutura básica no código-fonte será assim:

<ul class="menu-dinamico">
	<li><a href="http://link.com/">link</a></li>
	<li><a href="http://link.com/">link</a></li>
	<li><a href="http://link.com/">link</a></li>
	<li><a href="http://link.com/">link</a></li>
</ul>

E, por padrão, sempre quando criamos um item de menu, a tag wp_nav_menu() irá adicionar parâmetros dentro da lista, como ID da página linkada, ordem de criação, classes padrões impostas automaticamente pelo wordpress, bem como classes no qual se definem se o link em questão está ativo (ex: o link da página "Extras" estará "ativado" quando o usuário estiver na página escolhida). Veja abaixo por fim como fica a estrutura de um item da lista:

<li id="menu-item-4451" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4275 current_page_item menu-item-4454">
   <a href="http://link.com/">link</a>
</li>

Muitas das classes acima você não irá utilizar. Fazem parte do procedimento padrão do wordpress. Basicamente, as classes que devemos nos atentar são: .current-menu-item e também a .current_page_item — que são as classes que fazem o menu ficar ativado ao entrar numa determinada página do menu. Você também pode se atentar à ID da lista (no exemplo acima é #menu-item-4451), se você quiser fazer um menu diferente para cada item. Fique livre para criar!

1.1) Ativando o menu em seu tema

Antes de tudo, você precisa permitir que seu tema seja capaz de criar os menus. Você fará isso adicionando esta linha abaixo no seu functions.php:

// menu dinâmico wordpress - madlyluv.com
register_nav_menus( array(
  'menu-topo' => __( 'Menu topo', '' )
));

Esta função, como o próprio nome já diz, irá registrar o menu de navegação. Através do array() eu irei acrescentar o local de menu menu, e o seu nome que aparecerá lá no meu painel de controle. É importante para caso você queira ter mais de um menu para não se confundir.

1.2) Adicionando o menu no local desejado

Segue abaixo o código que você deve colocar no local onde deseja ter o menu.

<?php 
wp_nav_menu ( 
  array(
	'theme_location'  => 'menu-topo',
	'menu'            => 'menu-dinamico',
	'container'       => '',
	'container_class' => '',
	'container_id'    => '',
	'menu_class'      => '',
	'menu_id'         => '',
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'items_wrap'      => '<ul class="menu-dinamico">%3$s</ul>',
	'depth'           => 0,
	'walker'          => ''
	)
  );
?>

Eu gosto de deixar os parâmetros do menu os mais limpo possível. Por isso, sempre deixo em branco a maioria de suas definições pois gosto de fazer quase tudo por CSS. Se você quiser estudar mais sobre a tag wp_nav_menu(), sugiro que leia o Codex que fala sobre esta função. As fundamentais que precisamos são estas:

  1. theme_location: determina o local do tema. Eu coloquei o nome menu-topo pois quero adicionar no topo (fique à vontade para mudar, só não se esqueça de ir lá no functions.php renomear também).;
  2. menu: nome do menu, que nomeei como menu-dinamico;
  3. items_wrap: a tag que envolverá a lista, com a classe de css que você defirnir. Eu usei o exemplo .menu-dinamico.
  4. %3$s: É o código padrão do wordpress que chama os links do menu

1.3) Estrutura básica do CSS

Esta é uma estrutura básica para o seu menu. Incremente-a como quiser!

/**** menu dinamico - madlyluv.com ***/
ul.menu-dinamico {margin: 0; padding: 0; list-style:none}
ul.menu-dinamico li {margin: 0; list-style:none; display:inline-block}
ul.menu-dinamico li a {color: #CORLINK; text-decoration: none; font-size: 15px; padding: 5px 10px;}
ul.menu-dinamico li.current-menu-item a, ul.menu-dinamico li.current_page_item a, ul.menu-dinamico li a:hover {color: #CORLINKATIVO}

É só você substituir o #CORLINK pelo código da cor que deseja e o #CORLINKATIVO para a cor que você quer que seu menu ativo fique. No css eu coloquei as classes .current-menu-item e .current_page_item juntas pois elas exercem a mesma função. E também acrescentei a cor mouseover (a:hover) no link o mesmo para as classes ativas. Pode mudar, se quiser ;)

1.4) Criando o menu no painel de controle

Esta é a melhor parte, haha. Você acessará o seu painel de controle e irá criar o menu que desejar. Vá na Dashboard e em Apearance (ou Aparência se seu WP for PT) e clique em Menus.

O painel é bem simples e te lembra um pouco as widgets, pois, você tem duas colunas onde uma você cria o menu e a outra é onde tem todas as opções de links, categorias e páginas. Ah! E você tem a possibilidade de criar links externos que não fazem parte do seu blog.

Depois dos itens adicionados você pode arrastar e ordenar os itens na ordem que quiser e ser feliz. ::love::

1.5) Tem como ter submenus Ana?

Sim, tem como! Mas é necessário que você saiba um catiquinho mais de CSS, ou encontrar geradores de menus para você aprender a aplicar o css sem que haja bagunça. Um site MARA sobre submenus é o cssmenumaker.com. Ele dá lindíssimas opções de menu para você utilizar. É só editar as cores, posições e tirar as classes desnecessárias e deixar o mais limpo possível para o html ficar mais ou menos desta forma:

<ul>
  <li><a href="http://link.com">Link</a>
	<ul>
	  <li><a href="http://link.com">Link</a></li>
	  <li><a href="http://link.com">Link</a></li>
	</ul>
  </li>
  <li><a href="http://link.com">Link</a></li>
  <li><a href="http://link.com">Link</a></li>
  <li><a href="http://link.com">Link</a></li>
</ul>

Para fazer os submenus, você só irá arrastar um item levemente para à direita abaixo de um item que você quer que seja principal.


Opção 2) Menu dinâmico sem lista (apenas link)

Esta opção eu adoro quando eu preciso de um menu simples e quero que sempre fique centralizado. É um hack que aprendi lá no blog CSS Tricks e dei minhas incrementadas. Como eu sempre faço projetos responsivos, deixar uma lista centralizada é a coisa mais chata do mundo. E quando sei que o menu será apenas de um nível (ou seja, sem submenus) eu gosto de usar esta função para ter mais autonomia na posição e ela ser mais fluida. Veja a estrutura básica abaixo:

<nav class="menu-centralizado">
 <a href="http://link.com/">link</a>
 <a href="http://link.com/">link</a>
 <a href="http://link.com/">link</a>
 <a href="http://link.com/">link</a>
</nav>

Percebeu que é diferente da opção de menu anterior? Ele é o menu puro, contendo apenas links.

2.1) Ativando o menu em seu tema

Assim como no item 1.1 deste tutorial, vamos cadastrar o nosso menu no functions.php. Eu aproveitei a função que utilizei lá no inicio do tutorial e acrescentei este menu, chamado por exemplo de menu-categorias, supondo que utilizarei dois espaços para menus em meu blog, um para o principal, no topo, e outro para categorias, que será centralizado.

// menu dinâmico wordpress - madlyluv.com
register_nav_menus( array(
  'menu-topo' => __( 'Menu topo', '' ),
  'menu-categorias' => __( 'Menu categorias', '' ) // menu centralizado
));

2.2) Adicionando o menu no local desejado

Adicione este código no lugar onde quer que apareça o menu.

<?php 
  $menuParameters = array(
    'theme_location' 	=> 'menu-categorias',
    'container'       => false,
    'echo'            => false,
    'items_wrap'      => '<nav class="menu-categorias">%3$s<nav>',
    'depth'           => 0,
  );
  echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>

Percebeu que ele é um pouquinho diferente que o menu padrão que acabamos de aprender? Esta função está mais para um hack, que ele se apropria dos parâmetros da tag wp_nav_menu() e cria novas, retirando o <li> e apenas deixando o <a>

2.3) Estrutura básica do CSS

A estrutura do CSS também é diferente.

/**** menu dinamico centralizado - madlyluv.com ***/
nav.menu-categorias {width:100%; position:relative; display:block; text-align: center}
nav.menu-categorias a {color: #CORLINK;}
nav.menu-categorias a:hover {color: #CORLINKHOVER}

O CSS é bem mais simples. Como o código deste menu é um hack que foge um pouco do padrão, eu ainda estou a descobrir como deixa-lo com aquelas classes ativas como se tem no menu padrão do wordpress sem utilizar javascript. Assim que eu descobrir eu coloco aqui :) mas por enquanto fica o básico.

2.4) Criando o menu no painel de controle

A criação deste tipo de menu é igualzinho ao esquema do menu padrão da primeira opção. Nada mudará na criação. Crie menus e seja feliz, haha. :)

E ai, alguma dúvida? Qual menu que você achou o mais adequado para você?

Veja também...

Resenha: Máscaras de Argila da Freeman Beauty
Como planejei minha viagem para Disney
Disney Trip: Magic Kingdom
¬¬ zZz x_x o_O ^^ T_T ;D :x :S :P ::teary:: ::sweat:: ::stress:: ::rolleyes:: ::love:: ::cool:: ::blush:: ::attention:: ::angry:: :) :( ._. *o* *O_O


11 Comentário(s)

(11 pelo blog e pelo facebook)