Nesse tutorial iremos aprender um novo trecho de código que possibilita ao usuário do WordPress uma experiência com o menu da administração bastante diferente daquela que tem atualmente: navegação ao estilo de acordion (ou de toggle entre menus). Com este código, ao abrir, por exemplo, o submenu Posts, todos os outros submenus escondem-se automaticamente, garantindo assim que apenas o submenu dos Posts é visível. Além disso, este pequeno código pode ser colocado no ficheiro functions.php do seu tema!
Veja o vídeo exemplificativo que fizemos:
http://www.youtube.com/watch?v=g2Qfokkmct0
PORQUÊ A NAVEGAÇÃO EM ESTILO DE ACORDION?
Quem atualizou o WordPress para a versão 3.2 deparou-se com uma nova interface na administração, mais moderna, elegante e intuitiva. Essa foi uma das principais novidades dessa versão, porém, um legado que me é dificil de conceber permaneceu: a organização dos submenus da administração é terrível!
Por vezes, ao olhar para o menu de administração do meu WordPress tive aquela sensação de que era completamente desorganizado, sem sentido e que continha imensa informação. A causa é simplesmente esta: os submenus podem estar todos visiveis ao mesmo tempo, passando demasiada informação desnecessária! Quando isto acontece, a experiência do utilizador acaba por ser má e contraditória àquilo que se espera de uma interface simples e intuitiva como deveria ser o WordPress.
Muitos dos meus clientes sem experiência não se habituavam ou achavam complicado trabalhar com o WordPress – tarefas como publicar um simples post relatavam-me ser “confuso”. Ao querer entender porquê, percebi que muitos deles mantinham todos os submenus abertos e como é óbvio, procurar as tarefas mais importantes tornava-se dificil. Foi daí que decidi criar este código e surpresa das surpresas: os meus clientes adoraram!
Os meus clientes achavam a interface confusa até experimentarem-na com esta hack. Foi sucesso absoluto!
Com este código podemos garantir duas coisas:
- Apenas o submenu ativo é visivel. Todos os outros ficam escondidos quando não são necessários.
- Navegação intuitiva entre menus, abrindo-se e fechando-se os respetivos submenus à medida da necessidade.
O CÓDIGO DA “MÁGICA”
Vamos então passar à parte prática!
Coloque o seguinte código no ficheiro functions.php do seu tema:
function escolawp_toogle_admin_menu() {
?>
<style type="text/css">
<!--
ul#adminmenu .wp-has-submenu .wp-submenu { display: none }
ul#adminmenu .wp-has-submenu.wp-has-current-submenu .wp-submenu { display: block }
ul#adminmenu .wp-has-submenu.wp-menu-open .wp-menu-toggle { display: none; }
-->
</style>
<script type="text/javascript">
<!--
jQuery(document).ready(function($){
$('ul#adminmenu .wp-has-submenu').not('.wp-has-current-submenu').removeClass('wp-menu-open');
$('ul#adminmenu .wp-menu-toggle').click(function(){
$('ul#adminmenu li.wp-has-submenu').find('.wp-submenu').slideUp(200,function(){
$(this).parent().removeClass('wp-menu-open');
});
});
});
-->
</script>
<?php
add_action( 'admin_print_scripts', 'escolawp_toogle_admin_menu', 100 );
}
E cá temos o resultado! Da próxima vez que carregar a administração verá a nova animação de acordion no menu. Fácil, não foi? Pode é não ser tão fácil entender o código que acabámos de inserir e o que ele faz exatamente. Aqui ficam umas dicas para desmistificar esse trecho.
DESMISTIFICANDO O CÓDIGO
O WordPress é uma plataforma bastante potente, não apenas por causa do seu aspecto ou funcionalidades mas devido à sua avançada API (Application Programming Interface) que permite aos desenvolvedores acessarem a ele em determinados momentos do seu carregamento e impingir código adicional – é isso que vamos fazer com esse código.
Primeiro criamos uma função a que chamamos escolawp_toogle_admin_menu() que irá imprimir no cabeçalho <head> da paginação código CSS e jQuery que irá fazer a nossa mágica.
O CÓDIGO CSS
ul#adminmenu .wp-has-submenu .wp-submenu { display: none }
ul#adminmenu .wp-has-submenu.wp-has-current-submenu .wp-submenu { display: block }
ul#adminmenu .wp-has-submenu.wp-menu-open .wp-menu-toggle { display: none; }
O código CSS cria regras que nos vão facilitar implementar a nossa mágica sem muito esforço.
A primeira linha garante-nos que, na altura do carregamento de qualquer página da administração, nenhum submenu estará visivel. Assim, quando iniciamos a sessão novamente nunca mais iremos ver nenhum submenu aberto, independentemente de termos deixado algum visível da última vez: novo dia, nova sessão, novo trabalho e os olhos postos apenas na Dashboard.
A segunda linha garante que apenas é visivel o submenu que está ativo. Por exemplo, se tiver aberto o editor de posts, então o submenu Posts estará visível e todos os outros ocultos, e assim por diante para cada um dos menus principais.
Por fim, a terceira linha é apenas um remate técnico mas que ajuda na usabilidade do menu. Ele manda o browser ocultar a seta de toggle do submenu ativo, uma vez que não mais será usado enquanto esse submenu estiver visível – prático, não é?
Resumindo: a primeira parte da hack já está implementada. Garantimos que apenas o submenu ativo está visivel. Precisamos agora de criar a experiência de acordion entre os menus. Para isso pedimos ajuda ao nosso amigo jQuery.
O CÓDIGO JQUERY
jQuery(document).ready(function($){
$('ul#adminmenu .wp-has-submenu').not('.wp-has-current-submenu').removeClass('wp-menu-open');
$('ul#adminmenu .wp-menu-toggle').click(function(){
$('ul#adminmenu li.wp-has-submenu').find('.wp-submenu').slideUp(200,function(){
$(this).parent().removeClass('wp-menu-open');
});
});
});
Este é o código que nos vai aumentar a usabilidade e experiência do menu garantindo que ao abrir um submenu através da seta de toggle, o que estava anteriormente visível, fecha-se! No fundo, vai-nos possibilitar alternar entre os submenus.
Assim, ao clicar no botão de toggle de um menu principal, o item anteriormente aberto se fechará, garantindo que apenas um submenu será vísivel de cada vez.
Na primeira linha instanciamos uma função jQuery para podermos fazer as nossas “mágicas” sem muito custo:
jQuery(document).ready(function($)
A segunda linha é um complemento do código CSS e um hack que remove de todos os menus principais a class CSS .wp-menu-open responsável por manter o submenu adjancente aberto.
$('ul#adminmenu .wp-has-submenu').not('.wp-has-current-submenu').removeClass('wp-menu-open');
O método not() no meio exclui desta remoção o menu que tem a class .wp-has-current-submenu que é, nem mais, nem menos, o menu que está ativo por defeito.
A terceira linha é responsável pela animação de accordion entre os submenus. Ela instancia uma função/acção (que é definida nas 3 linhas seguintes) quando o usuário clica na seta do toogle de um dos menus principais.
$('ul#adminmenu .wp-menu-toggle').click(function(){
Basicamente, essa função procura pelo submenu que está atualmente ativo, fechando-o com uma animação de slide-up à medida que o o submenu que acabámos de clicar se abre – efeito de transição. No final dessa animação, por questões de compatibilidade, esta acção remove a class .wp-menu-open do submenu anteriormente aberto.
Et voilá! Este é um pequeno hack que adiciona acção de toggle/animação de accordion entre os submenus do painel de administração.
ESTE CÓDIGO EM VERSÃO PLUGIN
Para aqueles que por alguma razão não podem ou não querem alterar o ficheiro functions.php do seu tema, empacotámos um plugin que pode ser instalado e activado através da administração do WordPress. Basta fazer o download através do link em baixo, salvar o plugin e dirigir-se à administração do seu WordPress. Aí, clicar em Plugins > Adicionar Novo (Add New), clicar no separador Upload e carregar o ficheiro Zip do plugin. Ativar o plugin e já está!
Link para Download do Plugin
Quero deixar uma nota final que é esse hack só funciona em instalações WordPress com versão 3.2 ou maior.
Que acharam deste hack? Melhora a usabilidade da administração? Seus clientes ficaram mais satisfeitos? Comente e coloque a sua opinião!
Abraços!
