Autenticación de personalización front-end y back-end para WordPress

Ya sea que desee que los usuarios se conecten desde el front-end o el fondo de sus sitios web, WordPress le permite personalizar completamente la experiencia para ambos. Ocasionalmente, al construir un sitio web de WordPress, puede pensar que la página de autenticación construida no coincide exactamente con sus necesidades. A veces, es posible que desee incorporar el formulario de conexión en el front-end de su sitio. En otros momentos, es posible que necesite funcionalidades que no están disponibles utilizando la página predeterminada /wp-login.php. Anteriormente hemos analizado cómo personalizar completamente la página de inicio de sesión de WordPress, explorando su camino para combinarla en la marca de su sitio. En esta publicación, analizaremos cómo extender algunas de las funcionalidades ofrecidas en esa publicación con ejemplos más prácticos.
Esta publicación analiza la personalización de la conexión frontal y de back-end en dos secciones. En la primera parte, explicaré cómo administrar el proceso de conexión desde el front-end del sitio. Veremos cómo:
Incluir un formulario de conexión en publicaciones y widgets
Redirigir al usuario a la autenticación exitosa
Establezca una página de inicio de sesión personalizada
Mostrar un enlace de conexión/desconexión en un menú
Tenga en cuenta que solo exploraremos la tarea de conexión, dejando que WordPress sea redirigido en caso de autenticación fallida, restablecimiento de contraseña, registro del usuario y edición de datos. Todas estas tareas merecen una atención cuidadosa y nos darán más para hundirlas y explorarlas en el futuro.
En la segunda parte de esta publicación, le mostraré cómo agregar una mayor funcionalidad a la página de conexión de Built -in. Ir a:
Personalice la estructura HTML del encabezado de la página de conexión al máximo de la página de conexión incorporada con campos de formulario adicionales
También analizaremos algunos ejemplos para familiarizarse con las funciones, acciones y filtros disponibles para administrar el proceso de conexión. Supongo que está familiarizado con los conceptos clave detrás de la acción y los ganchos de filtro. Si no, antes de pasar por esta publicación, tome tiempo para leer una guía rápida (y profundizada) para los ganchos de WordPress.
Comencemos a profundizar en la personalización de las autentificaciones.
Formulario de inicio de sesión para Backend WordPress. Incluyendo un formulario de conexión en publicaciones y widgets de texto al diseñar usuarios para un nuevo sitio web, es posible que desee mostrar un formulario de conexión en la parte delantera de su sitio. Qué eco (o devuelve) un formulario de conexión simple (verifique el códice de WordPress para más detalles) . Esta función contiene varios parámetros, cuyos valores establecen la URL para la redirección después de la conexión, IDS, etiquetas y valores predeterminados de los elementos de formulario.

En el siguiente ejemplo, crearemos un código corto simple que permitirá a los autores del sitio incorporar el formulario de autenticación en cualquier lugar del sitio:
Cargue la idea 74E7FB45280C92D95A5FC82343394EDD
En el código anterior, establecemos el valor de eco en falso, de modo que la función no imprima el formulario del formulario, sino para devolver el marcado como un valor de la variable de salida $. El mismo valor será devuelto por la función de llamada inversa. Si el usuario ya estaba autenticado, la función devuelve un mensaje y el enlace de desconexión (este último devuelto por la función wp_loginout). Ahora, creemos una nueva publicación (o página) e incluyamos el código corto [frontend-login-form]. Como resultado, recibiremos el formulario de conexión presentado en la imagen a continuación. La imagen muestra el formulario de conexión incorporado en una publicación normal
También podemos incluir el formulario en una barra lateral, pero primero tenemos que obligar a WordPress a procesar códigos cortos en widgets de texto. Esta tarea se puede realizar utilizando el filtro widget_text y la función do_shortcode como ya lo hemos hecho en el código anterior.

Después de activar el procesamiento de códigos cortos en los widgets de texto, el formulario de autenticación se puede incluir en cualquier barra lateral
Redirección del usuario Cuando se conecta en el ejemplo anterior, una vez conectado, el usuario se redirige a la misma página desde la cual proviene, independientemente de su papel. Pero podemos redirigir a los usuarios a ciertas páginas, dependiendo de sus roles o capacidades.

Por ejemplo, podemos querer evitar que los suscriptores del sitio tengan acceso al área de administración mientras redirigen al tablero a todos los usuarios que pertenecen a otros roles. Podemos lograr este login_redirect el gancho del filtro login_redirect. Considere el siguiente código:
La idea se carga A3A51DB0E4548A1D4E0494B899FFEF1C
Es bastante explícito: login_redirect filtra la URL del recurso al que el usuario debe ser redirigido a una autenticación exitosa. En nuestro ejemplo, si el usuario tiene la capacidad de editar_posts (todos los roles, excepto los suscriptores), el usuario será redirigido al tablero. Si los usuarios no lo hicieron, serán redirigidos a la página principal del sitio. Configurar una página de conexión personalizada si creamos una nueva página de inicio de sesión personalizada, también es posible que deseemos anular la Connect de URL predeterminada. Para hacer esto, podemos usar el filtro Login_Url, como se muestra en el siguiente código:
Cargue la idea 6E2379CCE31F1FC1958114BD7A396BD
Aquí, add_query_arg la función add_query_arg, a la que adjunté los argumentos del interrogatorio redirect_to y reauth a la URL. La misma URL finalmente se devuelve por la función de llamada inversa.
La adición de elementos de menú que se conectan y se desconectan programáticamente ahora tenemos una nueva URL de inicio de sesión y podemos construir el enlace programático correctamente a partir de nuestras Escrituras. En el siguiente ejemplo, le mostraré cómo adjuntar la conexión y los enlaces de desconexión a un menú principal.
En el archivo principal de un complemento (o en el archivo de funciones.php de un tema infantil) copia y pegue el siguiente bloque del código: H
Cargue la idea E03608DE3795D952E86B43BA3E6393E4

