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 um ótimo conteúdo? Além da criação de conteúdo, este 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 atende 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 o 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 detalhes extras 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, é bastante 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 suas responsabilidades no site. Mas, caso já tenha 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 primeiro em seu ambiente de teste. Se você estiver procurando por uma boa ferramenta de ambiente de teste, convém 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, também há a opção de usar esses conceitos para criar um plug-in e adicionar quaisquer modificações em potencial, em vez de no arquivo functions.php . Para este tutorial, as alterações de design da página de login são muito específicas do tema, e é por isso que optamos por adicioná-las ao tema em vez de criar um plug-in.

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, um arquivo CSS é necessário 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. Neste 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 trechos a seguir. (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 de inspeção do navegador são uma grande ajuda para determinar a estrutura da página. Neste exemplo, as ferramentas do desenvolvedor do Chrome foram usadas. Para alterar o logotipo do WordPress para o seu, 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, criamos 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 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 esse 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, torná-las mais específicas garantirá que você não faça nenhuma alteração global que não deseja. Existe uma classe aplicada ao corpo chamada .login que será de grande utilidade (foi 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, 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 parece muito mais marcada e mais interessante do que o padrão.

Ajustando o link do logotipo

Isso certamente não é um empecilho, mas agora que você tem seu próprio logotipo na página de login, ele deve estar vinculado ao seu site real. Atualmente, ele vai para wordpress.org . Tudo bem, porque wordpress.org é um lugar popular e útil, mas, em nossa 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 seja vinculado ao seu site WordPress, use esta função (e lembre-se de inserir o 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, tivemos que olhar a referência da função para encontrar login_headerurl e login_headertitle .

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 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 para a página de login. O mesmo vale para os botões. Isso torna a experiência consistente e não confunde 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 você não gosta de CSS, existem plug-ins do WordPress que o ajudarão a criar uma página de login personalizada do WordPress. Aqui estão algumas opções que valem a pena conferir:

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

A página de login é frequentemente esquecida, mas sabendo do 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.