Personalizando o painel de administração do WordPress

Aprenda a modificar o layout da dashboard de maneira simples para facilitar a navegação, personalizar a experiência do usuário e reforçar o branding.

Você provavelmente já conhece o WordPress e já sabe como criar seus próprios temas. Mas isto não significa que o trabalho acabou. É possível – e extremamente recomendável – personalizar os elementos da interface do Painel de Administração para que ele se adeque as necessidades de cada marca.

Muitas vezes ao fazer a escolha entre utilizar um sistema de administração de conteúdo padrão ou projetar o seu próprio do zero o critério de desempate é a capacidade de personalização. Quando você cria um CMS, seja para um blog, um site ou uma loja, você está levando em conta todas as necessidades específicas daquele cliente. O mesmo não acontece com um sistema pronto. Mas muitas vezes não é preciso reinventar a roda. Com alguns recursos simples você pode transformar o layout de um administrador padrão como o WordPress em algo consistente com a identidade visual do seu projeto.

Melhor usabilidade

Muitas vezes nossos clientes não possuem um conhecimento muito grande em administração de conteúdo para a web e a visão do painel de controle pode ser meio intimidadora. O que parece simples e fácil para você na maioria das vezes é bem complicado para pessoas que não estão habituadas com ambiente de desenvolvimento. Criar elementos que facilitem o uso, adaptando a interface para a cultura / nível de conhecimento de cada empresa é fazer com que o usuário se sinta em casa.

Branding

Sua dashboard também pode ser uma extensão da sua marca. Logotipo, cores, tipografia, iconografia… Estes são alguns dos elementos que podem ser inseridos dentro do painel para criar uma experiência verdadeiramente única – mesmo dentro de um CMS padrão.

Menos dor de cabeça

Se nada disto te convenceu pense nos motivos egoístas. Se o seu administrador for mais simples de usar você vai receber menos e-mails / ligações / chamadas no Skype com reclamações, certo? O ganho de produtividade (e horas de sono) não tem preço.

Bem, vamos por a mão na massa!

Um endereço para chamar de seu

Se você está habituado a utilizar o WordPress provavelmente já digita “/wp-login” ou “/wp-admin” após o endereço de qualquer site que utilize a plataforma para entrar na sua conta. Mas talvez para o seu cliente seria mais fácil de lembrar do endereço se a url tivesse um nome mais amigável como “/administrador” ou até mesmo apenas “/login”, certo?

Para isto vamos precisar editar o arquivo .htaccess. Este arquivo fica geralmente na pasta raíz do seu diretorio do WordPress. Dependendo das configurações do seu servidor ele pode estar oculto. Para modificar a url do seu painel de administração basta inserir esta linha no topo do seu arquivo (substituindo “seu-site” pela sua url):

1. RewriteRule ^login$ http://seu-site.com.br/wp-login.php [NC,L]

Agora basta acessar http://seu-site.com.br/login para entrar na sua conta WordPress.

Acessando o functions.php

Grande parte do código que eu vou apresentar para vocês funciona a partir de mudanças no arquivo de funções do WordPress, o functions.php. Para acessar este arquivo em seu painel do WordPress clique no menu Aparência, Editor e em seguida Funções do Tema na barra lateral da direita. Pronto! Outra alternativa é localizar o arquivo no seu servidor através de FTP. O caminho até o arquivo normalmente é /wp-content/themes/nome-do-tema/functions.php (Obviamente substituindo nome-do-tema pelo… bem, você já entendeu.) Lembre-se de sempre colocar as linhas de código entre as tags <?php>.

A Tela de Login

A primeira impressão é a que fica. Ter um layout bacana para a tela de login é garantir que seu usuário fique impressionado desde o inicio.

Inserindo seu logotipo

Um logotipo é uma parte fundamental de uma marca. Quanto maior a visibilidade que ele tiver, mais fixado ficará na mente das pessoas. Na página inicial do painel de administração acima do formulário de login temos o logo do WordPress.

