Criar página de login personalizada do WordPress sem plug-in
Publicados: 2022-09-01Você já ficou entediado com a página de login padrão do WordPress?
Você já se perguntou se existe uma maneira de tornar a página de login consistente com os designs do seu site?
Se sim, você veio ao lugar certo. Neste artigo, vamos guiá-lo através de diferentes métodos para personalizar sua página de login sem nenhum plug-in.
O que incluímos hoje?
- Página de login padrão do WordPress
- Por que você deve criar uma página de login personalizada?
- Personalizar a página de login padrão do WordPress
- Personalizar o logotipo da página de login
- Desativando o alternador de idioma da página de login do WordPress
- Criar uma nova página de login personalizada
Página de login padrão do WordPress
Por padrão, você pode acessar a página de login do WordPress adicionando /login/, /admin/ ou wp-login.php ao final da URL do seu site.
Você recebe essa tela de login toda vez que faz isso, não é?
Como você pode ver, a página de login do WordPress contém os seguintes elementos:
- Plano de fundo padrão
- O logotipo do WordPress
- Campos de entrada (nome de usuário e senha)
- A caixa de seleção Lembrar de mim
- O botão Enviar
- O link Perdeu sua senha
- Voltar ao link
E se você quiser substituir esta página genérica pela sua personalizada, digamos, para fins de branding?
Continue lendo até o final do nosso blog. Haverá algumas surpresas para você.
Por que você deve criar uma página de login personalizada do WordPress?
Em primeiro lugar, as páginas de login personalizadas trazem uma experiência de usuário muito melhor. Se você está administrando uma pequena empresa que tem alguns usuários para fazer login no seu site, você pode absolutamente usar a página de login padrão do WordPress.
No entanto, imagine que seu site é uma loja online, permitindo que os clientes façam login em seu site por meio de um gateway chato e sem marca não é uma boa decisão.
A melhor prática é tornar a página de login consistente com os estilos do seu site.
Outro benefício de ter uma página de login personalizada do WordPress é aumentar a segurança do seu site. Ao alterar o URL de login padrão do WordPress, os usuários indesejados não podem acessar sua página de login do administrador facilmente. Isso ajuda a evitar ataques indesejados em seu site.
Agora, vamos para as próximas seções, onde o guiaremos pelas etapas detalhadas para criar sua própria página de login.
Personalizar a página de login padrão do WordPress
Você sabia que pode substituir logotipos e links na página de login padrão do WordPress pelos seus próprios?
Personalizar o logotipo da página de login
Para substituir o logotipo do WordPress, basta adicionar o seguinte trecho de código ao arquivo functions.php do seu tema (filho).
function ppwp_custom_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
imagem de fundo: url( https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png );
altura: 100px ;
largura: 300px ;
tamanho do plano de fundo: 300px 100px ;
repetição de fundo: sem repetição ;
fundo de preenchimento: 10px ;
}
</style>
<?php}
add_action( 'login_enqueue_scripts', 'ppwp_custom_login_logo');Esta ação ajuda a substituir apenas o logotipo. Ao clicar no seu logotipo, você ainda é redirecionado para a página do WordPress.
Como você pode redirecionar os usuários para o seu site?
Apenas um pedaço de bolo com o seguinte trecho de código.
function ppwp_custom_login_url() {
return home_url();
}
add_filter( 'login_headerurl', 'ppwp_custom_login_url');
function ppwp_login_logo_url_redirect() {
return ' https://passwordprotectwp.com/ ';
}
add_filter( 'login_headertitle', 'ppwp_login_logo_url_redirect');Não se esqueça de substituir o URL do site pelo nome real do seu site. O logotipo personalizado em sua tela de login é apontado para a página inicial do seu site agora.
Desativando o alternador de idioma da página de login do WordPress
O WordPress 5.9 inclui um recurso para os usuários selecionarem idiomas ao fazer login no seu site.
É útil quando você está executando um site multilíngue. Se o seu site estiver disponível em um único idioma, convém desabilitar essa função para simplificar seu formulário de login.
Como você pode fazer isso?
Basta adicionar o seguinte trecho de código ao arquivo functions.php do seu tema (filho) ou ao plugin Code Snippets.
add_filter( 'login_display_language_dropdown', '__return_false' );
Criar uma nova página de login personalizada do WordPress
E se você quiser fazer mais do que apenas alterar logotipos e links?
O WordPress permite que você crie sua própria página de login e substitua a página padrão do WordPress pela sua?
Sim! Você absolutamente pode!
Basta seguir nossos passos abaixo. Observe que este guia requer um pouco de conhecimento de codificação. Se você não estiver familiarizado com códigos, use plugins.
Lembre-se de fazer backup do seu site antes de começar.
Etapa 1: criar um novo arquivo de modelo
Para fazer isso, vá para o seu Appearance > Theme File Editor.
Na seção template-parts, adicione um novo arquivo .php e nomeie-o como você gostaria, por exemplo, custom-login-page.php.
Primeiro, adicione esta linha ao seu arquivo de modelo personalizado:
<?php /* Nome do modelo: Páginas de login personalizadas */ ?>Esta ação tornará seu arquivo PHP criado um modelo de página. Assim, você verá o nome do modelo ao editar páginas no back-end.
Etapa 2: personalize seu arquivo de modelo criado
O próximo passo é adicionar códigos PHP para criar um formulário de login completo.
Adicionar um formulário de login
<?php /** * Nome do modelo: página de login personalizada */ get_header(); if (! is_user_logged_in()) { $args = array 'redirect' => admin_url(), // redireciona para o painel de administração. 'form_id' => 'custom_loginform', 'label_username' => __( ' Nome de usuário: ' ), 'label_password' => __( ' Senha: ' ), 'label_remember' => __( ' Lembre-se de mim ' ), 'label_log_in' => __( ' Logar-me ' ), 'lembrar' => verdadeiro ); wp_login_form($args); } get_footer();
Redirecionar wp-login.php para a página de login personalizada
Você criou com sucesso uma página de login personalizada. No entanto, os usuários ainda podem acessar diretamente a página de login padrão do WordPress digitando wp-admin ou wp-login.php após as URLs do seu site.
Para evitar que isso aconteça, você precisa redirecionar os usuários dos URLs de login padrão do WordPress para os seus personalizados.
Para fazer isso, adicione os seguintes códigos personalizados ao functions.php do seu tema (filho) ou ao plugin Code Snippets.
function redirect_login_page() {
$login_url = home_url('/login');
$url = basename($_SERVER['REQUEST_URI']); // obtém a URL solicitada
isset( $_REQUEST['redirect_to'] ) ? ($url = "wp-login.php"): 0; // se os usuários enviarem solicitação para wp-admin
if( $url == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
wp_redirect( $login_url);
saída;
}
}
add_action('init','redirect_login_page');Tratamento de erros de login
Quando você terminar de criar uma página de login personalizada, os usuários que inserirem os detalhes de login corretos chegarão ao painel. As solicitações de login com falha serão redirecionadas para o padrão do WordPress.
Para lidar com tentativas de login com falha, adicione o seguinte código ao arquivo functions.php do seu tema (filho).
função error_handler() {
$login_page = home_url('/login');
$ erros globais;
$err_codes = $errors->get_error_codes(); // obtém os códigos de erro internos do WordPress
$_SESSION["err_codes"] = $err_codes;
wp_redirect($login_page); // mantém os usuários na mesma página
saída;
}
add_filter( 'login_errors', 'error_handler');Em seguida, adicione os seguintes códigos ao custom_login_page.php.
$err_codes = isset( $_SESSION["err_codes"] )? $_SESSION["err_codes"] : 0;
if( $err_codes !== 0 ){
echo display_error_message( $err_codes );
}
function display_error_message( $err_code ){
// Nome de usuário Inválido.
if (in_array('invalid_username', $err_code)) {
$error = '<strong>ERRO</strong>: Nome de usuário inválido.';
}
// Senha incorreta.
if ( in_array( 'senha_incorreta', $ código_err ) ) {
$error = '<strong>ERRO</strong>: A senha digitada está incorreta.';
}
// Nome de usuário vazio.
if (in_array('empty_username', $err_code)) {
$error = '<strong>ERRO</strong>: O campo nome de usuário está vazio.';
}
// Senha vazia.
if (in_array('empty_password', $err_code)) {
$error = '<strong>ERRO</strong>: O campo de senha está vazio.';
}
// Nome de usuário vazio e senha vazia.
if( in_array( 'empty_username', $err_code ) && in_array( 'empty_password', $err_code )){
$error = '<strong>ERRO</strong>: O nome de usuário e a senha estão vazios.';
}
retorna $erro;
}Etapa 3: crie uma nova página e atribua o modelo criado à página personalizada
Agora, navegue até a seção Páginas no painel de administração e crie uma nova página.
No menu suspenso Modelo na seção Atributos da página, selecione o modelo criado.
Salve a página.
Agora você tem sua própria página de login.
Você criou com sucesso sua página de login personalizada?
Orientamos você por etapas detalhadas para personalizar sua página de login de administrador.
Você pode alterar o logotipo e a URL associada no formulário de login padrão do WordPress.
Como alternativa, você pode criar sua própria página de login personalizada do WordPress criando um novo modelo de página. Embora a segunda solução pareça exigir conhecimento de codificação no início, é muito fácil com nosso guia passo a passo claro. Então não se preocupe.
Você já conseguiu criar sua página de login personalizada?
Você precisa de mais alguma informação?
Deixe-nos saber na seção de comentários abaixo!