Cómo construir una página de inicio de sesión de WordPress totalmente personalizada

Creo que muchos de ustedes están familiarizados con la página de inicio de sesión de WordPress en wp-login.php. Se ve bien y funciona bien. Pero cuando se trata de crear un sitio web para clientes, es posible que desee un página de inicio de sesión personalizada, para que se integre muy bien con el diseño del sitio web en su conjunto. Además, tener una página de inicio de sesión personalizada también podría dar a sus clientes una buena impresión de sus habilidades.

Si esto es algo que desea lograr en su sitio, así es como puede crear una página de inicio de sesión de WordPress totalmente personalizada.

Página de inicio de sesión personalizada

Primero, necesitamos crear una plantilla de página personalizada para la página de inicio de sesión. Para hacerlo, puede crear una nueva plantilla de página y nombrarla, por ejemplo, page-login.php. Luego, cree una nueva página desde el backend de WordPress y establezca el enlace permanente en login para que WordPress automáticamente tome la page-login.php plantilla para la página.

El formulario de inicio de sesión

Pon el wp_login_form etiqueta en el page-login.php plantilla de página para mostrar el formulario de inicio de sesión.

<?php wp_login_form(); ?>

Lo siguiente es opcional, pero podría ser útil en ciertos casos. Puede configurar algunas cosas para el formulario de inicio de sesión, como especificar la redirección de la URL después de que el usuario haya iniciado sesión correctamente, cambiar la ID del nombre de usuario y el campo de entrada de la contraseña.

<?php
$args = array(
    'redirect' => home_url(), 
    'id_username' => 'user',
    'id_password' => 'pass',
   ) 
;?>
<?php wp_login_form( $args ); ?>

Además, también puedes añadir algo aparte. Podría ser su logotipo y una pequeña descripción de su sitio, por ejemplo.

<div class="login-branding">
	<a href="https://www.hongkiat.com/blog/wordpress-custom-loginpage/#" class="login-logo">Hongkiat.com</a>
	<p class="login-desc">
		Hongkiat.com is a design weblog dedicated to designers and bloggers. We constantly publish useful tricks, tools, tutorials and inspirational artworks.
	</p>
</div>
<div class="login-form">
<?php
$args = array(
    'redirect' => home_url(), 
    'id_username' => 'user',
    'id_password' => 'pass',
   ) 
;?>
<?php wp_login_form( $args ); ?>
</div>

Ahora, mejoremos el formulario con CSS. Puede crear el CSS por su cuenta según los requisitos de su sitio. En este ejemplo, así es como se ve mi formulario de inicio de sesión. Tiene fondo negro, con un botón azul, que encaja bastante bien con el tema del sitio Hongkiat.com.

Validación

En este punto, la página de inicio de sesión ya es funcional. Podemos intentar iniciar sesión y, si lo logramos, seremos redirigidos a la URL que hemos especificado en el redirect parámetro anterior. Pero, hay algo que debemos abordar.

Primero el wp-login.php la página aún es accesible. Sería mejor redirigir el wp-login.php a nuestra nueva página de inicio de sesión para ofrecer una experiencia unificada a nuestros clientes.

Para ello, puede añadir los siguientes códigos en el functions.php de tu tema

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');

Recuerda cambiar el $login_page variable a su propia página de inicio de sesión (gracias a Montana Flynn por la sugerencia).

En segundo lugar, la página de inicio de sesión puede funcionar como se esperaba cuando iniciamos sesión con éxito. Pero si ocurre un error, como cuando se envían combinaciones de usuario y contraseña no válidas, o se envía un campo vacío, también se nos descartará. wp-login.php. Para resolver este problema, agregue las siguientes funciones en el functions.php.

function login_failed() {
	$login_page  = home_url( '/login/' );
	wp_redirect( $login_page . '?login=failed' );
	exit;
}
add_action( 'wp_login_failed', 'login_failed' );

function verify_username_password( $user, $username, $password ) {
	$login_page  = home_url( '/login/' );
    if( $username == "" || $password == "" ) {
        wp_redirect( $login_page . "?login=empty" );
        exit;
    }
}
add_filter( 'authenticate', 'verify_username_password', 1, 3);

Estas dos funciones realizan dos tareas. Redireccionarán al usuario en caso de fallar y agregarán un login cadena de consulta a la URL con el valor de cualquiera failed o empty.

El último problema es que también seremos redirigidos a wp-login.php cuando hemos cerrado sesión en el sitio. Por lo tanto, también debemos especificar la URL de redireccionamiento al cerrar la sesión, así.

function logout_page() {
	$login_page  = home_url( '/login/' );
	wp_redirect( $login_page . "?login=false" );
	exit;
}
add_action('wp_logout','logout_page');

Mensaje de error

Mostraremos un mensaje de error, mostrándole al usuario cuándo ocurrió el error y cuándo se desconectó usando el cadena de consulta que hemos puesto en la URL. Para obtener el valor de la cadena de consulta de inicio de sesión anterior, podemos usar $_GET.

Coloque este código a continuación en la plantilla de la página de inicio de sesión.

$login 	= (isset($_GET['login']) ) ? $_GET['login'] : 0;

El código anterior verificará si el login variable contiene valor, de lo contrario se establecerá en 0. Luego mostraremos diferentes mensajes de notificación basados ​​en el valor de $erroral igual que.

if ( $login === "failed" ) {
	echo '<p class="login-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>';
} elseif ( $login === "empty" ) {
	echo '<p class="login-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>';
} elseif ( $login === "false" ) {
	echo '<p class="login-msg"><strong>ERROR:</strong> You are logged out.</p>';
}

Y a continuación se muestra cómo se ve el mensaje de error.

Conclusión

Hay varias cosas que podríamos hacer para mejorar nuestra página de inicio de sesión, como agregar Enlace de contraseña perdida, Enlace de registroy un mensaje de error personalizado. Pero, en este punto, ahora funciona lo suficientemente bien como para que nuestros usuarios inicien sesión y cierren sesión, y también podría ser un buen comienzo para crear una página de inicio de sesión más avanzada.

Esperamos que encuentre útil este tutorial.