Para deixar o sistema com a identidade visual da sua empresa o primeiro passo é substituir esta imagem pelo seu próprio logo. Crie um arquivo de imagem com o tamanho máximo de 323 pixels de largura por 67 pixels de altura.

O logo do WordPress está como background de uma classe de CSS. Adicione a seguinte classe na sua folha de estilos e substitua o endereço pelo nome e caminho correto da imagem.

1. body.login div#login h1 a {
2. background–image: url(/wp-content/themes/nome–do–tema/img/site–logo.png);
3. }

Opcionalmente é possível realizar esta modificação através do functions.php. Lembre-se de alterar o valor de padding-bottom para o que funcionar melhor no seu caso e modificar o nome e caminho da imagem.

1. // Custom WordPress Login Logo
2. function my_login_logo() { ?>
3. body.login div#login h1 a {
4. background–image: url(/img/site–login–logo.png);
5. padding–bottom: 30px;
6. }
7.  
8. <?php }
9. add_action( ‘login_enqueue_scripts’, ‘my_login_logo’ );

Alterando o link do logotipo

Por padrão o logotipo da tela de login aponta para WordPress.org. Seria interessante trocar o link para seu próprio endereço. O snippet abaixo cuida desta tarefa. Você deve colar esta função no arquivo – você adivinhou – functions.php.

1. //Link na tela de login para a página inicial
2. function my_login_logo_url() {
3. return get_bloginfo( ‘url’ );
4. }
5. add_filter( ‘login_headerurl’, ‘my_login_logo_url’ );
6.  
7. function my_login_logo_url_title() {
8. return ‘Your Site Name and Info’;
9. }
10. add_filter( ‘login_headertitle’, ‘my_login_logo_url_title’ );

Criando seus próprios estilos

Não é possível editar o arquivo HTML core do WordPress, mas podemos modifica-lo completamente através de CSS. Existem duas opções: utilizar sua folha de estilos padrão ou criar uma especificamente para o seu tema. Dá para realizar diversas modificações nesta tela como mudança de background, tipografia, trocar as dimensões do logo, etc. Para isto cole este código no functions.php e altere para o caminho e nome da sua folha de estilos. No caso o arquivo se chama style-login.css

1. //Login Stylesheet
2. function my_login_stylesheet() { ?>
3. <link rel=“stylesheet” id=“custom_wp_admin_css” href=“” type=“text/css” media=“all” />
4. <?php }
5. add_action( ‘login_enqueue_scripts’, ‘my_login_stylesheet’ );

Segue uma lista de classes úteis para a personalização desta tela.

1. body.login {}
2. body.login div#login {}
3. body.login div#login h1 {}
4. body.login div#login h1 a {}
5. body.login div#login form#loginform {}
6. body.login div#login form#loginform p {}
7. body.login div#login form#loginform p label {}
8. body.login div#login form#loginform input {}
9. body.login div#login form#loginform input#user_login {}
10. body.login div#login form#loginform input#user_pass {}
11. body.login div#login form#loginform p.forgetmenot {}
12. body.login div#login form#loginform p.forgetmenot input#rememberme {}
13. body.login div#login form#loginform p.submit {}
14. body.login div#login form#loginform p.submit input#wp-submit {}
15. body.login div#login p#nav {}
16. body.login div#login p#nav a {}
17. body.login div#login p#backtoblog {}
18. body.login div#login p#backtoblog a {}

Alterando o ícone da Dashboard

OK. Agora que você já modificou a aparência externa do seu administrador está na hora de alterar a aparência interna. O primeiro passo é o ícone do cabeçalho do seu painel de controle. Por padrão temos um pequeno W.

Para adicionar o seu próprio ícone customizado basta criar uma imagem com 20px quadrados. A imagem precisa ser transparente (formato gif ou png).

Você pode modificar o background por CSS da classe #wp-admin-bar-wp-logo .ab-icon ou acrescentar o seguinte código no seu arquivo functions.php.

1. //Custom dashboard logo
2. add_action(‘admin_head’, ‘my_custom_logo’);
3. function my_custom_logo() {
4. echo ‘
5. #wp-admin-bar-wp-logo .ab-icon {background: url(‘.get_bloginfo(‘template_directory’).‘/img/admin_logo.png) no-repeat center top !important; }’;
6. }