El filtro WP_NAV_MNU_ITAMS nos permite agregar nuevos elementos a los menús. Al establecer una cierta ubicación del tema, nuestra personalización solo afectará un menú personalizado. Si el usuario está conectado, la función de llamada inversa agregará automáticamente la URL de desconexión, de lo contrario, agregará la URL de conexión. Hasta ahora he visto cómo conectar a su usuario en el front-end. Sin embargo, podemos preferir mantener los datos de conexión en nuestra propia página predeterminada. Entonces, en los siguientes ejemplos, veremos cómo aprovechar algunas de las muchas funciones, acciones y filtros que podemos usar para personalizar la estructura de la página y agregar funcionalidades al formulario de autenticación. Personalización del encabezado de conexión Página de conexión predeterminada de WordPress está estructurado de la siguiente manera:
Cargue la idea 8B5F0335631E213D4FC0E80A5CEB08F
Es solo un elemento H1 con un ancla que indica a WordPress.org. Podemos actuar en esta estructura debido a tres ganchos, una acción (login_head) y dos filtros (login_headerrl y login_headertitle). Tome el siguiente código como ejemplo:
Cargue la idea E8D0CC07095E0E5869D5CFEFB6D4E8D4
La acción login_head se dispara después de que los scripts se colocan en la cola y podemos conectarnos a esta acción para poner los scripts y estilos personalizados. En nuestro ejemplo, agregamos una sola declaración para cambiar la imagen de fondo del ancla desde el encabezado
Login_headerirl Filtro La URL del enlace desde el registro del encabezado. En nuestro ejemplo, la función de llamada inversa devuelve la URL de inicio
Login_headertitle filtra el atributo de título
Este es solo un ejemplo básico, cuyo objetivo es demostrar cómo las acciones y los filtros son útiles para personalizar la experiencia de conexión. Si necesita más control sobre la presentación de inicio de sesión, tómese un momento para leer la página de autenticación de WordPress por completo. Luego, si desea agregar más funciones al formulario de conexión Built -In, lea nuestro último ejemplo más avanzado … Permitir a los usuarios seleccionar la URL de redirección es el momento de ofrecer a nuestros usuarios más control sobre el proceso de conexión. En este último ejemplo, les daremos la oportunidad de elegir la URL de la página a la que se redirigen. Primero, agregaremos un nuevo campo al formulario de conexión con la siguiente función:
La idea F35AC7EF05C130C89530316098369737 está cargada
La acción login_form se dispara después del campo “Contraseña” en el formulario de conexión y antes del cuadro de selección “Recuérdame”, para que la función de llamada inversa imprima el menú Seleccionar en esa posición precisa. Con el campo de formulario en su lugar, podemos ponerlo en acción con el siguiente código:
Cargue la idea 1DF1831B0EF284BC62168FBD0D74D0C6
Aquí, verificamos si se ha enviado un valor válido para el campo seleccionado. Si es así, la instrucción de conmutación establece un valor para la variable $ redirect_to dependiendo de la opción seleccionada del usuario.
Un formulario de inicio de sesión personalizado
El usuario ahora será redirigido a la página que elija. Estamos aquí para informarle que otra forma de autenticar a los usuarios es con nuestro propio complemento gratuito y formador.
Forminador. Gafas grandes y todo. Con su ayuda, es fácil configurar los formularios de registro y autenticación en su sitio web de WordPress. Tienes muchas opciones de personalización; Como los campos para la información necesaria, Captcha, la configuración me recuerda a mí y a muchos más. Es un complemento popular de 4.5 estrellas por una razón. Puede leer cómo configurar un formulario de inicio de sesión y probarlo de forma gratuita hoy. Terminar el proceso de conexión es una parte importante del flujo de usuarios de un sitio web y nuevos, como diseñadores web, debemos tomar el tiempo para considerar la experiencia del usuario. Ya sea que decidamos permitir a los usuarios conectarse desde un sitio frontal o mantener el formulario Backynd predeterminado, podemos personalizar todas las opciones tanto en la presentación como en la funcionalidad. WordPress ofrece los poderes de personalización: debe usarse para usarlos bien. Logotipo de crédito Giulio Baccari. ¿Tiene más ideas para personalizar la conexión? ¿Tiene sus formularios de inicio de sesión favoritos que se han personalizado? Únase a la conversación y compártalos con nosotros en los comentarios a continuación.
Etiquetas:
formado

Acceso