Como criar uma página de login personalizada do WordPress

Pode-se argumentar que a página de login é a página mais importante de qualquer site WordPress. Sem a capacidade de fazer login, de que outra forma os proprietários de blogs podem publicar ótimos conteúdos? Além da criação de conteúdo, esse também é o caminho para as várias opções de configuração do WordPress.

A página de login padrão é bastante simples e serve muito bem ao seu propósito. Possui os campos necessários para o usuário inserir suas credenciais do WordPress e a página controla o acesso às telas de administração, permitindo que apenas usuários cadastrados façam login.

Como designer, você provavelmente passou horas e horas criando o design de site perfeito. É importante levar esse design por toda a experiência do usuário, mesmo que nem todos os usuários interajam com a página de login. Esta é outra oportunidade de adicionar esse detalhe extra e deixará uma impressão positiva para os usuários que fazem login regularmente no site. (Além disso, é considerado uma prática recomendada de segurança do WordPress mover a página para um URL um pouco menos óbvio!) Embora normalmente não faça parte da configuração do tema do WordPress, é muito simples fazer personalizações na página de login do WordPress.

Como acessar a página de login do WordPress

Você provavelmente está muito familiarizado com o acesso a esta página, não importa quais sejam as responsabilidades do seu site. Mas apenas no caso de já ter passado algum tempo, normalmente é encontrado no diretório raiz do site. A página de login normalmente é algo como www.mysite.com/wp-login.php . Como você pode ver, este ainda não foi estilizado.

Em alguns casos, pode haver uma instalação do WordPress em seu próprio subdiretório. Seria algo como www.mysite.com/directory-name/wp-login.php .

Como personalizar a página de login do WordPress

Nas etapas a seguir, o CSS será usado para fins de estilo. Além disso, haverá um código específico do tema adicionado ao arquivo functions.php para fazer a página personalizada acontecer.

Como a maioria dos tutoriais, você deve tentar isso em seu ambiente de teste primeiro. Se você está procurando uma boa ferramenta de ambiente de teste, você vai querer se familiarizar com o Local. Você pode testar com eficiência coisas novas em seu site antes de ir ao ar.

Faremos modificações no arquivo functions.php neste tutorial para que você possa ver como as alterações funcionam. No entanto, há também a opção de usar esses conceitos para criar um plug-in e adicionar possíveis modificações nele, em vez de no arquivo functions.php . Para este tutorial, as alterações de design para a página de login são muito específicas do tema, e é por isso que escolhi adicioná-las ao tema em vez de criar um plugin.

Crie uma nova pasta para personalizações

A organização é fundamental ao adicionar personalizações a um tema. Você desejará criar uma nova pasta especificamente para essas alterações. Para fazer isso, encontre seu tema ativo atual e crie uma pasta chamada “login”.

Em seguida, é necessário um arquivo CSS para fazer referência aos estilos de login personalizados. Na nova pasta de login, crie um arquivo CSS em branco e dê a ele um nome fácil de lembrar. Nesse caso, é login-styles.css .

Como esta folha de estilo será conectada? Ele precisará ser referenciado no arquivo functions.php do tema. Abra o arquivo functions.php e cole os seguintes trechos. (Certifique-se de incluir sua própria nomenclatura do arquivo CSS, se você usou algo diferente de login-styles.css .)

function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . 'login/login-styles.css" />';
}
add_action('login_head', 'custom_login');


Mudando o logotipo
Essa é uma mudança bastante fácil de fazer e tem muito impacto na melhoria da marca. As ferramentas do inspetor do navegador são uma grande ajuda para determinar a estrutura da página. Neste exemplo, o Chrome Developer Tools foi usado. Para alterar o logotipo do WordPress para o seu próprio, você precisará alterar os estilos CSS associados a este cabeçalho:
		


<h1><a href="http://wordpress.org/" title="Powered by WordPress">Your Site Name</a></h1>



Queremos tornar o CSS específico, de modo que direcionar o div com a classe .login nos permitirá estilizar o título e o link dentro desse div .

Para manter as coisas organizadas, criei uma pasta de imagens separada. Isso é opcional e você pode fazer referência a um arquivo em outro local, se desejar. Apenas certifique-se de que o caminho do arquivo esteja correto para a imagem que você deseja usar.
		


