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!
Joao Dias
Boas Paulo.
Estou a escrever um post no wp e as imagens nao ficam a esquerda do texto e depois o texto debaixo da imagem, quer dizer a formatação nao e muito bom a como melhorar?
E ja agora existe o edublogs.com.br, nao percebi e a imitar o wordpress, tem tudo igual.
Joao Dias
O artigo esta muito bom Paulo
Joao Dias
Peço desculpa em vez de Paulo é Vitor.
Vitor Carvalho
Obrigado João!
Abraço.
Ricardo
Perfeito! Funcionou como descrito. Obrigado pela dica!
Rick
Excelente tutorial Paulo,
Acabei de fazer na minha instalação *–*
Paulo Faustino
Olá Rick, obrigado pelo comentário! Tenha em atenção que o artigo foi escrito pelo Vítor Carvalho
É a ele que você deve agradecer eheheh 
Abraços
Vitor Carvalho
Obrigado Rick! Espero que seja útil.
Andrea
Simples e muito funcional. Parabéns.
Vitor Carvalho
Obrigado Andrea!
Abraços.
Joao Dias
Ola vitor como eu divido uma cabeçalho em duas partes.
Tipo aqui no wp total tem o cabeçalho e depois a cena do facebook.
Eu quero por uma imagem de cabeçalho, depois um espaço e depois um gif ou publicidade.
Concusão como divido cabeçalho em dois?
Joao Dias
desculpe escolawp e nao wp total
Vitor Carvalho
Teria todo o gosto em ajudar João, mas não sei a que se refere
Joao Dias
Desculpe Vitor, acho que não me expliquei muito bem.
Aqui no escolawp se olha para o cabeçalho tem uma imagem a dizer escola wp e ao lado dessa imagem tem um plugin do facebook.
Prontos era isso que eu queria fazer mas por exemplo substituir esse plugin por publicidade ou outra coisa.
Se nao perceber eu torno a explicar voce tb nao e obrigado a perceber. Mas eu explico melhor se nao compreender.
Aguarde as vossas respostas
Vitor Carvalho
Olá João.
Dependendo do theme que tenha instalado, isso requer quase sempre trabalho de alteração de código no próprio theme.
Podia também ser resolvido através de um plugin, porém não estou a ver nenhum plugin que consiga fazer aquilo que me pede.
Um abraço.
Paulo Faustino
João, aquilo que temos no cabeçalho não é um plugin, é uma modificação do código da Like Box do Facebook. Não existem plugins que façam isso, pelo menos que eu conheça
Considere ler alguns dos tutoriais que existem na internet para criar um efeito desse género. Recomendo-lhe este: http://line25.com/tutorials/how-to-add-a-custom-facebook-like-box-to-your-site
Abraços
Joao Dias
Mas sabes algum codigo para fazer isso?
Vitor Carvalho
Não estou a ver nenhum código para que possa fazer isso assim como solução “chave na mão”.
Esse tipo de alterações necessita de um profissional que altere o código do seu template a seu gosto. O melhor, neste caso, é contratar serviço com um developer de código para WordPress.
Eu posso liberar os meus préstimos caso pretenda.
Compreenda que este tipo de serviços de personalização têm sempre um custo, pois requer editar o código.
Se achar que pretende avançar pode dirigir-se ao meu site e escrever-me no formulário do fundo o que pretende alterar no seu site.
Assim como eu também existem muitos developers que o podem ajudar nisso. É só procurar algum de que goste!
Anderson
Tem como fazer sim João, pode ser feito por tabela (HTML) ou por “divs” e o CSS. Dá uma pesquisada no Google, tente em sites brasileiros e estrangeiros.
Espero ajudar!
Vitor Carvalho
Se o João se quiser aventurar no código, pode sempre seguir como o Anderson disse
Há muitos recursos na web que podem ajudá-lo a fazer isso.
Joao Dias
Obrigado pelas sugestões mas nao encontrei nada
Nao quero que façam o trabalho por mim mas se me puderem dar alguns links.
Joao Dias
Tentei de tudo mas nao funcionou.
Sabe porque?