Como construir uma página de login WordPress personalizada

Ah, sim, a página de login do WordPress – uma das páginas mais reconhecidas no WordPress – não é?

Mas, ao mesmo tempo, ter esta página em seu site WordPress em sua forma padrão nem sempre é a melhor das ideias.

Por quê? - você pergunta.

Aqui está a resposta:

Por que você precisaria de uma página de login WordPress personalizada?

A questão é tripla:

1. Tráfego . Quanto mais tráfego você recebe, mais tráfego “ruim” você obtém como resultado direto. Por tráfego ruim, quero dizer scripts e bots maliciosos, spammers e todos os tipos de usuários que chegam ao seu site com más intenções. Personalizar sua página de login do WordPress pode tornar seu site mais seguro.
2. Site multiusuário . Se o seu site for gerenciado por várias pessoas - sejam administradores ou autores/blogueiros - ocorrerão várias ocorrências de login. Fornecer um formulário de login personalizado tornará o processo mais agradável em geral.
3. Marca . A página de login padrão é tudo de bom, mas há o grande logotipo do WordPress bem no meio. Mudar isso e tornar a página de login mais parecida com a sua pode ser um bom toque de marca. Isso é especialmente válido se você estiver criando um site para um cliente. Proporcionar ao seu cliente uma experiência consistente é certamente algo que eles irão apreciar.

Se algum dos itens acima parecer atraente para você, considere mudar sua página de login para uma personalizada. Veja como:

Como criar uma página de login WordPress personalizada

Existem duas maneiras principais de você fazer isso:

• a maneira manual ,
• a maneira de plug -in.

Ambas as formas têm seus prós e contras. A forma manual oferece mais controle sobre a aparência da página final. O caminho do plugin é mais fácil de seguir, especialmente se você não tem nenhuma habilidade de codificação, mas você tem que se contentar com o que o plugin permite que você faça.

Vamos cobrir os dois.

Criando uma página de login personalizada manualmente

Embora isso exija que você ajuste alguns dos arquivos de origem do seu tema, não é nada tão difícil. Vou usar Twenty Fifteen como meu exemplo aqui.

A diversão começa criando uma cópia do arquivo page.php e do arquivo content-page.php .

Renomeie essas novas cópias para page-login.php e content-login.php respectivamente.

Abra page-login.php e altere apenas uma linha. A partir disso:

 get_template_part( 'content', 'page' );

Para isso:

 get_template_part( 'content', 'login' );

Agora, vamos editar content-login.php e adicionar uma linha logo abaixo <?php the_content(); ?> <?php the_content(); ?> . Igual a:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

Observação. Nesta fase, você pode realizar uma série de outras personalizações, se desejar (como ajustar o design/layout, remover a barra lateral), mas tudo é opcional. Alterar apenas essas duas linhas fará o trabalho se você estiver adotando uma abordagem extremamente mínima com sua nova página de login do WordPress.

Agora, vamos criar uma nova página no wp-admin e simplesmente chamá-la de “login”. Certifique-se de que o permalink também seja “login”:

Fazer isso garantirá que o WordPress use seu arquivo de modelo page-login.php automaticamente.

Se você visitar sua nova página agora, ela deve estar mais ou menos assim:

Nesta fase, a única coisa que resta a fazer é definir redirecionamentos para eliminar a página de login padrão do WordPress. Faça isso colocando estas linhas no final do seu arquivo functions.php :

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(Snippets de código criados com base em: [1][2].)

No momento, a única página de login acessível é a nova criada por você. O melhor aqui é que você pode editá-lo livremente através do editor de páginas padrão do WordPress (assim como você editaria qualquer outra página).

Criando uma página de login personalizada do WordPress com um plugin

Esse método funciona um pouco diferente porque, em vez de criar uma página de login completamente nova, na verdade estamos modificando a página padrão.

Primeiro, o plugin que vamos usar é: Custom Login Page Customizer.

Após instalá-lo e ativá-lo, basta acessar Aparência > Personalizador de Login , onde você pode iniciar o painel do personalizador.

As opções deste plugin são bem legais e permitem que você ajuste coisas como:

• Defina um logotipo para aparecer em vez do logotipo padrão do WordPress.
• Defina um plano de fundo para toda a página de login.
• Defina um plano de fundo para o próprio formulário.
• Ajuste o estilo do formulário e cada pequeno detalhe sobre ele (fontes, tamanhos, cores, campos).
• Instale um complemento de segurança para obter um campo captcha adicional no formulário (ótimo para evitar logins/bots de spam).

Por exemplo, apenas alguns minutos de trabalho com o plugin e obtive este resultado:

Outra opção de plug-in

Outro plugin de página de login personalizado que vale a pena dar uma olhada é: Login Designer. Este plugin visa tornar a personalização da página de login do WordPress super fácil, ao mesmo tempo em que oferece flexibilidade no design.

Uma maneira de obter facilidade de uso é tornar o processo de personalização familiar. Todas as opções e ferramentas estão integradas diretamente no WordPress Customizer. Portanto, se você está acostumado a usar o Personalizador para alterar as opções de tema, você se sentirá em casa.

Confira este vídeo para uma visão geral de como o plugin funciona.

Manual ou via plugin ?

Qual é o seu método de escolha? Você prefere codificar as coisas manualmente ou ter tudo tratado por um plugin? Sinta-se à vontade para compartilhar.