Crear página de inicio de sesión personalizada de WordPress sin complemento

¿Alguna vez te has aburrido de la página de inicio de sesión predeterminada de WordPress?

¿Alguna vez se ha preguntado si existe alguna manera de hacer que la página de inicio de sesión sea coherente con los diseños de su sitio web?

Si es así, has venido al lugar correcto. En este artículo, lo guiaremos a través de diferentes métodos para personalizar su página de inicio de sesión sin complementos.

¿Qué hemos incluido hoy?

• Página de inicio de sesión predeterminada de WordPress
• ¿Por qué debería crear una página de inicio de sesión personalizada?
• Personalizar la página de inicio de sesión predeterminada de WordPress
  • Personalizar el logotipo de la página de inicio de sesión
  • Deshabilitar el selector de idioma de la página de inicio de sesión de WordPress
• Crear una nueva página de inicio de sesión personalizada

Página de inicio de sesión predeterminada de WordPress

De forma predeterminada, puede acceder a la página de inicio de sesión de WordPress agregando /login/, /admin/ o wp-login.php al final de la URL de su sitio.

Aparece esta pantalla de inicio de sesión cada vez que lo hace, ¿no?

Como puede ver, la página de inicio de sesión de WordPress contiene los siguientes elementos:

1. Fondo predeterminado
2. El logotipo de WordPress
3. Campos de entrada (nombre de usuario y contraseña)
4. La casilla de verificación Recordarme
5. El botón Enviar
6. El enlace Perdió su contraseña
7. volver al enlace

¿Qué sucede si desea reemplazar esta página genérica con una personalizada, digamos, con fines de marca?

Sigue leyendo hasta el final de nuestro blog. Habrá algunas sorpresas para ti.

¿Por qué debería crear una página de inicio de sesión personalizada de WordPress?

En primer lugar, las páginas de inicio de sesión personalizadas brindan una experiencia de usuario mucho mejor. Si está ejecutando una pequeña empresa que tiene algunos usuarios para iniciar sesión en su sitio, puede usar absolutamente la página de inicio de sesión predeterminada de WordPress.

Sin embargo, imagine que su sitio es una tienda en línea, permitir que los clientes inicien sesión en su sitio a través de una puerta de enlace aburrida y sin marca no es una buena opción.

La mejor práctica es hacer que la página de inicio de sesión sea coherente con los estilos de su sitio web.

Otro beneficio de tener una página de inicio de sesión personalizada de WordPress es mejorar la seguridad de su sitio. Al cambiar la URL de inicio de sesión predeterminada de WordPress, los usuarios no deseados no pueden acceder fácilmente a su página de inicio de sesión de administrador. Esto ayuda a evitar ataques no deseados en su sitio.

Ahora, pasemos a las siguientes secciones, donde lo guiaremos a través de pasos detallados para crear su propia página de inicio de sesión.

Personalizar la página de inicio de sesión predeterminada de WordPress

¿Sabe que puede reemplazar logotipos y enlaces en la página de inicio de sesión predeterminada de WordPress con los suyos propios?

Personalizar el logotipo de la página de inicio de sesión

Para reemplazar el logotipo de WordPress, simplemente agregue el siguiente fragmento de código al archivo functions.php de su tema (hijo).

 función ppwp_custom_login_logo() { ?>
    <tipo de estilo="texto/css">
        #iniciar sesión h1 a, .iniciar sesión h1 a {
imagen de fondo: url ( https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png );
        altura: 100px ;
        ancho: 300px ;
        tamaño de fondo: 300px 100px ;
        repetición de fondo: sin repetición ;
        relleno inferior: 10px ;
        }
    </estilo>
<?php}
add_action( 'login_enqueue_scripts', 'ppwp_custom_login_logo' );

Esta acción lo ayuda a reemplazar solo el logotipo. Al hacer clic en su logotipo, todavía se le redirige a la página de WordPress.

¿Cómo puede redirigir a los usuarios a su sitio?

Es pan comido con el siguiente fragmento de código.

 función ppwp_custom_login_url() {
    volver home_url();
}
add_filter('login_headerurl', 'ppwp_custom_login_url');
función ppwp_login_logo_url_redirect() {
    volver ' https://passwordprotectwp.com/ ';
}
add_filter('login_headertitle', 'ppwp_login_logo_url_redirect');

No olvide reemplazar la URL del sitio con el nombre real de su sitio. El logotipo personalizado en su pantalla de inicio de sesión apunta a la página de inicio de su sitio ahora.

Deshabilitar el selector de idioma de la página de inicio de sesión de WordPress

WordPress 5.9 incluye una función para que los usuarios seleccionen idiomas al iniciar sesión en su sitio.

Es útil cuando está ejecutando un sitio multilingüe. Si su sitio web está disponible en un solo idioma, es posible que desee desactivar esa función para simplificar su formulario de inicio de sesión.

Como puedes hacer eso?

Simplemente agregue el siguiente fragmento de código al archivo functions.php de su tema (hijo) o al complemento Code Snippets.

 add_filter('login_display_language_dropdown', '__return_false');

Crear una nueva página de inicio de sesión personalizada de WordPress

¿Qué sucede si desea hacer algo más que cambiar logotipos y enlaces?

¿WordPress le permite crear su propia página de inicio de sesión y reemplazar la predeterminada de WordPress con la suya?

¡Sí! ¡Absolutamente puedes!

Simplemente siga nuestros pasos a continuación. Tenga en cuenta que esta guía requiere un poco de conocimiento de codificación. Si no está familiarizado con los códigos, use complementos en su lugar.

Recuerde hacer una copia de seguridad de su sitio antes de comenzar.

Paso 1: Crear un nuevo archivo de plantilla

