Como criar navegação em acordion no painel de administração do WordPress
Neste artigo, iremos aprender um novo trecho de código que possibilita ao usuário do WordPress uma nova experiência com o menu da administração. Experiência essa bastante diferente daquela que existe 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 seja visível. Além disso, este pequeno código pode ser colocado no arquivo functions.php do seu tema.
Veja o vídeo exemplificativo que fizemos:
Por que 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, pra mim, é difícil de conceber permaneceu: a organização dos submenus da administração, que é terrível!
Por vezes, ao olhar o menu de administração do meu WordPress, tive aquela sensação de que era completamente desorganizado, sem sentido e que continha muita informação. O porquê dessa sensação é simples: os submenus ficam visíveis todos ao mesmo tempo, passando muita informação desnecessária. Quando isso acontece, a experiência do usuário acaba por ser ruim e contraditória àquilo que se espera de uma interface simples e intuitiva – como deveria ser o WordPress.
Muitos dos meus clientes inexperientes não se habituavam, ou achavam complicado trabalhar com o WordPress. Eles me diziam que tarefas simples, como publicar post, era algo “confuso” de se fazer. Ao querer entender o porquê, percebi que muitos deles mantinham todos os submenus abertos e, como é óbvio, procurar as tarefas mais importantes tornava-se difícil. Foi então que decidi criar este código e, para minha surpresa, os meus clientes adoraram!
Com este código podemos garantir duas coisas:
- Apenas o submenu ativo é visível. Todos os outros ficam escondidos quando não são necessários;
- Navegação intuitiva entre menus, abrindo e fechando os respectivos submenus à medida da necessidade.
O código da “mágica”
Coloque o seguinte código no arquivo 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 );
}
Eis o resultado! Da próxima vez que carregar o menu de administração do seu site, verá a nova animação de acordion no menu. Ainda que não seja tão fácil entender o código que acabamos de inserir e o que ele faz exatamente, é bem fácil de fazê-lo, não?
Abaixo, algumas dicas para desmistificar esse trecho de código.
Desmistificando o código
O WordPress é uma plataforma bem potente – não apenas por causa do seu aspecto, ou de suas funcionalidades, mas devido à sua API avançada, que permite aos desenvolvedores acessarem em determinados momentos do seu carregamento e impingir o código adicional – é isso que vamos fazer com esse código.
Primeiro, criamos uma função a qual chamamos escolawp_toogle_admin_menu(), que irá imprimir no cabeçalho <head> da paginação o código CSS e jQuery, que irão 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 vão facilitar a implementação da 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á visível. Assim, quando iniciamos a sessão novamente, nunca mais veremos 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 o submenu que está ativo esteja visível para o usuário. Por exemplo, se você abriu 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 manda o browser ocultar a seta de toggle do submenu ativo, uma vez que ele não será mais usado enquanto esse submenu estiver visível – prático, não?
Resumindo: a primeira parte do hack já está implementada. Garantimos que apenas o submenu ativo esteja visível. Precisamos agora 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 vai aumentar a usabilidade e a experiência do menu, garantindo que, ao abrir um submenu através da seta de toggle, o que estava anteriormente visível se fecha! 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 esteja visível de cada vez.
Na primeira linha, instanciamos uma função jQuery para podermos fazer a nossa “mágica” 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 adjacente aberto.
$('ul#adminmenu .wp-has-submenu').not('.wp-has-current-submenu').removeClass('wp-men
O método not() no meio exclui dessa 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 acordion entre os submenus. Ela instancia uma função/ açã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 submenu em que acabamos de clicar se abre – efeito de transição. No final dessa animação, por questões de compatibilidade, essa ação remove a class .wp-menu-open do submenu anteriormente aberto.
E aí está! Esse é um pequeno hack que adiciona ação de toggle/animação de acordion 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 arquivo functions.php do seu tema, empacotamos um plugin que pode ser instalado e ativado através da administração do WordPress. Basta fazer o download através deste link, salvar o plugin e dirigir-se à administração do seu WordPress. Então, é só clicar em Plugins > Adicionar Novo (Add New), depois clicar no separador Upload e carregar o arquivo Zip do plugin, ativar o plugin, e pronto!
Quero deixar uma nota final lembrando esse hack só funciona em instalações WordPress com versão 3.2, ou superior.
Agora, gostaria da opinião de vocês: o que acharam desse hack? Ele melhora a usabilidade da administração? Seus clientes ficaram mais satisfeitos? Deixe sua opinião!
Obrigado e até a próxima!
é o fundador da Escola Dinheiro. Empreendedor e blogueiro, trabalha em tempo integral na internet e dedica a sua vida à produção e compartilhamento de conteúdos numa rede de projetos que conta já com alguns dos maiores e mais reconhecidos blogs do Brasil e de Portugal, nomeadamente o Escola Dinheiro, Escola WordPress e também a Galeria de Blogs. É estudante de Engenharia Informática em Sistemas de Informação e totalmente viciado em Web2.0. Paulo Faustino é também palestrante e consultor em gestão de campanhas de afiliação, otimização de blogs WordPress e ainda monetização/rentabilização de websites e blogs. No Twitter, siga @escoladinheiro.
