programación

Crear Página Inicio Sesión Personalizada

Last Updated: 24/02/2024

Crear una página de inicio de sesión para WordPress sin utilizar complementos puede ser un proceso más involucrado, pero es posible mediante la edición de archivos del tema activo y la incorporación de funciones específicas en el archivo functions.php. Este enfoque requiere un conocimiento básico de HTML, CSS y PHP, así como acceso al servidor donde está alojado el sitio de WordPress.

Publicaciones relacionadas

Para comenzar, necesitarás acceder a los archivos de tu tema activo a través de un cliente FTP o el panel de control del servidor. Asegúrate de hacer una copia de seguridad de los archivos antes de realizar cualquier cambio.

  1. Crear la página de inicio de sesión personalizada:
    • En el directorio de tu tema activo, crea un nuevo archivo llamado login-custom.php.
    • Abre este archivo y agrega el siguiente código para crear el formulario de inicio de sesión personalizado:
html


html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iniciar sesióntitle>
    <style>
        /* Estilos CSS para el formulario de inicio de sesión */
        /* Puedes personalizar estos estilos según tus preferencias */
        body {
            font-family: Arial, sans-serif;
        }
        form {
            max-width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 5px 0 20px 0;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            width: 100%;
            background-color: #0073e6;
            color: #fff;
            padding: 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
    style>
head>
<body>
    <form action="" method="post">
        <input type="hidden" name="action" value="custom_login">
        <label for="username">Usuario:label>
        <input type="text" name="username" id="username" required>
        <label for="password">Contraseña:label>
        <input type="password" name="password" id="password" required>
        <input type="submit" value="Iniciar sesión">
    form>
body>
html>
  1. Agregar funciones al archivo functions.php:
    • Abre el archivo functions.php de tu tema activo.
    • Agrega el siguiente código para manejar el proceso de inicio de sesión:
php
// Función para manejar el inicio de sesión personalizado
function custom_login() {
    $creds = array(
        'user_login'    => $_POST['username'],
        'user_password' => $_POST['password'],
        'remember'      => true
    );

    $user = wp_signon( $creds, false );

    if ( is_wp_error( $user ) ) {
        // Si hay un error en el inicio de sesión, redirigir de vuelta al formulario de inicio de sesión con un mensaje de error
        $login_url = home_url( '/login/' ); // Reemplaza '/login/' con la URL de tu página de inicio de sesión personalizada
        wp_redirect( $login_url . '?login=failed' );
    } else {
        // Si el inicio de sesión es exitoso, redirigir al panel de control del usuario
        wp_redirect( admin_url() );
    }
    exit;
}
add_action( 'admin_post_nopriv_custom_login', 'custom_login' );
  1. Crear una página para mostrar mensajes de error:
    • Crea una página en tu sitio de WordPress (p. ej., «Login») y establece la plantilla como «Custom Login».
    • Esta página mostrará el formulario de inicio de sesión personalizado que creamos en login-custom.php.

Con estos pasos, has creado una página de inicio de sesión personalizada para WordPress sin utilizar complementos. Los usuarios podrán iniciar sesión a través de esta página, y serán redirigidos al panel de control del usuario si el inicio de sesión es exitoso, o volverán al formulario de inicio de sesión con un mensaje de error si falla el inicio de sesión. Recuerda personalizar los estilos CSS y las URL según tus necesidades específicas.

Más Informaciones

Claro, profundicemos en los pasos y en el proceso general para crear una página de inicio de sesión personalizada para WordPress sin utilizar complementos.

  1. Crear la página de inicio de sesión personalizada:

    • El primer paso es crear un nuevo archivo en el directorio de tu tema activo. Este archivo actuará como una plantilla de página personalizada para el formulario de inicio de sesión.

    • Al principio del archivo, se define un comentario especial Template Name que le indica a WordPress el nombre de la plantilla. En este caso, lo llamamos Custom Login.

    • Luego, se escribe el código HTML que compone el formulario de inicio de sesión. Este formulario contiene campos para el nombre de usuario y la contraseña, así como un botón de envío. También se establece el atributo action del formulario para que apunte a admin-post.php, que es donde manejaremos la lógica de inicio de sesión en WordPress.

    • Los estilos CSS también se incluyen en este archivo para dar formato al formulario de inicio de sesión. Estos estilos son opcionales y pueden personalizarse según las preferencias de diseño.

  2. Agregar funciones al archivo functions.php:

    • En el archivo functions.php del tema activo, se agrega una función llamada custom_login. Esta función se encarga de manejar el proceso de inicio de sesión cuando se envía el formulario.

    • Dentro de esta función, se recuperan los valores del nombre de usuario y la contraseña enviados desde el formulario.

    • Luego, se utiliza la función wp_signon() para intentar iniciar sesión con las credenciales proporcionadas. Si el inicio de sesión es exitoso, el usuario será redirigido al panel de control de WordPress.

    • Si hay un error en el inicio de sesión (por ejemplo, credenciales incorrectas), el usuario será redirigido de vuelta al formulario de inicio de sesión con un mensaje de error. La URL a la que se redirige incluye un parámetro login=failed, que puede ser utilizado para mostrar un mensaje apropiado en la página.

  3. Crear una página para mostrar mensajes de error:

    • Finalmente, se crea una página en WordPress y se le asigna la plantilla Custom Login que creamos anteriormente.

    • Esta página actuará como la página de inicio de sesión personalizada y mostrará el formulario de inicio de sesión creado en el paso anterior.

    • Si el inicio de sesión falla, la página mostrará un mensaje de error apropiado utilizando el parámetro login=failed que se pasa en la URL de redirección.

Con estos pasos, has creado una página de inicio de sesión personalizada para WordPress sin la necesidad de utilizar complementos adicionales. Este enfoque te brinda un control total sobre el diseño y la funcionalidad del formulario de inicio de sesión, permitiéndote adaptarlo a las necesidades específicas de tu sitio web. Además, al evitar el uso de complementos, también puedes reducir la carga y mejorar la seguridad de tu sitio.

Last Updated: 24/02/2024
Botón volver arriba