Para hacerlo, ve a Apariencia > Editor de archivos de temas.

En la sección de partes de la plantilla, agregue un nuevo archivo .php y asígnele el nombre que desee, por ejemplo, custom-login-page.php.

Lo primero es lo primero, agregue esta línea a su archivo de plantilla personalizado:

 <?php /* Nombre de la plantilla: Páginas de inicio de sesión personalizadas */ ?>

Esta acción hará que su archivo PHP creado sea una plantilla de página. En consecuencia, verá el nombre de la plantilla cuando edite páginas en el backend.

Paso 2: personalice su archivo de plantilla creado

El siguiente paso es agregar códigos PHP para crear un formulario de inicio de sesión completo.

Agregar un formulario de inicio de sesión

 <?php
/**
* Nombre de la plantilla: Página de inicio de sesión personalizada
*/
obtener_encabezado();
si (! es_usuario_logged_in()) {
    $argumentos = matriz
        'redireccionar' => admin_url(), // redirigir al panel de administración.
        'form_id' => 'formulario de inicio de sesión personalizado',
        'label_username' => __( ' Nombre de usuario: ' ),
        'label_password' => __( ' Contraseña: ' ),
        'label_remember' => __( ' Recuérdame '),
        'label_log_in' => __( ' Iniciar sesión ' ),
         'recordar' => verdadero
    );
wp_login_form( $argumentos);
}
get_footer();

Redirigir wp-login.php a la página de inicio de sesión personalizada

Ha creado correctamente una página de inicio de sesión personalizada. Sin embargo, los usuarios aún pueden acceder directamente a la página de inicio de sesión predeterminada de WordPress escribiendo wp-admin o wp-login.php después de las URL de su sitio.

Para evitar que esto suceda, debe redirigir a los usuarios de las URL de inicio de sesión predeterminadas de WordPress a las personalizadas.

Para hacer eso, agregue los siguientes códigos personalizados al complemento functions.php o Code Snippets de su tema (hijo).

 función redirect_login_page() {
    $login_url = home_url( '/login' );
    $url = nombrebase($_SERVIDOR['SOLICITUD_URI']); // obtener la URL solicitada
    isset( $_REQUEST['redirect_to'] ) ? ( $url = "wp-login.php" ): 0; // si los usuarios envían una solicitud a wp-admin
    if( $url == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'OBTENER') {
        wp_redirect ($ inicio de sesión_url);
        salida;
    }
}
add_action('init','redirect_login_page');

Gestión de errores de inicio de sesión

Una vez que haya terminado de crear una página de inicio de sesión personalizada, los usuarios que ingresen los detalles de inicio de sesión correctos accederán al tablero. Las solicitudes de inicio de sesión fallidas se redirigirán a la predeterminada de WordPress.

Para lidiar con los intentos de inicio de sesión fallidos, agregue el siguiente código al archivo functions.php de su tema (hijo).

 función controlador_error() {
    $página_de_inicio = home_url( '/iniciar' );
    $errores globales;
    $err_codes = $errores->get_error_codes(); // obtener códigos de error incorporados de WordPress
    $_SESSION["err_codes"] = $err_codes;
    wp_redirect ($ inicio de sesión_página); // mantener a los usuarios en la misma página
    salida;
}
add_filter('login_errors', 'error_handler');

A continuación, agregue los siguientes códigos a custom_login_page.php.

 $códigos_err = isset( $_SESSION["códigos_err"] )? $_SESSION["códigos_err"] : 0;
    if( $códigos_err !== 0 ){
        echo display_error_message ($ err_codes);
}
función mostrar_mensaje_error( $código_error){
    // Nombre de usuario no válido.
    if ( in_array( 'nombre_de_usuario_inválido', $código_err ) ) {
        $error = '<strong>ERROR</strong>: Nombre de usuario no válido.';
    }
    // Contraseña incorrecta.
    if ( in_array( 'contraseña_incorrecta', $código_err ) ) {
        $error = '<strong>ERROR</strong>: La contraseña que ingresó es incorrecta.';
    }
    // Nombre de usuario vacío.
    if ( in_array( 'empty_username', $err_code ) ) {
        $error = '<strong>ERROR</strong>: El campo de nombre de usuario está vacío.';
    }
    // Contraseña vacía.
    if ( in_array( 'contraseña_vacia', $codigo_err ) ) {
        $error = '<strong>ERROR</strong>: El campo de contraseña está vacío.';
    }
    // Nombre de usuario vacío y contraseña vacía.
    if( in_array( 'empty_username', $err_code ) && in_array( 'empty_password', $err_code )){
        $error = '<strong>ERROR</strong>: El nombre de usuario y la contraseña están vacíos.';
    }
devolver $error;
}

Paso 3: cree una nueva página y asigne la plantilla creada a la página personalizada

Ahora, navegue a la sección Páginas debajo de su panel de administración y cree una nueva página.

En el menú desplegable Plantilla en la sección Atributos de la página, seleccione su plantilla creada.

Guarde la página.

Ahora tiene su propia página de inicio de sesión.

¿Ha creado con éxito su página de inicio de sesión personalizada?

Lo hemos guiado a través de pasos detallados para personalizar su página de inicio de sesión de administrador.

Puede cambiar el logotipo y la URL asociada en el formulario de inicio de sesión predeterminado de WordPress.

Alternativamente, puede crear su propia página de inicio de sesión personalizada de WordPress creando una nueva plantilla de página. Si bien la segunda solución parece requerir conocimientos de codificación al principio, es bastante fácil con nuestra clara guía paso a paso. Así que no te preocupes en absoluto.

¿Ya logró crear su página de inicio de sesión personalizada?

¿Necesita más información?

¡Háganos saber en la sección de comentarios a continuación!