A plataforma WordPress é um gerenciador de conteúdo muito bom. Com ele você tem uma painel administrativo intuitivo e um sistema de login e senha muito funcional. No WordPress você não precisa ficar se preocupando em criar uma solução para gerenciar – adicionar, alterar e excluir, os usuários do seu site, pois o CMS já traz tudo pronto.Utilizando o WordPress como CMS do seu site sua única preocupação deve ser criar conteúdo.

Mesmo com o sistema de login/senha para usuários já pronto, temos de concordar que a página de login do WordPress pode ser melhorada. A página de acesso vem com a logo da plataforma, num fundo claro e com um formulário para realizar login no site. Se você conseguisse substituir apenas a logo do WordPress, pela logo do seu site as coisas já iam ficar melhor. Se você trabalha com desenvolvimento WEB pelo WordPress, esse tutorial vai te ajudar muito – permitindo personalizar a cara do login do WordPress.

Página de Login do WordPress

Hoje você encontra diversos plugins que fazem essas alterações de substituir logo, alterar background, dentre outras necessidades para a página de login do WordPress. Acontece que utilizar plugins para tarefas um tanto fáceis, é desnecessário. Se é algo de nível fácil, como o que vamos fazer agora, sempre escolha realizar sem plugins – eles podem pesar um pouco mais o site.

Para as alterações acontecerem

Vamos adicionar algumas linhas de código no arquivo functions.php do seu tema. Você pode alterá-lo direto pelo painel WordPress, basta acessar Aparência > Editor e selecionar o arquivo na listagem da lateral direita.

Caso prefira editar o arquivo por um editor de código, acesse os arquivos do site via FTP e siga o caminho wp-content > themes > TEMA DO SEU SITE > functions.php.

O bloco de código a seguir deve ser adicionado ao final do arquivo functions.php de seu tema.

function my_custom_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style.css' );
}

add_action( 'login_enqueue_scripts', 'my_custom_login_stylesheet' );

Perceba que estamos utilizando uma função PHP que adiciona um link ao header da sua página de login do WordPress, obrigando que o arquivo style.css seja adicionado aquela página. Isso possibilita que toda a página de login seja alterada por meio de CSS, pelo arquivo que controla todo o estilo do seu tema. Se não fosse assim, você teria de alterar através dos arquivos da pasta wp-admin, o que você não deve mexer – pois ali existem arquivos para o funcionamento do WordPress.

Substituindo a logo do WordPress pela sua logo

Um detalhe que pode mudar tudo, elevando o nível do seu site é personalizando o login do WordPress com a sua logo – a sua marca. Acessar a página de login de um site e visualizar a logo do mesmo, dá mais confiança de que estamos no lugar certo, para acessar o painel administrativo correto.

Lembrete: Para que trocar a logo do WordPress pela sua, você deve adicionar o arquivo referente a sua imagem na pasta image do seu tema. Siga a trilha wp-content > themes > TEMA DO SEU SITE > images.

Agora vá ao style.css do seu tema e adicione o código CSS:

.login h1 a {
background-image: url('../login/logo.png');
background-size: 250px 150px;
width: 250px;
height: 150px;
}

Aqui você está dizendo qual o caminho da sua logo, dentro dos arquivos do seu tema. Estamos configurando também o tamanho da imagem, para que não fique muito grande – aqui você deve ir testando, de imagem para imagem a altura e largura irão variar.

Alterando o Background da Página de Login

Você também pode alterar o background da página de login do WordPress, colando alguma cor ou imagem de fundo que combine com a sua logo. Deixe a sua imaginação fluir, teste quantas vezes quiser. É com a prática que você aprende.

Ainda no seu arquivo de CSS style.css você deve adicionar:

body.login {
background: #000;
}

Alterando o link de redirecionamento do login do WordPress

Uma coisa muito chata no painel de login do WordPress, é que se você clicar na logo do WordPress, ou na que acabamos de inserir, você será redirecionado para a página oficial do CMS.

Então, temos de mudar isso também.

No arquivo functions.php você vai adicionar o seguinte:

/*Função que altera a URL, trocando pelo endereço do seu site*/
function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

/*Função que adiciona o nome do seu site, no momento que o mouse passa por cima da logo*/
function my_login_logo_url_title() {
return 'Nome do seu site - Voltar para Home';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

O primeiro bloco de código, com a função my_login_logo_url, não precisa ser alterado em nada, apenas copie e cole.

No segundo bloco de código, você vai adicionar apenas o nome do seu site na 2a linha.

Você pode fazer praticamente tudo a partir das regras de CSS pelo arquivo de estilos do seu tema, altera aqui, mexe de lá… Não tenha medo de arriscar algo novo. Siga todos os passos com atenção, você vai conseguir deixar a página de login do WordPress personalizada e do seu jeito. Qualquer dificuldade ou dúvida, fala com a gente que estamos aqui para ajudar.

Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixe seu comentário abaixo para podermos saber a sua opinião.