.login h1 a {
  background-image: url('images/login-logo.png');
}



Fizemos isso usando a altura especificada de 84px no estilo padrão. Se você quiser torná-lo maior ou menor, você pode especificar isso nesta folha de estilo CSS. Há a oportunidade de especificar diferentes margens e preenchimento também.

Por que o logotipo original não pode ser trocado? A razão é que, quando o WordPress é atualizado, ele pode ser eliminado.
Com este estilo simples, agora podemos dizer adeus ao logotipo genérico do WordPress. Essa troca de logotipo faz com que pareça muito mais pessoal e de marca.

Estilizando o plano de fundo personalizado
		


O plano de fundo pode ser uma cor sólida, padrão ou algo baseado em imagem. Neste exemplo, adicionaremos uma foto em preto e branco, abstrata e “tecnológica” ao plano de fundo.

Usando ferramentas de desenvolvimento do navegador, a estrutura pode ser estudada. Ao inspecionar, você verá que os estilos de fundo foram definidos para o corpo. As coisas são bastante gerais, portanto, tornar as coisas mais específicas garantirá que você não faça alterações globais que não deseja. Existe uma classe aplicada ao corpo chamada .login que será de grande utilidade (é o que usamos para o logotipo no exemplo acima, pois fazia parte do seletor).
		



body.login {
  background-image: url('images/example-image.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}


Se a imagem não aparecer (isso aconteceu algumas vezes, mais do que gostaria de admitir), verifique se o caminho para a imagem está correto.

As coisas estão começando a tomar forma aqui; mesmo com apenas essas pequenas alterações, a página de login está parecendo muito mais com a marca e mais interessante do que o padrão.
Ajustando o link do logotipo
Isso certamente não é um impedimento, mas agora que você tem seu próprio logotipo na página de login, ele deve ser vinculado ao seu site real. Atualmente, ele vai para wordpress.org . Tudo bem, porque o wordpress.org é um lugar popular e útil, mas na minha opinião, ter um marcador de navegador para isso é mais do que adequado. Não precisa fazer parte da página de login porque parece mais útil ter uma maneira rápida de chegar ao site do projeto.
		


Para alterar o valor do link para que o logotipo vincule ao seu site WordPress, use esta função (e lembre-se de inserir a URL do seu próprio site):
function login_logo_url() {
    return 'https://www.mysite.com';
}
add_filter('login_headerurl', 'login_logo_url');


Se você está se perguntando de onde vieram os filtros, eu tive que olhar para a referência da função para encontrar login_headerurl e login_headertitle .
Então agora o link está indo para o lugar correto, mas e o texto do título? Se você passar o mouse sobre o logotipo, verá “Powered by WordPress” como uma tag de título. Isso é absolutamente bom, mas isso não é totalmente descritivo para onde o link está indo. Isso é muito rápido e fácil de corrigir, então vale a pena o tempo extra. Para um título mais preciso, adicione esta função simples.
		


function login_logo_text() {
    return 'The Title';
}
add_filter('login_headertitle', 'login_logo_text');


Mais opções de estilo
Sinta-se à vontade para enlouquecer com CSS e expandir o que fizemos aqui. Você pode estilizar cada elemento HTML na página de login do WordPress com CSS. Os exemplos acima apenas arranharam a superfície. O botão, os links e o plano de fundo do formulário podem ser personalizados. E não se esqueça da tipografia, pois ela também pode ser personalizada.

Se você desenvolveu um estilo de formulário, seria uma experiência perfeita levar esses estilos até a página de login. O mesmo vale para os botões. Isso torna a experiência consistente e não desanima os usuários por ter um botão completamente diferente do que é usado no site real. Se você criou um guia de estilo da Web, isso será muito útil para determinar como aplicar um design consistente à página de login.
E se CSS não é sua praia, existem plugins WordPress existentes que ajudarão você a criar uma página de login personalizada do WordPress. Aqui estão algumas opções que vale a pena conferir:

Tema Meu Login
Login personalizado
Personalizador de página de login personalizada

A página de login é muitas vezes esquecida, mas conhecendo o potencial que esta página tem, ela pode facilmente se tornar parte do processo de design. Com algumas modificações simples, você pode personalizar facilmente sua página de login do WordPress para combinar com a aparência do seu site.