Back-End

30 jun, 2010

Gerenciando menus com o novo recurso do WordPress 3.0

Publicidade

O novo
gerenciador de menus, que veio com o recém-lançado WordPress 3.0,
traz uma maneira fácil e intuitiva de criação e organização de
menus, tanto menus top-level quanto os tradicionais.

Ativação

É muito simples
ativar o recurso de menu. Em fase beta, você deveria habilitar deste
modo:

add_theme_support(
'nav-menus' );

Porém, após a
versão estável do wp, você deve fazer simplesmente:

add_theme_support(
'menus' );

OBS: Esses códigos
devem ser utilizados em functions.php.

Utilizando o recurso

Ao adicionar o
código, uma nova página deverá estar disponível no painel do
wordpress. Vá em Aparência > Menus. Você deverá ver uma
tela similar a esta:


Exemplo de
utilização do recurso de menus

Como você pode ver,
neste exemplo eu já crie dois menus para testes. Vamos ver,
rapidamente, como utilizar esses recursos, já que a documentação
está disponível aqui,
apesar de inglês.

É muito fácil
criar um novo menu, basta clicar no sinalzinho de mais (+)
e escrever o nome do menu em “Nome do menu”, vamos colocar
“Menu principal”. Após feito isso, basta clicar no botão
“Criar menu”.

Excelente! Você
acaba de criar um menu vazio! Olha ele aí:


Meu menu
recém-nascido

Como pode perceber,
você pode ter quantos menus quiser, o WP irá gerenciá-los através
dessas abas.


Agora, vamos popular
nosso menu vazio.

Você verá ao lado
módulos como “Páginas”, “Categorias”, “Locais
dos Temas” etc. São nesses módulos que você encontrará os
dados para inserir os itens do menu. Alguns módulos podem estar
ocultos, para habilitar os que você quiser (taxonomias próprias,
post-types específicos etc), clique em “Opções de Tela” e habilite as opções
desejadas.

Para adicionar um
menu, basta escolher o módulo e item desejado e clicar em “Adicionar
ao menu”:


Adicionando item
ao menu

E, voilà! Nosso item
foi adicionado ao menu, e você pode configurá-lo do modo que quiser.

Para criar um item
que seja filho de outro, basta clicar e arrastar esse item um pouco
abaixo e à direita, depois solte, veja o resultado:

Agora que já
aprendemos o básico sobre criação de menus, podemos ver como
adicioná-lo em nosso tema. Mas não se esqueça de salvar seu menu antes.

Adicionando menus de navegação ao tema

O WordPress 3.0
provê uma função que exibe um determinado menu, ela se chama
wp_nav_menu().
Vamos ver como utilizá-la:

wp_nav_menu('menu=menu-principal');

Coloque este código
onde você quer que o menu apareça.

<div>
<ul id="menu-menu-principal">
<li id="menu-item-152">
<a href="http://127.0.0.1/2010/espaco-loft/titulo/">Titulo</a>
<ul>
<li id="menu-item-153"><a href="http://127.0.0.1/2010/espaco-loft/titulo-2/">Titulo 2</a></li>
</ul>
</li>
</ul>
</div>

Essa deverá ser a
marcação gerada pelo Wp (é bem personalizável, veja a
documentação da função aqui).
Como você pode ver, nós passamos o slug do menu que queremos
resgatar, você também poderia passar o nome ou o ID…. peraí! ID?
Sim, ID. Cada menu é um termo com a taxonomia “nav_menu”,
e cada item de menu é um post type do tipo “nav_menu_item”,
mas isso não é relevante.

Se você quiser
saber mais opções sobre a função wp_nav_menu(),
clique aqui.

Bom…. você pode
ter percebido que esse modo de pegar o menu não é perfeito, pois o
usuário pode acidentalmente modificar o nome do menu. Assim, a
abordagem acima falharia (já que resgatamos baseado no nome, slug ou
ID).

Para isso, você pode
criar um “Local do tema”, que é onde você pode adicionar um menu. É possível ter quantos
locais quiser. Se você não
entendeu ainda, continue, que você entenderá.

Bom, vamos criar
nosso local:

register_nav_menu('menu-primario',
'Menu primário');

Coloque o código
acima em functions.php.
E você verá que o box “Locais do tema”, dentro de
“menus”, mudou. Se você não vê nenhum box, vá em
opções de tela (lateral superior direita) e habilite, clicando em
“Locais de temas”.

No primeiro
parâmetro, você deve passar o nome do local, que será o nosso
identificador único para resgatar o menu. E, no segundo, uma descrição
do local.

Na opção liberada
após registrar esse local, você pode colocar o nome de um menu.
Clique no combobox e escolha o nosso menu criado, “Menu
principal”, e salve.

Agora, vamos
resgatar o menu em base no local do tema em que ele se encontra:

wp_nav_menu('theme_location=menu-primario');

Esse código fará a
mesma coisa que o postado antes, com a diferença de que agora o
usuário poderá colocar o nome que quiser em seu menu, sem afetar a
visualização.

Utilizando os menus como widgets

Sim! Os menus ficam
disponíveis como widgets também! Não entrarei em detalhes de como
registrar sidebars, vou assumir que você já sabe fazer isso.

Vá em Aparência
> Widgets. Você verá um novo widget disponível “Menu
personalizado” (ou “Custom menu”, do inglês) se você
tiver algum menu cadastrado. Clique e arraste esse widget para sua
barra lateral. Ele widget se comportará da mesma forma que os
outros. Você poderá modificar a exibição através de
“before_widget”, “after_widget” etc., normalmente. Portanto, não há segredos.

Bom, é isso,
pessoal, espero que tenham gostado, até!