Share
En el primer tutorial de esta serie sobre la personalización de la experiencia de inicio de sesión de WordPress, creamos un complemento que le permite reemplazar su pantalla de inicio de sesión de WordPress con una página personalizada. Hoy, iremos un paso más allá y reemplazaremos el nuevo flujo de registro de usuarios de la misma manera.
Las razones para personalizar la página de inicio de sesión que describimos en la Parte 1 (relacionar la página de registro con el tema de su sitio para ocultar WordPress y hacer que la experiencia del usuario sea transparente) se aplican también al registro de nuevo usuario, pero también hay algunos motivos más específicos por los que podría desea crear su propia página de registro:
Entonces, equipado con este conjunto de razones, comencemos.
En este tutorial, aprenderá cómo reemplazar la pantalla de registro de WordPress con una página personalizada e implementar el registro con su propio código, sin violar los principios de diseño de WordPress.
La funcionalidad se construirá sobre el complemento que incorporamos en la Parte 1 de la serie de tutoriales, por lo que si aún no lo ha leído, es una buena idea comenzar por ver ese tutorial. Puede escribir el código usted mismo mientras sigue el tutorial, o descargar el código de ejemplo del proyecto Github del tutorial.
La página de registro de nuevo usuario de WordPress por defecto en wp-login.php? action = register Se ve como esto:
No está mal, pero a menos que esté ejecutando WordPress.org, lo más probable es que no sea coherente con el diseño de su blog o sitio web..
Nota: Si no puede acceder a la página de registro en su sitio de WordPress, es porque, de forma predeterminada, WordPress no permite que los nuevos usuarios se registren. Para cambiar esto, vaya a la Configuración general página en el panel de administración y marque la casilla de verificación "Cualquiera puede registrarse". Luego guarde la configuración y regrese a la página de registro.
En la primera parte de la serie, creamos una página personalizada para mostrar el formulario de inicio de sesión y un código corto que se utilizó para colocar el formulario de inicio de sesión en esa página. Ahora, haremos lo mismo para el registro: primero, crearemos un shortcode para mostrar el formulario de registro, y luego una página en la que se colocará este shortcode.
También es posible colocar el código abreviado en una página diferente o tener los formularios de inicio de sesión y registro en una sola página.
Sobre la base del complemento creado en la Parte 1 de la serie, comencemos agregando un código corto para la página de registro.
Al final de la clase de plugin (Personalize_Login_Plugin) Constructor, agregue la siguiente definición de código abreviado:
Accentsconagua
add_shortcode ('custom-register-form', array ($ this, 'render_register_form'));Luego, cree la función responsable de representar el nuevo formulario de registro de usuario:
/ ** * Un shortcode para representar el nuevo formulario de registro de usuario. * * @param array $ attributes Atributos de Shortcode. * @param string $ content El contenido de texto para shortcode. No utilizado. * * @return string La salida de shortcode * / public function render_register_form ($ attributes, $ content = null) // Parse shortcode attributes $ default_attributes = array ('show_title' => false); $ attributes = shortcode_atts ($ default_attributes, $ attributes); if (is_user_logged_in ()) return __ ('Ya has iniciado sesión.', 'personalizar-login'); elseif (! get_option ('users_can_register')) return __ ('El registro de nuevos usuarios no está permitido actualmente.', 'personalizar-login'); else return $ this-> get_template_html ('register_form', $ attributes); Si ya ha leído la Parte 1 de la serie, notará muchas similitudes entre esta función y la función de representación del formulario de inicio de sesión de ese tutorial..
Primero, en líneas 10-12, te darás cuenta de que el shortcode toma un atributo mostrar título, Se utiliza para definir si un título debe representarse mediante el shortcode o no.
En segundo lugar, el formulario de registro no se muestra a los usuarios que ya han iniciado sesión (líneas 14-15). El mensaje devuelto en lugar del formulario es bastante simple, por lo que, dependiendo de sus necesidades, es posible que desee reemplazar este fragmento de código con algo más detallado, por ejemplo, un enlace al panel..
Un nuevo elemento es la comprobación de la opción de WordPress usuarios_can_registrar en línea 16. Esta opción está controlada por el WordPress Configuración general campo Cualquiera puede registrarse mencionado anteriormente. Para asegurarnos de que respetamos las configuraciones que el usuario define en WordPress, no debemos mostrar el formulario de registro si la configuración está establecida en falso. En cambio, como ves en línea 17, La función devolverá una notificación sobre el cierre del registro..
La representación real del formulario de registro se realiza en línea 19 usando una plantilla de PHP, register_form.php, ubicado en el plantillas Directorio que creamos en el tutorial anterior. Consulte la Parte 1 para obtener una explicación más detallada sobre cómo funciona esto, así como el código de la función utilizada, get_template_html.
Ahora, vamos a agregar la plantilla de formulario de registro.
En el plantillas directorio, agregar un nuevo archivo PHP y nombrarlo register_form.php. Luego, continúe agregando un formulario de registro con los campos que desea que complete su nuevo usuario.
Aquí está la versión que he creado para este tutorial; un formulario de registro bastante estándar con campos para el correo electrónico, el nombre y el apellido del usuario. El formulario no contiene un campo separado para un nombre de usuario, ya que la dirección de correo electrónico se duplicará como uno.
Al igual que el registro de nuevo usuario predeterminado de WordPress, nuestra versión generará la contraseña y la enviará por correo electrónico al nuevo usuario. Esto sirve como una simple comprobación de correo electrónico (el usuario no podrá iniciar sesión sin ingresar una dirección de correo electrónico válida) y aplica cierto nivel de seguridad de contraseña.
Por supuesto, este enfoque tiene su propio riesgo de seguridad en forma de correo electrónico de contraseñas, por lo que es una buena idea preguntar (o incluso requerir) al usuario que cambie la contraseña una vez que haya iniciado sesión.
En líneas 2-4, la plantilla muestra un título para el formulario si el mostrar título atributo está establecido.
Entonces, en linea 6, echar un vistazo a la acción parámetro: el formulario se envía a la URL de registro de WordPress predeterminada que podemos recuperar utilizando la función wp_registration_url. Hablaremos más sobre esto pronto, pero ya mencionaré que esto no significa que dejaremos que WordPress maneje el registro ...
El resto de la plantilla es un formulario HTML bastante estándar con campos para correo electrónico, nombre y apellido..
Antes de ver el código abreviado en acción, todavía debemos crear la página de registro y colocar el código abreviado en ella..
Para mostrar el formulario de registro, deberá agregar el siguiente código en una página de WordPress:
[formulario de registro personalizado]
Esto podría ser cualquier página, pero por ahora, vamos a crear una nueva página para el formulario de registro.
En la parte anterior, creamos una función., plugin_activated, para crear las páginas del complemento en la activación del complemento. Dentro de la función, agregamos una matriz para almacenar todas las páginas que el complemento debería crear.
Ahora, agreguemos la información sobre la nueva página a la matriz. Después de la adición, la definición de la matriz debería verse así, con la nueva página (con la barra registro de miembros) definido último:
// Información necesaria para crear las páginas del complemento $ page_definitions = array ('member-login' => array ('title' => __ ('Sign In', 'personalizar-login'), 'content' => '[custom -login-form] '),' member-account '=> array (' title '=> __ (' Your Account ',' personalizar-login '),' content '=>' [account-info] '), 'member-register' => array ('title' => __ ('Register', 'personalizar-login'), 'content' => '[custom-register-form]'),);El gancho de activación solo se ejecuta cuando un complemento está activado, así que adelante, desactive y luego active el complemento en el Complementos página. Ahora, cuando navegas a la URL http: //, Debería ver algo como esto (usando el tema predeterminado de WordPress actual, Veinte quince):
Antes de pasar a la ejecución de la acción de registro, asegurémonos de que el usuario siempre sea redirigido a esta nueva página de registro en lugar de a la nueva página de usuario predeterminada en wp-login.php? action = register.
Para ello, utilizaremos el gancho de acción. login_form_ action que, como recordará de la Parte 1, se dispara antes de cada acción en wp-login.php. Como se ve en el enlace anterior, la acción en este caso es registro, Y así, vamos a enganchar nuestra función a login_form_register.
En el constructor del complemento, agregue la siguiente línea:
add_action ('login_form_register', array ($ this, 'redirect_to_custom_register'));Luego, crea la función de devolución de llamada:
/ ** * Redirige al usuario a la página de registro personalizada * en lugar de wp-login.php? Action = register. * / función pública redirect_to_custom_register () if ('GET' == $ _SERVER ['REQUEST_METHOD']) if (is_user_logged_in ()) $ this-> redirect_logged_in_user (); else wp_redirect (home_url ('registro de miembros')); salida; A medida que enganchamos la función a la login_form_register acción, sabemos que el usuario está intentando acceder al formulario de registro de nuevo usuario o publicarlo.
Es por eso que lo primero que hacemos en esta función (en linea 6) Es para verificar el método de solicitud que se utilizó para acceder a la página: la redirección solo se realiza en OBTENER peticiones como el ENVIAR La solicitud se reservará para la ejecución de la acción de registro. Más sobre esto pronto.
Luego, la función continúa verificando si el usuario ya ha iniciado sesión (linea 7).
Los usuarios registrados se redirigen a la página de la cuenta (o al panel de administración, si son administradores) mediante la función redirect_logged_in_user que creamos en la Parte 1. Los visitantes son redirigidos a nuestra nueva página, registro de miembros.
Ahora, con la página y el formulario en su lugar, pasemos a lo que sucede cuando el usuario envía el formulario.
Cuando el usuario envía el nuevo formulario de registro de usuario, su contenido se publica en wp-login.php? action = register, la misma URL que usamos al redirigir al usuario a la página de registro de arriba.
Para realizar las personalizaciones que mencionamos anteriormente (lo más importante, al utilizar la dirección de correo electrónico como nombre de usuario) tendremos que reemplazar esta funcionalidad con nuestro propio código. Para hacer esto, primero crearemos una función para registrar un nuevo usuario programáticamente y luego llamaremos esta función en un controlador de acción..
Comencemos por crear una función que se pueda usar para registrar a un nuevo usuario utilizando los datos recopilados del formulario anterior: dirección de correo electrónico, nombre y apellido. La dirección de correo electrónico será el único identificador único, y el resto es algo agradable de tener.
En la clase de complemento, agregue la siguiente función privada:
/ ** * Valida y luego completa el proceso de registro de nuevo usuario si todo salió bien. * * @param string $ email La dirección de correo electrónico del nuevo usuario * @param string $ first_name El primer nombre del nuevo usuario * @param string $ last_name El último nombre del nuevo usuario * * @return int | WP_Error El id del usuario que se creó, o error si falla. * / private function register_user ($ email, $ first_name, $ last_name) $ errors = new WP_Error (); // La dirección de correo electrónico se utiliza como nombre de usuario y correo electrónico. También es el único // parámetro que necesitamos validar si ((! Is_email ($ email)) $ errors-> add ('email', $ this-> get_error_message ('email')); devuelve $ errores; if (nombre_de_usuario ($ email) || email_exists ($ correo electrónico)) $ errores-> agregar ('email_exists', $ this-> get_error_message ('email_exists')); devuelve $ errores; // Generar la contraseña para que el suscriptor tenga que revisar el correo electrónico ... $ password = wp_generate_password (12, false); $ user_data = array ('user_login' => $ email, 'user_email' => $ email, 'user_pass' => $ contraseña, 'first_name' => $ first_name, 'last_name' => $ last_name, 'nickname' => $ first_name,); $ user_id = wp_insert_user ($ user_data); wp_new_user_notification ($ user_id, $ password); devuelve $ user_id; Como mencioné anteriormente, la dirección de correo electrónico es el único identificador único, y también el único parámetro requerido. Es por eso que comenzamos la función validando su valor. Primero en línea 15, Validamos la dirección de correo electrónico y luego, en línea 20 Verificamos que la dirección de correo electrónico no esté en uso. Si cualquiera de las validaciones falla, un Wp_Error se devuelve el objeto. Volveremos a mostrar estos errores pronto..
Si todo va bien y no se encuentran errores, la función continúa generando una contraseña en línea 26.
En líneas 28-37, Encontrarás el núcleo de esta función, la creación del nuevo usuario. El usuario se agrega utilizando la función de WordPress. wp_insert_user. (linea 37). Como su único parámetro, la función toma una matriz asociativa con información sobre el usuario que se está creando. Como verás en lineas 28-35, usamos $ email tanto para el nombre de usuario (inicio de sesión de usuario) y correo electrónico (correo electrónico) campos. Para obtener una lista completa de los campos que se pueden incluir en la matriz de atributos, eche un vistazo al códice de WordPress.
Después de crear el usuario, en linea 38, la función llama wp_new_user_notification para enviar la contraseña generada al nuevo usuario y notificar al administrador del sitio del nuevo usuario.
Ahora que hemos escrito el código para registrar al usuario, podemos llamarlo cuando se envíe el formulario de registro.
Anteriormente, cuando agregamos la redirección a nuestra página de registro personalizada mediante la acción login_form_register, Mencioné que usaríamos la misma acción también para manejar el ENVIAR peticiones.
Como suele ser el caso en la programación, esta no es la única forma en que podemos manejar el registro de nuevos usuarios, pero tiene un beneficio bastante importante: de esta manera, nos aseguraremos de que nadie pueda acceder accidentalmente al código de registro predeterminado en WordPress.
Para mayor claridad, agreguemos una función separada y la vinculemos a la misma acción (técnicamente, no hay ninguna razón por la que no pueda agregar este código a la función de redireccionamiento que creamos anteriormente).
En el constructor de la clase de complemento, agregue una nueva definición de acción:
add_action ('login_form_register', array ($ this, 'do_register_user'));Luego, crea la función:
/ ** * Maneja el registro de un nuevo usuario. * * Se utiliza a través del enlace de acción "login_form_register" activado en wp-login.php * cuando se accede a través de la acción de registro. * / public function do_register_user () if ('POST' == $ _SERVER ['REQUEST_METHOD']) $ redirect_url = home_url ('member-register'); if (! get_option ('users_can_register')) // Registro cerrado, muestra el error $ redirect_url = add_query_arg ('register-errors', 'closed', $ redirect_url); else $ email = $ _POST ['email']; $ first_name = sanitize_text_field ($ _POST ['first_name']); $ last_name = sanitize_text_field ($ _POST ['last_name']); $ result = $ this-> register_user ($ email, $ first_name, $ last_name); if (is_wp_error ($ resultado)) // Analice los errores en una cadena y agregue como parámetro para redirigir $ errores = unirse (',', $ resultado-> get_error_codes ()); $ redirect_url = add_query_arg ('register-errors', $ errors, $ redirect_url); else // Success, redirect to login page. $ redirect_url = home_url ('member-login'); $ redirect_url = add_query_arg ('registered', $ email, $ redirect_url); wp_redirect ($ redirect_url); salida; La función comienza con una verificación del método de solicitud. linea 8: la función está vinculada a la acción de WordPress login_form_register, Lo mismo que usamos para redirigir al usuario, y el método de solicitud es lo que diferencia los dos usos entre sí..
En línea 11, Verificamos que el registro de nuevos usuarios está permitido. Si no, el usuario es redirigido de nuevo a la página de registro con un código de error (cerrado) como parámetro de consulta (errores de registro).
Por otro lado, si el registro está abierto, la función recopila los parámetros requeridos (líneas 15-17) A partir de los datos de solicitud y los utiliza para llamar a la función que creamos anteriormente (línea 19) para crear el nuevo usuario.
Después de la registro_usuario llamada, la función redirige al usuario al lugar correcto dependiendo de si el nuevo registro del usuario fue exitoso o no:
$ registrado lo que indica que se acaba de crear un nuevo usuario. Como vimos anteriormente, la función de registro redirige al usuario a la página de inicio de sesión si el registro fue exitoso y regresó a la página de registro si hubo errores, con el estado pasado como parámetro de solicitud.
Ahora, agreguemos algo de código para mostrar esos mensajes al usuario, comenzando con los mensajes de error en la nueva página de registro de usuarios..
En render_register_form, agregue el siguiente fragmento de código justo antes de representar la plantilla:
// Recuperar posibles errores de los parámetros de solicitud $ atributos ['errores'] = array (); if (isset ($ _REQUEST ['register-errors'])) $ error_codes = explode (',', $ _REQUEST ['register-errors']); foreach ($ error_codes como $ error_code) $ attributes ['errors'] [] = $ this-> get_error_message ($ error_code); Este fragmento primero comprueba si se pasaron errores en el parámetro de solicitud errores de registro (línea 2). En caso afirmativo, revisa todos ellos, busca los mensajes de error correspondientes utilizando el get_error_message Función que creamos en la Parte 1 de la serie de tutoriales..
Los mensajes de error se recogen en una matriz en el $ atributos matriz para imprimir en la plantilla.
Para poder mostrar los mensajes de error correctos, también deberemos agregar los nuevos mensajes de error a la función get_error_message. En la estructura del switch, agregue estos (o sus propios) mensajes de error:
// Error de registro en caso de 'correo electrónico': devolver __ ('La dirección de correo electrónico que ingresó no es válida.', 'Personalizar-login'); caso 'email_exists': return __ ('Existe una cuenta con esta dirección de correo electrónico.', 'personalizar-login'); caso 'cerrado': retorno __ ('Actualmente no se permite el registro de nuevos usuarios.', 'personalizar-login');Para mostrar los errores en la página de registro, agregue el siguiente código en el register_form.php Plantilla entre el título y la forma:
0):?>
A continuación, vamos a agregar el mensaje de éxito.
Cuando un nuevo usuario se ha registrado con éxito, el usuario se redirige a la página de inicio de sesión, con un parámetro, registrado = dirección de correo electrónico adjunto a la URL.
En la funcion render_login_form, agregue las siguientes dos líneas para verificar si el parámetro está presente:
// Compruebe si el usuario acaba de registrar $ atributos ['registrado'] = isset ($ _REQUEST ['registrado']);
Luego, en la plantilla. login_form.php, agregar un mensaje que se mostrará si el registrado bandera se establece:
% s. Hemos enviado su contraseña por correo electrónico a la dirección de correo electrónico que ingresó. ',' Personalizar-login '), get_bloginfo (' nombre ')); ?>
Eso es. Ahora ha creado un nuevo flujo de registro de usuario completo con validación de parámetros e informe de errores.
Adelante, crea una nueva cuenta de usuario para probar el flujo..
Si está probando el complemento en un servidor local, a menos que haya configurado la configuración del correo electrónico, es posible que no reciba el correo electrónico que contiene la contraseña, eso es normal.
Si bien el formulario de registro ahora está completo, seguiremos personalizándolo un poco más agregando un cheque reCAPTCHA (es la casilla de verificación "No soy un robot" que encontrará en muchos de los sitios más grandes en línea) para evitar el registro de spammers desde crear cuentas en tu sitio web.
Primero, visite el sitio reCAPTCHA. Haga clic en el "Obtener reCAPTCHA"en la esquina superior derecha para acceder a la página de administración de reCAPTCHA.
Si no ha iniciado sesión en su cuenta de Google, se le pedirá que inicie sesión. Si todavía no tiene una, deberá crear una para utilizar esta herramienta..
En la página de la cuenta reCAPTCHA, encontrará el siguiente formulario. Úselo para insertar información sobre su sitio web.
Una vez que haya enviado el formulario haciendo clic en Registro, Verá una página con instrucciones sobre cómo habilitar reCAPTCHA en su sitio, así como dos claves utilizadas para usar la API: Clave del sitio y Llave secreta.
Para almacenar las claves en nuestro complemento de WordPress, necesitaremos crear dos campos de configuración. Para mantener las cosas simples, las agregaremos a la Configuración general y no crear una página de configuración personalizada todavía.
Para agregar los campos de configuración, primero enganche una nueva acción. En el constructor del complemento, agregue la siguiente nueva línea:
add_filter ('admin_init', array ($ this, 'register_settings_fields'));Luego cree la función para definir los campos de configuración y las dos funciones de devolución de llamada para representar los campos de configuración:
/ ** * Registra los campos de configuración necesarios para el complemento. * / public function register_settings_fields () // Crear campos de configuración para las dos teclas utilizadas por reCAPTCHA register_setting ('general', 'personalizar-login-recaptcha-site-key'); register_setting ('general', 'personalizar-login-recaptcha-secret-key'); add_settings_field ('personalizar-login-recaptcha-site-key', '', array ($ this,' render_recaptcha_site_key_field '),' general '); add_settings_field ('personalizar-login-recaptcha-secret-key', '', array ($ this,' render_recaptcha_secret_key_field '),' general '); función pública render_recaptcha_site_key_field () $ value = get_option ('personalizar-login-recaptcha-site-key', "); echo ''; función pública render_recaptcha_secret_key_field () $ value = get_option ('personalizar-login-recaptcha-secret-key', "); echo ''; Como este tutorial no trata sobre la configuración de WordPress API, no veremos la declaración del campo de configuración. Si no está familiarizado con cómo funciona la adición de configuraciones en WordPress, consulte esta serie completa de tutoriales por Tom McFarlin.
Ahora, ve a la Configuración general página y copie las claves reCAPTCHA en los dos campos que acaba de crear y guarde la configuración.
Con los preparativos hechos, ahora podemos agregar el campo reCAPTCHA y usarlo para verificar que nuestros usuarios son humanos.
En render_registration_form, primero recupere la clave del sitio reCAPTCHA de la configuración de WordPress y guárdela en el $ atributos matriz para que esté disponible en la plantilla:
// Recuperar los atributos $ de la clave recaptcha ['recaptcha_site_key'] = get_option ('personalizar-login-recaptcha-site-key', null);Luego, utilizando el parámetro, agregue un marcador de posición para el campo reCAPTCHA en el formulario de registro, justo arriba del botón de envío:
El campo real reCAPTCHA se colocará dentro de div arriba utilizando JavaScript. Por lo tanto, para mostrar el campo, deberemos incluir el JavaScript en el pie de página..
WordPress tiene una acción específica solo para este uso. Agregue la siguiente línea en el constructor del plugin:
add_action ('wp_print_footer_scripts', array ($ this, 'add_captcha_js_to_footer'));Entonces, crea la función, add_captcha_js_to_footer que imprime la etiqueta de inclusión de JavaScript que carga la API reCAPTCHA de Google:
/ ** * Una función de acción utilizada para incluir el archivo reCAPTCHA JavaScript * al final de la página. * / public function add_captcha_js_to_footer () echo "";
Ahora, cuando vaya a la página de registro, debería ver el campo reCAPTCHA en su lugar:
Si la verificación "no es un robot" basada en JavaScript es exitosa, el widget reCAPTCHA agrega un nuevo parámetro al formulario, g-recaptcha-respuesta. Luego, en el lado del servidor las validaciones en el do_register_user función, podemos usar el parámetro para verificar que el usuario haya pasado la prueba.
Primero, vamos a crear una función para verificar el parámetro reCAPTCHA:
/ ** * Comprueba que el parámetro reCAPTCHA enviado con la solicitud de registro * es válido. * * @return bool Verdadero si el CAPTCHA está bien, de lo contrario es falso. * / private function verify_recaptcha () // Este campo lo establece el widget recaptcha si la verificación es exitosa si (isset ($ _POST ['g-recaptcha-response'])) $ captcha_response = $ _POST ['g-recaptcha -respuesta']; else devolver falso; // Verifique la respuesta captcha de Google $ response = wp_remote_post ('https://www.google.com/recaptcha/api/siteverify', array ('body' => array ('secret' => get_option ('personalizar -login-recaptcha-secret-key '),' response '=> $ captcha_response))); $ éxito = falso; if ($ response && is_array ($ response)) $ decoded_response = json_decode ($ response ['body']); $ success = $ decoded_response-> success; devolver $ success; En líneas
