Fazendo menus gerenciáveis com uso do plugin pageMash e CSS

É
mais do que patente que o WordPress vem sendo cada vez mais utilizado, não somente como plataforma de blog, mas como um CMS
completo. Quantos não são os sites pessoais, corporativos,
governamentais ou mesmo lojas virtuais que são movidos a WordPress?

Acontece
que, teoricamente, embora seja muito flexível, o WordPress é uma
plataforma voltada para manutenção de um blog. É claro que o seu
sistema de themes permite facilmente que você tenha um site que o mais
expert em WordPress não desconfie que se trata de uma página
rodando nessa plataforma. Basta o layout não ter cara de
blog nem ser baseado em nenhum template padrão.

Mas
chegamos a um problema, de certa forma, grave: enquanto Joomla e outros
grandes CMSs permitem um gerenciamento fácil do menu de um site, o
WordPress, por sua vez, torna as coisas um pouco menos
simples, por padrão. Sim, temos os widgets. Mas convenhamos que eles não
são muito úteis em construir um menu que seja facilmente
gerenciável e na separação das seções do site, porque seria preciso
acrescentar um link de páginas manualmente e o layout de um widget
seria herdado para os outros e vice-versa.

Sendo
assim, é indispensável que tenhamos um menu totalmente gerenciável? E eu penso ‘gerenciável’ sobretudo da perspectiva de um
cliente leigo, já que nós que desenvolvemos poderíamos facilmente
editar o código fonte do theme. E, pensando bem, este menu para
WordPress que iremos construir poupa um bom tempo até mesmo para
mim, que sou, digamos, um WP
hard user. Oras, se do
/wp-admin posso gerenciar também o menu do site, é uma mão na roda
a valer!

Como
sempre, há um plugin no WordPress que nos ajudará.

O
primeiro passo é trabalhar com uma maravilha de plugin chamado
pageMash,
cuja função principal é gerenciar, de modo mais avançado, a ordem
das páginas – qual será sub-página de qual, se esta ou aquela
página será exibida dentro do loop de listagem de páginas etc. É
útil porque, trabalhando com Ajax, você pode facilmente arrastar
uma página ou mesmo uma sub-página com todas as suas filhas e
realocá-la na hierarquia. Como dizia, há também a
opção de “esconder” uma página nesse looping, o que será
útil, por exemplo, quando tivermos páginas internas que não devem
ser exibidas em um menu. Isso ficará mais claro a seguir.

Mãos
à obra: configurando o menu CMS em seu theme

Não
há muito segredo. Após instalar o pageMash, vamos abrir o arquivo
do template em que exibiremos o nosso menu baseado em páginas
internas do WordPress: pode ser o sidebar.php ou o arquivo em que
você configurou o seu menu.

Vamos
criar uma div que conterá o nosso menu, e dentro dela ficará a
chamada da função de listagem de páginas:

<div id="menu"> <br /><ul><?php wp_list_pages('title_li=&depth=2'); ?></ul><br /> </div>

Neste
caso, a função de listar páginas está configurada para mostrar
apenas as páginas-mãe e suas respectivas sub-páginas (comando
depth=2, sendo que & serve para adicionar filtros), ou seja, uma
página filha da sub-página não aparecerá no menu. Em termos
hierárquicos, você só exibirá página até o segundo nível de
profunsidade. Caso você queira que sejam exibidas todas elas,
substitua o código PHP acima por <?php
wp_list_pages(‘title_li=’); ?> – e tenha em mente que você
precisará personalizar o CSS que segue abaixo:

Dê
cara de menu ao seu menu com CSS

Agora,
utilize o seguinte CSS em seu style.css que, claro, você deve
personalizar de acordo com o seu layout:

#menu<br />{ width:200px;  margin-top:16px;  float:left;  }  #menu a<br />{display:block} #menu ul li ul li {  border-bottom:1px solid #FFB400;<br /> }  #menu ul li a { font-size:12px; border-bottom:1px #FFB400 dotted;<br />padding-left:10px; display:solid; color:#FFFFFF;} #menu ul li<br />{line-height:30px; background-color:#FFB400; border-bottom:0px;}<br />#menu ul li ul li {line-height:17px; background-color:#FFFFFF;} #menu<br />ul li ul a {font-size:12px; border:none; margin:0; color:#333333;<br />padding:3px 3px 3px 16px;} #menu ul li li:hover {<br />background-color:#FFC}   #menu a {color:#333333;<br />text-decoration:none;} #menu a:hover {text-decoration:none;} 

O
resultado final do menu e as conclusões

O
menu deverá aparecer para você conforme na imagem acima. Você
também pode ver o código que usamos neste artigo funcionando “live”
no site Maha
Pilates.

Se
analisarmos bem, este menu não utilizou nenhuma função que não
seja default do WordPress. Porém, contamos com a ajuda do plugin
pageMash, que nos deu versatilidade e agilidade ao gerenciar os menus
e personalizamos o código gerado pelo WordPress com um CSS que cria
a “cara” de um menu com boa usabilidade. Ele é muito fácil de
ser gerenciado por usuários leigos, digo por experiência.

Além
do mais, vimos que é possível configurar e personalizar este menu
facilmente, definindo a profundidade de páginas exibidas. Deste
modo, seria possível construir nosso menu baseado em uma página –
desde que usássemos na chamada wp_list_pages o comando para listar a
página x e suas respectivas sub-páginas, o que pode ser útil para
muita gente.

O
WordPress é uma ferramenta CMS perfeita, sobretudo por causa de seu
sistema de templates e sua simplicidade out
of the box.
Por isso, recomendo fortemente que você estude as Template
Tags do WordPress, descubra como funciona e pense nas possibilidades
infinitas que estão disponíveis para você. Até a próxima!