() translation by (you can also view the original English article)
Gracias a su casi infinita personalización a través de plugins y temas, WordPress ha recorrido un largo camino desde sus orígenes como una plataforma de blogs, actuando hoy en día como la columna vertebral de todo tipo de aplicaciones basadas en la web, desde tiendas online hasta sitios basados en las suscripciones y plataformas de creación de libros electrónicos.
Aunque tradicionalmente sólo los administradores del sitio iniciaban sesión en el escritorio de WordPress, muchos de estos nuevos usos similares a aplicaciones han cambiado esto: cuando los usuarios necesitan ser autenticados, el inicio de sesión de WordPress se extiende a los visitantes y clientes.
WordPress proporciona buenas herramientas para administrar roles y capacidades de usuario, y pueden ampliarse aún más con la ayuda de plugins, pero para un toque profesional, eso no es suficiente, también necesitas asegurarte de que la experiencia del usuario se ajuste a la de tu producto en su conjunto. Después de todo, visualizar la pantalla predeterminada de inicio de sesión de WordPress, o esta misma con un estilo ligeramente modificado, al iniciar sesión en una aplicación basada en web puede dar una impresión inacabada.
En esta serie de tutoriales de tres partes, te mostraré cómo solucionar esto personalizando la funcionalidad de inicio de sesión y el registro de nuevos usuarios para que se adapte a la apariencia de tu sitio, sin violar las mejores prácticas de WordPress.
Lo que aprenderás en este tutorial
Por defecto, WordPress utiliza una pantalla de inicio de sesión con buen aspecto, que aunque muy genérica, nos es muy familiar a todos:
La pantalla cumple perfectamente su función, y no tiene mal aspecto en absoluto. Pero al crear un sitio web serio, no usas el tema predeterminado de WordPress, así que ¿por qué mantener el inicio de sesión predeterminado?
Es posible hacer aplicar un poco de estilo usando CSS y una serie de acciones y filtros proporcionados por la propia página de inicio de sesión. Pero si bien estos cambios pueden conducir a resultados decentes, creo que el enfoque todavía tiene sus deficiencias, y lo más importante, es el hecho de que la página de inicio de sesión es totalmente independiente del resto de tu sitio.
Es por eso que, hoy no vamos a resolverlo con los cambios simples y cosméticos, sino que construiremos una página de inicio de sesión propia. Uno que se sienta como parte del sitio web basado en WordPress en lugar de como algo añadido sobre él.
Para hacer esto, en este tutorial, vamos a construir un plugin de WordPress que reemplace la página de inicio de sesión con una combinación de una página de WordPress personalizada y un shortcode utilizado para representar el formulario de inicio de sesión. Mientras lo hagas, aprenderás sobre el flujo del inicio de sesión de WordPress, los puntos en los que podemos enganchar a él y modificarlo en base a nuestras necesidades, así como el desarrollo de plugins de WordPress.
A continuación, en los dos siguientes tutoriales de la serie, continuaremos desde ahí, personalizando la nueva funcionalidad de registro de usuario y el restablecimiento de contraseña de la misma manera.
Puedes seguir el tutorial implementando tu propio plugin sobre la marcha, o puedes descargar el código de ejemplo completo desde el repositorio de GitHub enlazado.
¡Empecemos!
Crear el plugin
Mientras que parte de la personalización depende claramente del tema utilizado, la funcionalidad de hacer que la página de inicio de sesión sea personalizable en sí es muy independiente de los temas y, por lo tanto, es mejor implementarla en forma de plugin.
Por lo tanto, lo primero que haremos al comenzar consiste en crear un plugin que contenga todas las personalizaciones que vamos a construir en este tutorial.
Primero, crea un directorio para contener el plugin, y denomínalo personalize-login. A continuación, dentro de ese directorio, crea otro y nómbralo templates. En este directorio, añadiremos las plantillas utilizadas para representar los diferentes formularios HTML que crearemos en esta serie (volveremos a esto más adelante en el tutorial).
Después, con los directorios ya creados, coloca un archivo PHP llamado personalize-login.php en el directorio del plugin. Este archivo contendrá todo el código para este plugin, comenzando con la inicialización del plugin:
1 |
<?php
|
2 |
/**
|
3 |
* Plugin Name: Personalize Login
|
4 |
* Description: A plugin that replaces the WordPress login flow with a custom page.
|
5 |
* Version: 1.0.0
|
6 |
* Author: Jarkko Laine
|
7 |
* License: GPL-2.0+
|
8 |
* Text Domain: personalize-login
|
9 |
*/
|
10 |
|
11 |
class Personalize_Login_Plugin { |
12 |
|
13 |
/**
|
14 |
* Initializes the plugin.
|
15 |
*
|
16 |
* To keep the initialization fast, only add filter and action
|
17 |
* hooks in the constructor.
|
18 |
*/
|
19 |
public function __construct() { |
20 |
|
21 |
}
|
22 |
|
23 |
}
|
24 |
|
25 |
// Initialize the plugin
|
26 |
$personalize_login_pages_plugin = new Personalize_Login_Plugin(); |
El constructor del plugin sigue vacío, pero no por mucho tiempo: pronto empezaremos a añadirle contenido, en forma de ganchos de filtro y acción.
Pero primero, vamos a crear algunas páginas de WordPress.
Crear las páginas personalizadas para iniciar sesión
Por defecto, cuando intentas acceder al administrador de WordPress, o haces clic en un enlace Iniciar sesión de tu sitio de WordPress (suponiendo que tu tema muestra uno), WordPress le envía a wp-login.php, la versión predeterminada de la página de inicio de sesión de WordPress. Ahora, cambiaremos esto y enviaremos al usuario a una página de WordPress personalizada.
Para ello, primero necesitamos crear una página.
En un punto posterior, podría tener sentido añadir una pantalla de configuración para seleccionar las páginas que se usarán para cada uno de los distintos pasos del flujo de administración de usuarios. Por ahora, sin embargo, quiero mantener tu atención en la personalización y no confundirte con la creación de páginas de configuración, por lo que vamos a ir con la opción sencilla y simplemente crearemos las páginas automáticamente cuando se active el plugin.
En un plugin de WordPress, la forma de hacerlo consiste en registrar una función estática en un gancho de activación de plugin para que este sea invocado cuando el plugin se active a través del menú Plugins.
Ten en cuenta que el gancho de activación no es invocado cuando un plugin es actualizado a través de las actualizaciones del plugin. Por lo tanto, si realizas cambios en el código dentro del gancho de activación y deseas que sean efectivos, asegúrate de desactivar y activar el plugin manualmente.
Para registrar el gancho de activación, añade el siguiente fragmento de código al final del archivo de tu plugin:
1 |
// Create the custom pages at plugin activation
|
2 |
register_activation_hook( __FILE__, array( 'Personalize_Login_Plugin', 'plugin_activated' ) ); |
A continuación, dentro de la clase del plugin, añade la función estática plugin_activated:
1 |
/**
|
2 |
* Plugin activation hook.
|
3 |
*
|
4 |
* Creates all WordPress pages needed by the plugin.
|
5 |
*/
|
6 |
public static function plugin_activated() { |
7 |
// Information needed for creating the plugin's pages
|
8 |
$page_definitions = array( |
9 |
'member-login' => array( |
10 |
'title' => __( 'Sign In', 'personalize-login' ), |
11 |
'content' => '[custom-login-form]' |
12 |
),
|
13 |
'member-account' => array( |
14 |
'title' => __( 'Your Account', 'personalize-login' ), |
15 |
'content' => '[account-info]' |
16 |
),
|
17 |
);
|
18 |
|
19 |
foreach ( $page_definitions as $slug => $page ) { |
20 |
// Check that the page doesn't exist already
|
21 |
$query = new WP_Query( 'pagename=' . $slug ); |
22 |
if ( ! $query->have_posts() ) { |
23 |
// Add the page using the data from the array above
|
24 |
wp_insert_post( |
25 |
array( |
26 |
'post_content' => $page['content'], |
27 |
'post_name' => $slug, |
28 |
'post_title' => $page['title'], |
29 |
'post_status' => 'publish', |
30 |
'post_type' => 'page', |
31 |
'ping_status' => 'closed', |
32 |
'comment_status' => 'closed', |
33 |
)
|
34 |
);
|
35 |
}
|
36 |
}
|
37 |
}
|
La función de activación del plugin crea un conjunto de páginas utilizando los datos de la matriz $page_definitions definida en las líneas 8-17. Con esta matriz, podemos añadir fácilmente más páginas (como haremos en las siguientes partes de la serie) sin copiar y pegar el código de creación de páginas. Todo lo que tendremos que hacer es añadir un nuevo elemento a la matriz, usando el slug de la página (permalink) como la clave y una matriz que contiene el título de la página y el contenido inicial como valor.
En el fragmento de código anterior, añadé dos páginas: una para la página de inicio de sesión (member-login) y otra para una página de cuenta donde dirigiremos a los usuarios que no son administradores (member-account).
En las líneas 19-36, descubrirás el código de creación de página en sí. La función recorre la matriz de definiciones de página comprobando si ya existe una página con el slug dado y si no la hay, la crea.
La creación de las páginas se realiza utilizando la función de WordPress wp_insert_post. Para obtener más información sobre sus parámetros, puedes comprobar el Codex de WordPress.
Ahora, activemos el plugin y veamos que las páginas se crean de la manera que deberían. Dirígete al escritorio de tu WordPress y activa el plugin. A continuación, cuando accedas al menú Páginas, deberías ver ya ambas nuevas páginas nuevas en su sitio:
Si haces clic para ver la página Iniciar sesión, encontrarás una página casi en blanco que no contiene nada más que un título y nuestro shortcode.
Pero no seguirá en blanco por mucho tiempo.
Añadir contenido a la página de inicio de sesión
Con las dos primeras páginas en su sitio, podemos empezar a añadirles contenido.
En este primer tutorial, crearemos la página Iniciar sesión (o Regístrate (consulta este artículo sobre las prácticas recomendadas de inicio de sesión para echar un vistazo a una explicación sobre qué palabras usar). A continuación, en los próximos dos tutoriales, continuaremos desde allí, creando las páginas "Registrate" y "Olvidaste tu contraseña".
Tener tu propia página para la pantalla de inicio de sesión te da muchas opciones para personalizar su aspecto y contenido. En el lado más fácil, puedes utilizar el editor de páginas de WordPress para añadir texto y gráficos (por ejemplo, instrucciones para el usuario, o tal vez un anuncio sobre los beneficios de registrar una cuenta). En el otro extremo, incluso podrías crear tu propia plantilla de página y escribir el HTML para la página desde cero.
En este tutorial, haremos algo intermedio y crearemos un shortcode que mostrará un formulario de inicio de sesión en la página. Si más adelante decides crear tu propia plantilla de página, siempre podrás llamar a este shortcode desde el código de tu tema.
Paso 1: Crear el shortcode
Como recordarás, en el paso de creación de la página, ya hemos añadido un shortcode (custom-login-form) en el cuerpo de la página de inicio de sesión cuando lo creamos en el gancho de activación del plugin. Sin embargo, como aún no hemos creado un controlador para ese shortcode, WordPress ahora lo representa como texto normal.
Vamos a crear ahora el controlador. En el constructor de clase del plugin, añade la siguiente definición de shortcode:
1 |
add_shortcode( 'custom-login-form', array( $this, 'render_login_form' ) ); |
Esta línea registra una función dentro de la clase del plugin, render_login_form, para representar el shortcode custom-login-form.
Para que esto funcione, añade la función:
1 |
/**
|
2 |
* A shortcode for rendering the login form.
|
3 |
*
|
4 |
* @param array $attributes Shortcode attributes.
|
5 |
* @param string $content The text content for shortcode. Not used.
|
6 |
*
|
7 |
* @return string The shortcode output
|
8 |
*/
|
9 |
public function render_login_form( $attributes, $content = null ) { |
10 |
// Parse shortcode attributes
|
11 |
$default_attributes = array( 'show_title' => false ); |
12 |
$attributes = shortcode_atts( $default_attributes, $attributes ); |
13 |
$show_title = $attributes['show_title']; |
14 |
|
15 |
if ( is_user_logged_in() ) { |
16 |
return __( 'You are already signed in.', 'personalize-login' ); |
17 |
}
|
18 |
|
19 |
// Pass the redirect parameter to the WordPress login functionality: by default,
|
20 |
// don't specify a redirect, but if a valid redirect URL has been passed as
|
21 |
// request parameter, use it.
|
22 |
$attributes['redirect'] = ''; |
23 |
if ( isset( $_REQUEST['redirect_to'] ) ) { |
24 |
$attributes['redirect'] = wp_validate_redirect( $_REQUEST['redirect_to'], $attributes['redirect'] ); |
25 |
}
|
26 |
|
27 |
// Render the login form using an external template
|
28 |
return $this->get_template_html( 'login_form', $attributes ); |
29 |
}
|
En primer lugar, en las líneas 10-13, la función lee en los parámetros del shortcode, actualmente solo hay uno, show_title, que toman un valor booleano. Si se omite el parámetro, de forma predeterminada, se establece en false.
A continuación, la función del shortcode comprueba si el usuario ha iniciado sesión, representando el formulario sólo para los usuarios que aún no hayan iniciado sesión.
En las líneas 19-25, la función comprueba si se pasó una variable de solicitud redirect_to a la página de inicio de sesión. Este parámetro es lo que te lleva a la página de administración correcta de WordPress después de iniciar sesión, por lo que es importante no olvidarla mientras personalizamos el flujo de inicio de sesión. Si no se establece ningún redirect_to o la dirección URL no es válida, la función utiliza en su lugar el enlace permalink de la página actual.
Para mantener la presentación separada de la funcionalidad, la representación se realiza mediante una plantilla colocada en el directorio de plantillas que creó al principio de este tutorial.
Como ya sabemos, añadiremos más plantillas más adelante en esta serie (por ejemplo, el nuevo formulario de registro de usuario), nos prepararemos para esto y separaremos la representación de plantillas en su propia función para evitar la duplicación de código (líneas 27-28). Las variables necesarias para representar la plantilla se pasan como una matriz asociativa, $attributes.
Añade la función, get_template_html, a la clase del plugin:
1 |
/**
|
2 |
* Renders the contents of the given template to a string and returns it.
|
3 |
*
|
4 |
* @param string $template_name The name of the template to render (without .php)
|
5 |
* @param array $attributes The PHP variables for the template
|
6 |
*
|
7 |
* @return string The contents of the template.
|
8 |
*/
|
9 |
private function get_template_html( $template_name, $attributes = null ) { |
10 |
if ( ! $attributes ) { |
11 |
$attributes = array(); |
12 |
}
|
13 |
|
14 |
ob_start(); |
15 |
|
16 |
do_action( 'personalize_login_before_' . $template_name ); |
17 |
|
18 |
require( 'templates/' . $template_name . '.php'); |
19 |
|
20 |
do_action( 'personalize_login_after_' . $template_name ); |
21 |
|
22 |
$html = ob_get_contents(); |
23 |
ob_end_clean(); |
24 |
|
25 |
return $html; |
26 |
}
|
La función busca en el directorio de plantillas la plantilla dada y la representa en una cadena mediante un búfer de salida (líneas 14-23). El búfer de salida recopila todo lo que se imprime entre ob_start y ob_end_clean para que, a continuación, se pueda recuperar como una cadena mediante ob_get_contents.
Al final de la función, se devuelve la salida del shortcode para la representación en la página (como se vio en el fragmento anterior, la función del shortcode después la devuelve a WordPress para la representación).
Las llamadas de función do_action que rodean el require son opcionales, pero muestran una manera práctica de dar a otros desarrolladores la oportunidad de añadir más personalizaciones antes y después de que se represente la plantilla.
Para completar el shortcode, todavía necesitas crear la plantilla HTML: Crea un archivo PHP en tu directorio templates, y denomínalo login_form.php. Dentro de la plantilla, para probar, añade simplemente el texto Sign In. Ahora, cuando navegues a tu página de inicio de sesión personalizada, verás algo como esto (usando el tema predeterminado actual de WordPress, Twenty Fifteen):
Tu shortcode está funcionando, pero todavía le falta el formulario de inicio de sesión. Vamos a añadirlo ahora.
Paso 2: Añadir contenido a la plantilla HTML
Continuando con el trabajo en login_form.php, elimina el texto del marcador de posición y reemplázalo con el siguiente contenido que mostrará un formulario de inicio de sesión de WordPress completamente funcional:
1 |
<div class="login-form-container"> |
2 |
<?php if ( $attributes['show_title'] ) : ?> |
3 |
<h2><?php _e( 'Sign In', 'personalize-login' ); ?></h2> |
4 |
<?php endif; ?> |
5 |
|
6 |
<?php
|
7 |
wp_login_form( |
8 |
array( |
9 |
'label_username' => __( 'Email', 'personalize-login' ), |
10 |
'label_log_in' => __( 'Sign In', 'personalize-login' ), |
11 |
'redirect' => $attributes['redirect'], |
12 |
)
|
13 |
);
|
14 |
?>
|
15 |
|
16 |
<a class="forgot-password" href="<?php echo wp_lostpassword_url(); ?>"> |
17 |
<?php _e( 'Forgot your password?', 'personalize-login' ); ?> |
18 |
</a>
|
19 |
</div>
|
En primer lugar, la plantilla comienza con un título opcional, controlado por el parámetro del shortcode, show_title como se explicó anteriormente.
Después, en las líneas 6-14, notarás que la mayor parte de la representación del formulario de inicio de sesión todavía se realiza mediante WordPress, usando la función wp_login_form. La función toma una matriz de parámetros opcional que puede utilizarse para personalizar el contenido del formulario de inicio de sesión.
Estas son las personalizaciones que he realizado en nuestro código de ejemplo:
- En primer lugar, quería usar el texto "Regístrate" en lugar del valor predeterminado "Iniciar sesión".
- En segundo lugar, quería usar direcciones de correo electrónico como nombres de usuario, así que cambié la etiqueta para el nombre de usuario a "Email".
- En tercer lugar, está la url de redirección que se reenvió a través de la anterior función de controlador del shortcode.
Para más personalizaciones, aquí tienes la lista completa de parámetros que puedes usar en la matriz de parámetros pasada a wp_login_form:
| Parámetro | Descripción | Valor predeterminado |
|---|---|---|
echo | Si se debe mostrar el formulario de inicio de sesión. Si false, la salida se devuelve como una cadena. | true |
redirect | La dirección URL a la que se redirigirá después de iniciar sesión correctamente. | Redirige de nuevo a la página actual. |
form_id | El identificador HTML del formulario de inicio de sesión. | loginform |
label_username | La etiqueta de texto para el campo de nombre de usuario. | __( 'Username' ) |
label_password | La etiqueta de texto para el campo de contraseña. | __( 'Password' ) |
label_remember | La etiqueta de texto de la casilla de verificación "Recuérdame". | __( 'Remember Me' ) |
label_log_in | La etiqueta de texto para el botón "Iniciar sesión". | __( 'Log In' ) |
id_username | El identificador HTML para el campo de nombre de usuario. | user_login |
id_password | El identificador HTML para el campo de contraseña. | user_pass |
id_remember | El identificador HTML de la casilla de verificación "Recuérdame". | rememberme |
id_submit | El identificador HTML del botón Enviar. | wp-submit |
remember | Si la casilla de verificación "Recuérdame" debe mostrarse o no. | true |
value_username | Valor predeterminado para el nombre de usuario. | Vacío |
value_remember | Si la casilla de verificación "Recuérdame" debe estar marcada inicialmente o no. | false |
Finalmente, en las líneas 16-18, hay un enlace a la funcionalidad de contraseña perdida de WordPress, que reemplazaremos con nuestra propia versión en la Parte 3 de esta serie de tutoriales.
Ahora, la página de inicio de sesión tiene este aspecto:
Para la mayoría de los usos, esta personalización será suficiente, pero si deseas ir más allá, no hay nada que te impida crear el formulario de inicio de sesión desde cero.
En este caso, puedes crear un formulario HTML y publicar su contenido en wp-login.php, la URL de inicio de sesión completa para tu sitio actual es devuelta por la función de WordPress wp_login_url. El formulario debe tener los campos log y pwd para el inicio de sesión y la contraseña respectivamente.
Así es como crearías un formulario de inicio de sesión que se vea (y funcione) igual que el anterior, sin usar wp_login_form:
1 |
<div class="login-form-container"> |
2 |
<form method="post" action="<?php echo wp_login_url(); ?>"> |
3 |
<p class="login-username"> |
4 |
<label for="user_login"><?php _e( 'Email', 'personalize-login' ); ?></label> |
5 |
<input type="text" name="log" id="user_login"> |
6 |
</p>
|
7 |
<p class="login-password"> |
8 |
<label for="user_pass"><?php _e( 'Password', 'personalize-login' ); ?></label> |
9 |
<input type="password" name="pwd" id="user_pass"> |
10 |
</p>
|
11 |
<p class="login-submit"> |
12 |
<input type="submit" value="<?php _e( 'Sign In', 'personalize-login' ); ?>"> |
13 |
</p>
|
14 |
</form>
|
15 |
</div>
|
WordPress gestiona la funcionalidad de inicio de sesión, por lo que el formulario de inicio de sesión ya es completamente funcional: Introduce tus nombre de usuario y contraseña válidos y pulsa Iniciar sesión y se cerrará sesión perfectamente.
Si ingresas datos no válidos notarás que no está listo todo preparado todavía: en lugar de ser redirigido de nuevo a la página de inicio de sesión que acabamos de crear, verás la página de inicio de sesión estándar de WordPress. Además, a menos que el usuario dirija directamente su navegador a esta página de inicio de sesión recién creada, todavía verá el inicio de sesión predeterminado de WordPress.
Necesitamos tomar la nueva página de inicio de sesión para usarla redireccionando a los usuarios a ella.
Redirigir la página de inicio de sesión del visitante
Comencemos dirigiendo al usuario a la página de inicio de sesión en primer lugar.
Paso 1: Redirige al usuario a nuestra página de inicio de sesión
Cuando un usuario intenta acceder a cualquier página dentro del administrador de WordPress, o hace clic en un enlace Iniciar sesión en el widget Meta, se envía a wp-login.php. A continuación, queremos cambiar esta funcionalidad y apuntar al usuario en su lugar a nuestra propia página member-login.
Toda la funcionalidad de WordPress que estamos personalizando en esta serie desde el inicio de sesión hasta el restablecimiento de contraseña es manejada en wp-login.php con las diferentes partes de la funcionalidad identificada con un parámetro llamado action.
Si miras el código dentro del archivo PHP, observarás que justo antes de que comience la funcionalidad real de inicio de sesión, se activan dos acciones: login_init y login_form_{action}, donde {action} es el nombre de una acción que está siendo ejecutada (por ejemplo, login, postpass o logout).
El segundo es más específico, por lo que al usarlo, no tendremos que hacer tantas comprobaciones por nosotros mismos: simplemente enganchando una función a login_form_login, podemos dirigir nuestra funcionalidad de redirección precisamente al momento en que un usuario entre en la página de inicio de sesión.
Añade la siguiente acción al constructor de la clase de plugin:
1 |
add_action( 'login_form_login', array( $this, 'redirect_to_custom_login' ) ); |
A continuación, añade la función de acción:
1 |
/**
|
2 |
* Redirect the user to the custom login page instead of wp-login.php.
|
3 |
*/
|
4 |
function redirect_to_custom_login() { |
5 |
if ( $_SERVER['REQUEST_METHOD'] == 'GET' ) { |
6 |
$redirect_to = isset( $_REQUEST['redirect_to'] ) ? $_REQUEST['redirect_to'] : null; |
7 |
|
8 |
if ( is_user_logged_in() ) { |
9 |
$this->redirect_logged_in_user( $redirect_to ); |
10 |
exit; |
11 |
}
|
12 |
|
13 |
// The rest are redirected to the login page
|
14 |
$login_url = home_url( 'member-login' ); |
15 |
if ( ! empty( $redirect_to ) ) { |
16 |
$login_url = add_query_arg( 'redirect_to', $redirect_to, $login_url ); |
17 |
}
|
18 |
|
19 |
wp_redirect( $login_url ); |
20 |
exit; |
21 |
}
|
22 |
}
|
La función redirect_to_custom_login es invocada en dos situaciones: en primer lugar, cuando el usuario entra en la página de inicio de sesión y, en segundo lugar, cuando envía el formulario de inicio de sesión. Para diferenciar entre los dos, analizamos el método de solicitud: el formulario se envía mediante POST mientras que la página se carga mediante GET.
Por lo tanto, para permitir que wp-login.php maneje el inicio de sesión real y la autenticación, en la línea 5, nos aseguramos de que la redirección sólo se realiza en solicitudes GET.
En la línea 6, si se pasa una variable de solicitud redirect_to, la almacenaremos en una variable temporal $redirect_to.
Los usuarios que ya han iniciado sesión no necesitan pasar por el formulario de inicio de sesión, por lo que los redirigiremos al escritorio de WordPress o a la página de cuenta de miembro creada anteriormente (líneas 8-11). Para prepararnos para redirecciones similares durante el resto de esta serie de tutoriales, separaremos la redirección a su propia función, redirect_logged_in_user, que añadiremos pronto.
Una cosa que vale la pena señalar es que estamos confiando en los slugs de la página (pretty permalinks) al especificar las páginas a las que redireccionamos al usuario. Si deseas mejorar este ejemplo y hacer que el plugin sea más flexible, puedes buscar las páginas usando el slug y luego crear enlaces permanentes usando esos datos. Por ahora, simplemente activa los pretty permalinks (cualquier opción excepto el valor predeterminado es válida) en la página de configuración de los Permalinks y todo funcionará perfectamente.
En las líneas 15-17, añadimos el parámetro redirect_to a la nueva solicitud si uno está presente para que no se pierda ninguna información en esta redirección.
En la línea 20, notarás que finalizamos la ejecución de forma bastante abrupta utilizando un comando exit. Esto es importante porque de lo contrario, la ejecución continuará con el resto de la acción en wp-login.php, causando tal vez problemas con nuestra personalización. Vigila esto también en otras redirecciones que hagamos en el resto del tutorial.
Ahora, añade la función, redirect_logged_in_user mencionada anteriormente:
1 |
/**
|
2 |
* Redirects the user to the correct page depending on whether he / she
|
3 |
* is an admin or not.
|
4 |
*
|
5 |
* @param string $redirect_to An optional redirect_to URL for admin users
|
6 |
*/
|
7 |
private function redirect_logged_in_user( $redirect_to = null ) { |
8 |
$user = wp_get_current_user(); |
9 |
if ( user_can( $user, 'manage_options' ) ) { |
10 |
if ( $redirect_to ) { |
11 |
wp_safe_redirect( $redirect_to ); |
12 |
} else { |
13 |
wp_redirect( admin_url() ); |
14 |
}
|
15 |
} else { |
16 |
wp_redirect( home_url( 'member-account' ) ); |
17 |
}
|
18 |
}
|
La función redirige al usuario a una URL diferente en función de su nivel de acceso. Para los usuarios con rol de administrador, también comprobamos el parámetro $redirect_to: si se establece uno, el usuario es dirigido a esta dirección URL en lugar de a la admin_url predeterminada.
Paso 2: Redirección cuando hay errores
Ahora hemos cubierto la primera redirección y así, cada vez que el usuario haga clic por primera vez en un enlace a wp-login.php o intente acceder al panel de administración, él o ella será enviado a nuestra nueva página de inicio de sesión. Pero aún no hemos terminado: cuando se den errores en el inicio de sesión (nombre de usuario o contraseña no válidos, formulario vacío, etc.) el usuario seguirá vendo la página de inicio de sesión predeterminada.
En WordPress, la autenticación de usuario ocurre a través de una función llamada wp_authenticate, ubicada en pluggable.php, por si quieres echarle un vistazo.
La función realiza una desinfección básica de los parámetros y, a continuación, llama a los filtros asociados al gancho de filtro authenticate. Esto sirve para permitir que los plugins reemplacen el flujo de autenticación con su propia funcionalidad, pero lo más importante para nosotros es que, incluso la autenticación predeterminada de WordPress se realiza a través de este filtro.
En este punto, no estamos interesados en reemplazar la autenticación, pero el gancho de filtro sigue siendo útil, ya que nos da la oportunidad de recoger los errores de otros filtros y proceder en consecuencia:
- Engancha una nueva función al filtro
authenticateutilizando una prioridad lo suficientemente alta (en los filtros y acciones de WordPress, un número más alto en el parámetro de prioridad significa que la función será invocada antes en el orden de procesamiento del filtro). - La función de filtro recibirá los resultados de los anteriores filtros en la cadena de filtros como parámetro. Utiliza estos datos para comprobar tuvo lugar algún error en el inicio de sesión.
- Si no se encuentran errores, deja que todo proceda normalmente para que WordPress pueda finalizar el inicio de sesión.
- Si hay errores, en lugar de dejar que WordPress haga su control regular de errores, redirige a nuestra página de inicio de sesión personalizada.
En la versión actual de WordPress (4.2 en el momento en que escribimos esto), WordPress tiene los siguientes dos filtros enganchados para autenticar (authenticate):
1 |
add_filter( 'authenticate', 'wp_authenticate_username_password', 20, 3 ); |
2 |
add_filter( 'authenticate', 'wp_authenticate_spam_check', 99 ); |
La autenticación básica tiene prioridad 20 y la prioridad para wp_authenticate_spam_check es 99, así que si establecemos la nuestra en más de 99 (yo elegí 101), se ejecutará después de ambos. Por supuesto, es posible que otro plugin que utilices añada un filtro con una prioridad más alta, en cuyo caso tendrás que aumentar la cifra para tener en cuenta los errores de ese plugin.
En primer lugar, añade la nueva definición de filtro en el constructor de la clase de nuestro plugin:
1 |
add_filter( 'authenticate', array( $this, 'maybe_redirect_at_authenticate' ), 101, 3 ); |
A continuación, añade la función, maybe_redirect_at_authenticate, al final de la clase de plugin:
1 |
/**
|
2 |
* Redirect the user after authentication if there were any errors.
|
3 |
*
|
4 |
* @param Wp_User|Wp_Error $user The signed in user, or the errors that have occurred during login.
|
5 |
* @param string $username The user name used to log in.
|
6 |
* @param string $password The password used to log in.
|
7 |
*
|
8 |
* @return Wp_User|Wp_Error The logged in user, or error information if there were errors.
|
9 |
*/
|
10 |
function maybe_redirect_at_authenticate( $user, $username, $password ) { |
11 |
// Check if the earlier authenticate filter (most likely,
|
12 |
// the default WordPress authentication) functions have found errors
|
13 |
if ( $_SERVER['REQUEST_METHOD'] === 'POST' ) { |
14 |
if ( is_wp_error( $user ) ) { |
15 |
$error_codes = join( ',', $user->get_error_codes() ); |
16 |
|
17 |
$login_url = home_url( 'member-login' ); |
18 |
$login_url = add_query_arg( 'login', $error_codes, $login_url ); |
19 |
|
20 |
wp_redirect( $login_url ); |
21 |
exit; |
22 |
}
|
23 |
}
|
24 |
|
25 |
return $user; |
26 |
}
|
Las funciones de filtro authenticate toman tres parámetros:
-
$useres el objeto de usuario del usuario que ha iniciado sesión, o una instancia de la claseWp_Erroren el caso de que hayan habido errores en la cadena de filtros hasta el momento. -
$usernamees el nombre de usuario introducido por el usuario que intenta iniciar sesión. -
$passwordes la contraseña introducida por el usuario.
Para nuestro uso, el parámetro que nos interesa es el primero: si $user es un error, significa que una de las anteriores funciones del filtro authenticate ha encontrado un error en el inicio de sesión. Es entonces cuando nuestra función salta (en la línea 13) para recopilar todos los códigos de error y anexarlos a la URL de redirección en las líneas 15-18. Por último, la función redirige al usuario a nuestra página de inicio de sesión personalizada para mostrarle los errores.
Paso 3: Procesar mensajes de error
El plugin está detectando ahora los errores y redirige también de nuevo al usuario a nuestra página de inicio de sesión personalizada cuando encuentra algunos. Para que la experiencia sea útil para el usuario, todavía necesitamos imprimir los mensajes de error.
En primer lugar, en nuestra función de shortcode, utilizaremos el parámetro login enviado por la redirección creada en el paso anterior para ver qué errores se han producido y para reemplazar los códigos de error con mensajes de error legibles. Este es un buen lugar para dar rienda suelta a tu imaginación y crear algunos mensajes de error divertidos y personales (aunque espero que no molestos).
Crea una función para convertir códigos de error en mensajes de error, utilizando un simple constructor switch...case. Los códigos de error son los utilizados por la funcionalidad de inicio de sesión de WordPress.
1 |
/**
|
2 |
* Finds and returns a matching error message for the given error code.
|
3 |
*
|
4 |
* @param string $error_code The error code to look up.
|
5 |
*
|
6 |
* @return string An error message.
|
7 |
*/
|
8 |
private function get_error_message( $error_code ) { |
9 |
switch ( $error_code ) { |
10 |
case 'empty_username': |
11 |
return __( 'You do have an email address, right?', 'personalize-login' ); |
12 |
|
13 |
case 'empty_password': |
14 |
return __( 'You need to enter a password to login.', 'personalize-login' ); |
15 |
|
16 |
case 'invalid_username': |
17 |
return __( |
18 |
"We don't have any users with that email address. Maybe you used a different one when signing up?", |
19 |
'personalize-login'
|
20 |
);
|
21 |
|
22 |
case 'incorrect_password': |
23 |
$err = __( |
24 |
"The password you entered wasn't quite right. <a href='%s'>Did you forget your password</a>?", |
25 |
'personalize-login'
|
26 |
);
|
27 |
return sprintf( $err, wp_lostpassword_url() ); |
28 |
|
29 |
default: |
30 |
break; |
31 |
}
|
32 |
|
33 |
return __( 'An unknown error occurred. Please try again later.', 'personalize-login' ); |
34 |
}
|
A continuación, para usar los mensajes de error, añade el siguiente código a render_login_form, justo antes de representar la plantilla de formulario de inicio de sesión. Pasará por el listado de códigos de error y recopilará mensajes de error coincidentes en una matriz, $errors:
1 |
// Error messages
|
2 |
$errors = array(); |
3 |
if ( isset( $_REQUEST['login'] ) ) { |
4 |
$error_codes = explode( ',', $_REQUEST['login'] ); |
5 |
|
6 |
foreach ( $error_codes as $code ) { |
7 |
$errors []= $this->get_error_message( $code ); |
8 |
}
|
9 |
}
|
10 |
$attributes['errors'] = $errors; |
La representación real de los mensajes de error se realiza en la plantilla login_form.php. Añade lo siguiente justo después del título del formulario de inicio de sesión y antes del formulario de inicio de sesión:
1 |
<!-- Show errors if there are any -->
|
2 |
<?php if ( count( $attributes['errors'] ) > 0 ) : ?> |
3 |
<?php foreach ( $attributes['errors'] as $error ) : ?> |
4 |
<p class="login-error"> |
5 |
<?php echo $error; ?> |
6 |
</p>
|
7 |
<?php endforeach; ?> |
8 |
<?php endif; ?> |
Ahora, los mensajes de error están en su sitio y podemos probarlos. Intenta iniciar sesión con información incorrecta y serás redirigido de nuevo a nuestra página personalizada con un mensaje de error personalizado propio:
Paso 4: Mostrar el mensaje correcto en el cierre de sesión
Ya casi terminamos, aunque no del todo. Todavía hay dos cosas más que hacer antes de que podamos afirmar que hemos terminado y que hemos reemplazado todo el flujo de inicio de sesión de WordPress con nuestra propia versión: renderizar el mensaje correcto cuando un usuario cierra la sesión, y redirigir al usuario a la página correcta después de un inicio de sesión exitoso.
Empecemos con el cierre de sesión.
Una vez que el usuario haya cerrado la sesión en tu sitio, en la función wp_logout, WordPress activa la acción wp_logout. Este es un buen lugar para enganchar y hacer nuestras propias redirecciones antes de que WordPress redirija al usuario de nuevo a wp-login.php.
En el constructor de clase del plugin, añade la siguiente línea:
1 |
add_action( 'wp_logout', array( $this, 'redirect_after_logout' ) ); |
A continuación, añade la función coincidente:
1 |
/**
|
2 |
* Redirect to custom login page after the user has been logged out.
|
3 |
*/
|
4 |
public function redirect_after_logout() { |
5 |
$redirect_url = home_url( 'member-login?logged_out=true' ); |
6 |
wp_safe_redirect( $redirect_url ); |
7 |
exit; |
8 |
}
|
La función redirige al usuario a nuestra página member-login con el parámetro logged_out anexa a la solicitud y, a continuación, detiene la ejecución.
A continuación, modifica la función shortcode del formulario de inicio de sesión para tener en cuenta este parámetro. Un buen lugar para este código es justo después de la gestión del mensajes de error que creamos anteriormente:
1 |
// Check if user just logged out
|
2 |
$attributes['logged_out'] = isset( $_REQUEST['logged_out'] ) && $_REQUEST['logged_out'] == true; |
Por último, necesitamos imprimir una notificación en la plantilla. Una vez más, añade esto justo después de imprimir posibles errores:
1 |
<!-- Show logged out message if user just logged out -->
|
2 |
<?php if ( $attributes['logged_out'] ) : ?> |
3 |
<p class="login-info"> |
4 |
<?php _e( 'You have signed out. Would you like to sign in again?', 'personalize-login' ); ?> |
5 |
</p>
|
6 |
<?php endif; ?> |
Eso es todo. Ahora, cuando inicies y cierres sesión, verás algo como esto:
Redirige al usuario a la página de la cuenta cuando haya iniciado sesión
Ahora hemos implementado el inicio de sesión personalizado y gestionado todos los casos de error. Como toque final, para que todo fluya bien, vamos a añadir una última redirección. Esto se asegurará de que el usuario siempre termine donde él o ella quiera (y se le permita) ir.
Para los administradores, será el panel de administración y para los usuarios estándar que no sean administradores, la página de cuenta member-account (actualmente vacía).
Como WordPress proporciona un filtro para devolver la URL de redirección después de un inicio de sesión exitoso, esto es bastante sencillo: todo lo que tenemos que hacer es crear una función que compruebe las capacidades del usuario actual y en consecuencia devuelva la URL de redirección correcta.
Para ello, añade un último filtro, de nuevo, en el constructor del plugin:
1 |
add_filter( 'login_redirect', array( $this, 'redirect_after_login' ), 10, 3 ); |
A continuación, añade la función de filtro coincidente:
1 |
/**
|
2 |
* Returns the URL to which the user should be redirected after the (successful) login.
|
3 |
*
|
4 |
* @param string $redirect_to The redirect destination URL.
|
5 |
* @param string $requested_redirect_to The requested redirect destination URL passed as a parameter.
|
6 |
* @param WP_User|WP_Error $user WP_User object if login was successful, WP_Error object otherwise.
|
7 |
*
|
8 |
* @return string Redirect URL
|
9 |
*/
|
10 |
public function redirect_after_login( $redirect_to, $requested_redirect_to, $user ) { |
11 |
$redirect_url = home_url(); |
12 |
|
13 |
if ( ! isset( $user->ID ) ) { |
14 |
return $redirect_url; |
15 |
}
|
16 |
|
17 |
if ( user_can( $user, 'manage_options' ) ) { |
18 |
// Use the redirect_to parameter if one is set, otherwise redirect to admin dashboard.
|
19 |
if ( $requested_redirect_to == '' ) { |
20 |
$redirect_url = admin_url(); |
21 |
} else { |
22 |
$redirect_url = $requested_redirect_to; |
23 |
}
|
24 |
} else { |
25 |
// Non-admin users always go to their account page after login
|
26 |
$redirect_url = home_url( 'member-account' ); |
27 |
}
|
28 |
|
29 |
return wp_validate_redirect( $redirect_url, home_url() ); |
30 |
}
|
En primer lugar, la función comprueba si el usuario ha iniciado sesión realmente (en la línea 13) y redirige de nuevo a la página principal del sitio si no se encuentra ningún usuario.
A continuación, selecciona la redirección correcta dependiendo de las capacidades del usuario actual:
- Los administradores (comprobados en la línea 17, utilizando la función user_can) son redirigidos al escritorio de administración de WordPress (línea 20) a menos que se haya pasado un parámetro
redirect_tocon la solicitud. - Los usuarios estándar siempre serán redirigidos a la página
member-accountpara evitar que accedan al escritorio de WordPress. Esto depende, por supuesto, de ti: si lo deseas, por ejemplo, puedes apuntar a tu página de usuario en el escritorio de WordPress.
Si lo deseas, también puedes añadir redirecciones más finas en función de los roles y capacidades de los usuarios.
¿Qué viene después?
Eso es todo. Ahora has creado un plugin para reemplazar la pantalla de inicio de sesión de WordPress con una página personalizada que puedes personalizar para que se ajuste a tu tema, o el producto que estés construyendo con WordPress.
En el siguiente tutorial de esta serie vamos a construir sobre esto y crearemos un nuevo flujo de registro de usuario, añadiendo algunos campos nuevos y un captcha para evitar que los bots se registren.
Hasta entonces, ¡diviértete ajustando tu página de inicio de sesión!