Como modificar o texto do footer

Por padrão o footer do WordPress exibe a mensagem “Obrigado por criar com o WordPress”.

Ok. Não somos ingratos, mas já que você que criou seu próprio tema seria interessante colocar ali um link para seu portfólio, créditos relativos ao cliente ou a mensagem que você bem entender, certo?

Para trocar este texto novamente vamos utilizar o nosso grande amigo functions.php. Adicione o seguinte código e mude o texto entre as aspas depois do echo.

1. // Customizar o Footer do WordPress
2. function remove_footer_admin () {
3. echo ‘© <a href=”http://tableless.com.br/”>Tableless</a> – Desenvolvimento inteligente com padrões web e design’;
4. }
5. add_filter(‘admin_footer_text’, ‘remove_footer_admin’);

Saudações!

O administrador em inglês do WordPress saúda o usuário com um “Howdy!”. Embora muita gente ache que a saudação jovem e divertida, talvez um cliente sério e corporativo ficasse mais satisfeito com algo menos “sou um cowboy do Texas”. Por sorte o painel em português diz um simples “olá”. Mesmo assim você poder querer trocar o texto para algo que combine mais com o seu projeto.

Para trocar o texto da saudação padrão do WordPress basta adicionar o seguinte snippet no arquivo functions.php.

No exemplo a seguir o texto dirá “Bem vindo”.

1. // Saudação customizada
2. function replace_howdy( $wp_admin_bar ) {
3. $my_account=$wp_admin_bar->get_node(‘my-account’);
4. $newtitle = str_replace( ‘Olá’, ‘Bem vindo’, $my_account->title );
5. $wp_admin_bar->add_node( array(
6. ‘id’ => ‘my-account’,
7. ‘title’ => $newtitle,
8. ) );
9. }
10. add_filter( ‘admin_bar_menu’, ‘replace_howdy’,25 );

Ah, se o seu admin estiver em inglês substitua “Olá” por “Howdy” ou este snippet não vai funcionar…

Temas de administração

Todos estes snippets são bacanas para dar um tapa no visual do WordPress. Mas, se você ainda está insatisfeito com o nível de personalização, pode criar um tema completamente diferente. Para isto basta alterar o CSS do administrador. A folha de estilos padrão (/wp-admin/css) é bem completa e organizadinha. Pode ser que você só precise fazer alguns ajustes.

Aqui estão algumas das classes mais utilizadas:

#wphead
O cabeçalho do painél contendo o título principal, nome do blog e link para o site.

#adminmenu ul
A barra de navegação lateral com os links: Posts, Mídia, Ferramentas…

#adminmenu2 ul
A subnavegação da barra lateral. Por exemplo “dentro” de Posts teríamos Todos os Posts, Adicionar Novo, Tags e Categorias.

.wrap
A div que funciona como um container principal do painel de administração.

#footer
O rodapé do site com logotipo do wordpress, versão e links.

.wrap h2
Títulos das seções principais como por exemplo Painel.

Posteriormente você pode criar um plugin com o seu tema para instalar/desinstalar quando quiser ou até mesmo e redistribuir para a comunidade.

Apenas a ponta do iceberg

As dicas que eu mostrei aqui são só o começo. Dominando bem as classes CSS do tema e conhecendo o funcionamento do sistema é possível modificar completamente o layout do WordPress. É possível, por exemplo, criar widgets personalizados, esconder ou modificar itens do menu, ocultar alertas de atualizações, exibir mensagens de ajuda, etc. Além disto existem centenas de plugins a sua disposição para transformar ainda mais o sistema, seja em termos de design, seja acrescentando novas funcionalidades. A principal vantagem de trabalhar com um CMS tão conhecido e respeitado no mercado como o WordPress é justamente essa: poder contar com uma comunidade de desenvolvedores imensa criando e compartilhando conhecimento.

Fonte: http://tableless.com.br/customizando-o-painel-de-administracao-do-wordpress/