programação

Como Criar uma Página de Login no WordPress Sem Plugins

Última Actualização 06/03/2024
lido 1 minuto

Criar uma página de login personalizada para um site WordPress sem o uso de plugins pode ser um desafio, mas é possível com um conhecimento básico de HTML, CSS, PHP e WordPress. O processo envolve a criação de um novo template de página de login, o registro de um novo URL de login, e a adição de algumas funções ao arquivo functions.php do tema ativo do WordPress.

Artigos Relacionados

  1. Criando a Página de Login Personalizada:

    O primeiro passo é criar uma página de login personalizada usando HTML e CSS. Você pode criar um arquivo chamado login-custom.php e adicionar o seguinte código:

    html
    html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Área de Logintitle>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .login-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .login-container h2 {
            margin-bottom: 20px;
            text-align: center;
        }
        .login-form input {
            width: 100%;
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 3px;
            border: 1px solid #ccc;
        }
        .login-form button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        .login-form button:hover {
            background-color: #0056b3;
        }
    style>
head>
<body>
    <div class="login-container">
        <h2>Área de Loginh2>
        <form class="login-form" action="" method="post">
            <input type="hidden" name="action" value="custom_login">
            <input type="text" name="username" placeholder="Nome de usuário" required>
            <input type="password" name="password" placeholder="Senha" required>
            <button type="submit">Entrarbutton>
        form>
    div>
body>
html>

    Este código cria uma página HTML básica com um formulário de login.

  2. Adicionando a Lógica de Login ao functions.php:

    Em seguida, é necessário adicionar a lógica de login ao arquivo functions.php do tema ativo. Adicione o seguinte código ao final do arquivo functions.php:

    php
    function custom_login() {
    $username = $_POST['username'];
    $password = $_POST['password'];

    $user = wp_signon( array(
        'user_login'    => $username,
        'user_password' => $password,
        'remember'      => true
    ) );

    if ( is_wp_error( $user ) ) {
        echo '
    Nome de usuário ou senha inválidos. Por favor, tente novamente.
    
		
    

		
    
	
    '    ;
        return;
    }

    wp_redirect( home_url() );
    exit;
}
add_action( 'admin_post_nopriv_custom_login', 'custom_login' );

    Este código verifica os dados de login submetidos pelo formulário e autentica o usuário. Se as credenciais estiverem corretas, o usuário é redirecionado para a página inicial do site. Se não, uma mensagem de erro é exibida.

  3. Configurando o URL da Página de Login:

    Finalmente, é necessário configurar o URL da página de login personalizada. Você pode fazer isso adicionando o seguinte código ao final do arquivo functions.php:

    php
    function custom_login_url() {
    return home_url( '/login-custom/' );
}
add_filter( 'login_url', 'custom_login_url' );

    Este código define o URL da página de login personalizada como /login-custom/.

Após seguir esses passos, você deve ser capaz de acessar a página de login personalizada através do URL configurado e os usuários poderão fazer login utilizando suas credenciais habituais do WordPress. Certifique-se de testar a funcionalidade para garantir que tudo esteja funcionando corretamente.

“Mais Informações”

Criar uma tela de login personalizada para um site WordPress sem depender de plugins pode ser uma tarefa desafiadora, mas é totalmente possível com o conhecimento adequado de programação e das estruturas básicas do WordPress.

Para começar, é importante entender que o WordPress utiliza um sistema de login baseado em formulários, onde os dados são enviados para a URL de login padrão do WordPress (geralmente, wp-login.php) para processamento. Portanto, para criar uma tela de login personalizada, precisamos substituir o formulário de login padrão do WordPress por um formulário personalizado e redirecionar os usuários para ele quando tentarem acessar a página de login.

Vou fornecer uma visão geral do processo para criar uma tela de login personalizada sem plugins:

  1. Criar uma Página de Login Personalizada:

    • Crie uma nova página no painel do WordPress para servir como sua página de login personalizada. Você pode chamá-la de “Login” ou algo semelhante.
    • Nesta página, você precisará adicionar um formulário HTML para que os usuários possam inserir suas credenciais de login.

  2. Substituir o URL de Login Padrão:

    • Utilize o arquivo functions.php do seu tema ou um plugin personalizado para redirecionar o URL padrão de login do WordPress (wp-login.php) para a página de login personalizada que você criou.

  3. Processar os Dados do Formulário:

    • Crie um script PHP para processar os dados do formulário de login personalizado.
    • Você pode usar as funções de verificação de login do WordPress, como wp_signon, para verificar as credenciais do usuário.

  4. Redirecionar Usuários Logados:

    • Após um login bem-sucedido, redirecione os usuários para a página desejada usando a função wp_redirect.

  5. Lidar com a Recuperação de Senha:

    • Você também precisará adicionar um link ou formulário para permitir que os usuários recuperem suas senhas perdidas. Este processo pode ser um pouco mais complexo e exigirá o uso de funções do WordPress para redefinir senhas.

Aqui está um exemplo básico de como você pode criar um formulário de login personalizado e processar seus dados:

php

// Template Name: Custom Login

// Verificar se o formulário foi enviado
if( isset($_POST['custom_login_submit']) ) {
    // Processar os dados do formulário
    $username = sanitize_user( $_POST['username'] );
    $password = $_POST['password'];
    
    // Tentar fazer login
    $user = wp_signon( array(
        'user_login'    => $username,
        'user_password' => $password,
        'remember'      => true
    ) );

    // Verificar se o login foi bem-sucedido
    if ( is_wp_error($user) ) {
        echo '
Credenciais inválidas. Por favor, tente novamente.
';
    } else {
        // Redirecionar usuário logado
        wp_redirect( home_url() );
        exit;
    }
}
?>



"post">
    

        

        "text" name="username" id="username">
    

    

        

        "password" name="password" id="password">
    

    

        "submit" name="custom_login_submit" value="Entrar">

Este é apenas um exemplo básico para ajudá-lo a começar. Você precisará personalizá-lo e estilizá-lo conforme necessário para atender às suas necessidades específicas de design e funcionalidade. Além disso, certifique-se sempre de adicionar medidas de segurança adequadas ao lidar com dados de login e de senha.

Última Actualização 06/03/2024
lido 1 minuto
Botão Voltar ao Topo