Cómo tener un login limpio para usuarios en WordPress

Una de las cosas que menos me gustan de un WordPress por defecto es que para el acceso de los usuarios la página de login siempre coge los estilos del backoffice. Esto es poco coherente visualmente con el estilo del sitio y rompe totalmente la experiencia del usuario.

Cuando el acceso es para un autor, un editor o un administrador del sitio, no es demasiado grave, pero para un cliente o un suscriptor es muy poco natural e inmersivo. El logo de WordPress tampoco ayuda mucho a quien no le importa qué CMS estamos usando.

Para estos segundos casos es mucho más natural que el login se haga desde el front y que incluso se elimine la barra de administración que aparece en la zona superior de navegación sobre un fondo negro ya que aporta muy poco a los usuarios de perfiles más bajos.

Widget Meta de WordPress

De serie WordPress ofrece un widget llamado Meta que permite acceder a cualquier usuario desde una area de widgets como puede ser una barra lateral o el pie de la web (depende del tema que tengamos activo). Es simple y, no nos vamos a engañar, bastante feo.

Si tu usuario hace clic en Acceder, se cargará la página de login clásico de WordPress. La misma que usan millones de sitios de internet.

Login de WordPress

Como imaginarás, acaba de defenestrarse cualquier esperanza de mantener un estilo visual coherente en la navegación de tu web.

Clean Login, plugin para inicio de sesión en el frontend

Por suerte existen algunos plugins que pueden ayudarnos en esta tarea de mantener el ‘scent’ para nuestra experiencia de usuario. Por ejemplo Clean Login.

Clean Login Plugin

Este plugin nos permite insertar en cualquier parte del frontal de nuestro sitio los formularios de inicio de sesión, de solicitud de cambio de contraseña o de edición del perfil de usuarios. Esto lo consigue gracias al uso de shortcodes que podemos añadir vía el editor de bloques, widgets o incluso el código de las plantillas de nuestro tema.

Clean Login añade una página de administración en el Escritorio de WordPress en Ajustes > Clean Login. Lo primero que nos encontraremos serán los 3 shortcodes que tenemos disponibles.

Te los marco a continuación para que te sea más fácil copiar-pegar si los necesitas.

[clean-login]
[clean-login-edit]
[clean-login-restore]

En la captura anterior tienes detallada la funcionalidad que aporta cada uno de ellos. En esta siguiente puedes ver cómo se pinta el primero en la barra lateral de Twenty Sixteen cuando el usuario aun no ha iniciado la sesión.

Widget de login de usuario

Para conseguirlo, simplemente vamos a Apariencia > Widgets y añadimos un widget de Texto donde pegaremos el shortode escogido, en este caso [clean-login].

Ojo porque si tratas de añadirlo en un widget de tipo HTML no funcionará.

Como supondrás, esto mismo se puede replicar en cualquier bloque dentro de una página o una entrada, usando bien el bloque tipo Párrafo o el bloque tipo Shortcode.

Cuando el usuario ha iniciado sesión, Clean Login nos muestra el avatar del usuario y su nombre.

Si por el contrario hemos usado el shortcode [clean-login-edit] lo que te mostrará cuando estés logueado será un formulario de edición de los datos de tu usuario.

Edición de los datos del usuario en Clean Login

Configurando Clean Login

Pero volvamos ahora a los ajustes de Clean Login porque hay algunos aspectos muy interesantes.

Ajustes de Clean Login

Las dos primeras hacen referencia a la visibilidad de la barra de administración y del Escritorio de WordPress para usuarios no administradores. En el caso de clientes, suscriptores, alumnos, etc está claro que estas dos funcionalidades sobran y personalmente marcaría ambas para deshabilitarlas.

Las dos siguientes hacen referencia a la protección antispam del formulario. Hoy día es imprescindible contar con ella si no quieres que de repente se te den de alta cientos de usuarios falsos en un momento.

Otro aspecto interesante es el de la redirección tras el inicio de sesión después del cierre de la misma. Una vez que un usuario se loguee correctamente podemos forzar la recarga de una url predefinida (un area de usuario o un contenido en concreto). Cuando marques la casilla podrás añadir la url en un campo que aparecerá nuevo.

El resto de ajustes son también bastante útiles pero un poco menos generalistas. Te invito a experimentar con ellos para conseguir una puesta a punto ideal para tu proyecto.

Como verás es un plugin sencillo de administrar y efectivo en su tarea. Quizás te toque tunear un poco su CSS para darle un poco más de presencia a los formularios pero la diferencia con el login clásico ya es abismal.

Espero que te haya resultado interesante este contenido. Te invito a dejarme tu opinión en los comentarios o añadir recomendaciones de plugins y técnicas complementarias.

Deja un comentario