Personalizar página de login e admin do WordPress.org

Uma das coisas legais de se usar o WordPress.org é a possibilidade de personalizar tudo nele e deixar seu site com uma cara própria. Muitas pessoas gostam de alterar até mesmo a imagem do logo que aparece na página de login e também dentro do painel de administração da ferramenta. É isso que veremos nesse tutorial, deixando o seu blog mais com a sua cara.

Normalmente muitos alteram as imagens por exemplo, na página raiz do WordPress.org.

O caminho da pasta é similar ao seguinte:

/root/wp-admin/images

Porém estas alterações são “deletadas” quando você atualiza a versão do seu WordPress do seu blog, porque na hora de atualizar os novos arquivos substituem estas alterações.

Hoje vou ensinar como personalizar estas áreas do seu WordPress.org sem precisar alterar nada dos arquivos raiz e desta forma não importa quantas vezes você atualizar ele, tudo o que você personalizar vai estar na pasta do seu tema e permanecerá intaquito.

Para fazer estas altações é necessário editar apenas o arquivo functions.php do seu tema e acrescentar imagens à pasta images do seu tema.

Criando imagens para substituir as do WordPress.org:

Antes de mais nada, crie uma imagem para a tela de login. O tamanho padrão desta imagem é de 310px de largura e 70px de altura, porém você pode criar uma imagem de outro tamanho e no final alterar pelo CSS. (Se quiser evitar grandes alterações, use o tamanho padrão que fica mais fácil).

Crie também outra imagem, esta com exatamente 32px de largura e 32px de altura para ser usada no painel do admin do seu WordPress.

Você pode salvar as imagens no formato que quiser, mas seria legal que elas fossem salvas em PNG transparente, assim elas irão combinar totalmente com o seu WP.

Depois de tudo pronto, faça o upload destas imagens para a pasta “images” dentro do seu tema.
(É necessário o upload via FTP).

Personalizando o arquivo Functions.php:

Agora com as imagens prontas basta alterar o arquivo functions.php do seu tema. (Cuidado na hora de editar este arquivo importante).

Você pode alterar ele diretamente dentro do seu WordPress em “Aparência/Editar”.

Localize o arquivo functions.php e logo e baixo de “<?php” insira o seguinte código:

function meu_logo_admin() {
echo '
<style type="text/css">
#header-logo {background-image: url('.get_bloginfo('template_directory').'/images/NOME DA SUA IMAGEM DO PAINEL DE ADMINISTRAÇÃO.png) !important;}
</style>
';
}
add_action('admin_head', 'meu_logo_admin');
function meu_login_logo() {
echo '
<style type="text/css">
h1 a {background:url('.get_bloginfo('template_directory').'/images/SEU LOGO PARA O LOGIN.png) 50% 50% no-repeat !important;}
</style>
';
}
add_action('login_head', 'meu_login_logo');
function meu_wp_login_url() {
return get_bloginfo('url');
}
add_filter('login_headerurl', 'meu_wp_login_url');
function meu_wp_login_title() {
return get_bloginfo('name');
}
add_filter('login_headertitle', 'meu_wp_login_title');

Não esqueça de colocar o nome das suas imagens nos dois campos indicados em vermelho.

Este código altera a imagem do admin do seu WordPress, altera a imagem de login e ainda muda o link e o título da imagem do login quando você clica nele. (Normalmente quando clicamos na imagem do logo do WordPress na tela de login, somos levados para o site do WP, este php que mostrei aqui já coloca automaticamente o link de seu blog no lugar).

Extra – Alterar o rodapé da página de administração do WordPress:

É possível também eliminar aquele texto que existe no rodapé do WordPress e o numero da versão:

Para alterar este texto insira o seguinte código:

function meu_footer_css () {
echo '
<style type="text/css">
#footer-upgrade {visibility:hidden !important;}
#footer-left {float:right !important;}
</style>
';
}
add_action('admin_head', 'meu_footer_css');
function meu_footer_admin () {
echo 'Escreva aqui o que quiser, como por exemplo o nome do seu blog';
}
add_filter('admin_footer_text', 'meu_footer_admin');

O CSS deste código tira o texto da versão do seu código e altera o texto pelo o que você escrever no campo ai destacado em vermelho e ainda já deixa alinhado para a direita.

Caso você tenha conhecimentos em CSS pode fazer outras modificações neste sentido sem grandes problemas.

Desta forma tudo o que foi personalizado no seu blog faz parte do seu tema e nenhuma atualização do WordPress irá deleta-las.

Outros posts sobre personalizar o WordPress.org:

• Personalizar o hack “Leia mais” do WordPress – Resumo de Postagem
• Onde adicionar código HTML e JavaScripts no WordPress
• Alterar e Gerenciar Temas no WordPress – Themes