2YEWbXw
Hoy, nos centraremos en una página que se descuida con demasiada frecuencia… La que sin duda te encuentras varias veces al día, pero que ya ni siquiera miras. La famosa: Página de inicio de sesión de WordPress.
Y sí! Ya sea para trabajar en su sitio web o en el de sus clientes, esta es la puerta de enlace obligatoria para conectarse a la administración y al panel de control. Excepto que, por defecto, es un poco triste, pero sobre todo, no muy original….
Si has elegido WordPress, es por sus muchas posibilidades de personalización, así que ¿por qué conformarse con esta interfaz común para todos los usuarios? Y si es para sus clientes, añade un toque personal. Un pequeño gesto a primera vista, es una bonita atención que mejorará la experiencia del cliente;).
Podrías intentar entrar en el código, pasar mucho tiempo allí y arrancarte el pelo…. O hacer tu vida más fácil con un buen plugin que ha demostrado su valía! Vamos, porque sabemos que su tiempo es precioso, el Pot le ha encontrado la extensión perfecta: Custom Login Page Customizer. Sigue el tutorial, ¡vamos!
¿Qué es la página de inicio de sesión de WordPress?
Volvemos a lo básico:
Esta página es la puerta de entrada a la administración de su sitio. Aquí es donde puedes crear páginas, artículos de blog, personalizar tu tema, añadir extensiones y mucho más.
Para llegar allí, simplemente agregue /wp-admin o /wp-login después de la URL de su sitio (ej: www.monsupersite/wp-admin). Veremos más adelante en este artículo cómo modificar esta URL para hacer su sitio más seguro.
Por defecto, lo encontrará allí:
- el logotipo de WordPress, con un enlace a la página web de WPFR, la asociación oficial de la comunidad francófona de WPF;
- un formulario en el que deberá introducir su nombre de usuario o correo electrónico, así como su contraseña;
- un enlace a una recuperación de contraseña si la has olvidado (¡no está bien!);
- un enlace a la página de inicio de su sitio;
todo sobre un hermoso fondo gris. Wow;).
Así que, incluso si el diseño minimalista está en consonancia con las tendencias actuales, le daremos algunas ideas para añadir su propio toque personal sin caer en el efecto del árbol de Navidad.
¿Por qué cambiar su página de inicio de sesión?
Respetar la carta gráfica
Usted ciertamente ha pasado tiempo refinando el diseño de las diferentes páginas de su sitio, sería una pena detenerse en un camino tan bueno. En este sentido, la personalización de la página de inicio de sesión de acuerdo con la carta gráfica no es un gadget! Si usted entrega este sitio a un cliente, éste estará encantado de iniciar sesión en una interfaz que se adapte a sus necesidades. También muestra su profesionalismo, y que usted se siente cómodo con WordPress.
Armonizar la experiencia de los usuarios del sitio
Es posible que haya creado varios perfiles, para que los colaboradores o suscriptores puedan conectarse a un espacio de miembros. En este caso, la personalización se vuelve particularmente interesante para estandarizar el diseño. Este es el caso de la olla, y mira nuestra hermosa página de inicio de sesión:
Entonces, ¿convencido?
Custom Login Page Customizer: presentación del plugin y su configuración
Ahora estamos llegando al meollo de la cuestión. La extensión Customizer Login, desarrollada por Hardeep Asrani y disponible en código abierto, cuenta actualmente con más de 80.000 instalaciones activas, con una calificación de 4,5/5 estrellas.
Actualizado regularmente, aún no está traducido al francés, pero su manejo sigue siendo fácil e intuitivo. Si quieres una vista previa del video, no dudes en ver el que Alex le dedicó:
Para el tutorial paso a paso, este es el lugar para estar!
Instalar la extensión
Vaya a la página oficial del plugin, descargue el archivo Zip.
A continuación, vaya a su panel de control / Extensiones / Añadir. Haga clic en el botón Cargar extensión, luego navegue por el explorador/buscador de su ordenador, o simplemente arrastre y suelte el archivo.
Haga clic en Instalar, luego active el plugin.
Alternativamente, también puede buscar directamente en el directorio de extensiones de WordPress.
Personalización
ATENCIÓN: A diferencia de muchos plugins que ofrecen directamente un botón «Settings» junto al botón «Enable», o acceso desde las pestañas «Tools» o «Settings», encontrará las opciones de personalización en el personalizador de temas: Appearance / Login Customizer. ¿Estás ahí ahora?
Bueno, empieza bastante bien: el menú de personalización es muy completo. Y lo bueno es que puedes ver directamente los cambios en WYSIWYG (Lo que ves es lo que obtienes -> traducir «lo que ves es lo que obtienes»), es decir, 
viendo la representación de cada acción en vivo.
Ahora vamos a detallar las opciones paso a paso.
Plantillas
Para los más apresurados, hay 3 plantillas disponibles.
Incluso si siguen siendo bastante impersonales, te dan una idea de los posibles cambios, y es una buena base para empezar. Elige el estilo que prefieras, podrás modificar y ajustar los elementos uno a uno.
Fondo: modificar el fondo
Puede elegir el color de fondo de su elección introduciendo su código hexadecimal.
Pero si prefieres usar una imagen, también es posible. A continuación, puede definir si la imagen permanece en su formato original (original), si se adapta a la pantalla (fit to screen), si la rellena sea cual sea el formato (fill to screen), o incluso definir el formato de su elección (custom).
Si ha elegido un formato que no cubre completamente la pantalla, puede hacer que se repita horizontal o verticalmente.
Por último, especifique el origen y coloque la imagen de fondo con precisión con las flechas de dirección.
Logo
Puede decidir si desea mostrar o no un logotipo y personalizarlo.
Descargue sus archivos multimedia y, a continuación, ajuste su tamaño en anchura y altura, en píxeles o en porcentaje. El ajuste del porcentaje tiene la ventaja de permitir una mejor adaptación en cualquier pantalla.
Es posible configurar el relleno, es decir, el margen entre el logotipo y la forma de conexión, también en píxeles (px) o en porcentaje.
Por último, modifique la URL del logotipo para redirigirlo a su página de inicio en lugar de a la URL del sitio WPFR.
Formulario: el formulario de conexión
Ahora vayamos a la inserción que le permite iniciar sesión. Al igual que con el fondo de la página, es posible añadir un color o una imagen de fondo.
Luego juegue con el formato de la forma: ancho y alto (pix o %), relleno de los diferentes campos (superior, inferior, izquierdo y derecho), radio para redondear los bordes.
Para añadir relieve, la opción de propagación de sombra añade una sombra en el reverso del formulario. A continuación, puede definir su alcance, elegir su color y establecer la transparencia.
Campos: los campos a rellenar
La opción Desactivar recordar elimina la casilla de verificación que permite al navegador guardar la contraseña. Si tiene una estrategia eficaz para administrar sus contraseñas, esto puede ser relevante.
También en este caso, dispone de una amplia gama de modificaciones:
- width: cambia el ancho de los campos (pix o %)
- fuente: elegir el tamaño de la fuente del texto de relleno
- border width: indica el grosor de la línea de borde
- color del borde: cambia el color del borde
- radio: redondee los ángulos, tenga cuidado de armonizar bien con los ángulos de su forma
- deshabilitar box shadow: para activar o no una sombra interna
- margin: define el espacio entre las líneas
- acolchado: especifique el margen interno
- background: añadir un color de fondo
- color del texto: cambiar el color del texto de relleno
- color de las etiquetas: determinar el color de las etiquetas
- label font size: adaptar el tamaño de la fuente de las etiquetas.
Botón: botón de inicio de sesión
En una buena y respetuosa Llamada a la acción, el botón debe ser llamativo. Para que destaque de las configuraciones anteriores, opciones y más opciones:
- fondo: cambiar el color de fondo y su saturación
- aspirador de fondo: cambia el color en el flotador (para mantener el diseño armonioso, te aconsejamos que mantengas el mismo tono y juegues con la saturación)
- Tamaño del botón: especifique el tamaño del botón, ya sea Automático (en este caso será pequeño, en la parte inferior derecha) o Personalizado (ancho en píxeles o %, y alto en píxeles solamente)
- Tamaño de fuente: especifique el tamaño de la fuente
- Color del texto: cambiar el color del texto
- Acolchado: juego en los márgenes internos (arriba, abajo, izquierda y derecha)
- Box Shadow: poner una sombra para dar relieve al botón
- Sombra de texto: añada una sombra al texto, pero tenga cuidado en este caso para que sea fácil de leer.
Otros Otros Otros
Ahora estamos llegando al final. El término Otro es un poco enigmático, pero en realidad sólo se refiere a los 2 elementos presentes por defecto bajo el inserto :
- deshabilitar la contraseña perdida: eliminar el enlace al recuperador de contraseña. Depende de ti, pero puede ser peligroso, especialmente si varias personas tienen que entrar en un espacio personal;
- deshabilitar el regreso al sitio web: deshabilitar el enlace de regreso a casa. Si ha definido un logotipo, esta opción no es necesariamente útil.
- color del texto y color del texto (hover): personalizar el color del texto por defecto y cuando se pasa el ratón por encima.
CSS y JavaScript personalizados
Finalmente, la última pestaña le ofrece la posibilidad de introducir el código a mano, si desea ir más lejos en la configuración.
No olvide pulsar el botón de publicar antes de cerrar el personalizador, para no perder todas las preferencias que acaba de configurar.
Esto es todo: su página de administración es personalizada, ¿está orgulloso del resultado? ¿Quieres mostrar esta hermosa página a todo el mundo? Lástima, ese no es el punto
Acceso seguro al back office
Si usted está familiarizado con el Kettle, usted sabe cuánto asegurar su sitio de WordPress es un paso que no debe ser descuidado.
Personalizar la URL de conexión y los slugs
En primer lugar, recordemos que si sabes dónde encontrar la URL de acceso a la administración…. ¡los hackers y los robots también lo sabrán!
Para limitar los ataques de fuerza bruta, más vale prevenir que curar: se le dan algunos consejos para interponerse en el camino de los piratas.
Lo primero que hay que hacer es modificar la URL de la página de inicio de sesión gracias a la extensión Move Login desarrollada por Gregory Viguier.
Descargue, instale y active la aplicación para acceder a la configuración. De esta forma, podrá modificar las URLs más solicitadas por los robots: página de inicio de sesión, desbloqueo, registro, restablecimiento de contraseña, etc.
Escoja babosas que sean fáciles de recordar, pero no demasiado explícitas (evite sus iniciales o identificadores), y siéntase libre de guardar la nueva dirección como una de las favoritas en su navegador para un fácil acceso.
Desactivar o modificar los mensajes de error
Recuerde desactivar los mensajes de error, o al menos hacerlos un poco más ambiguos…. No le diga a los hackers que lo que está mal es el nombre de usuario o la contraseña, deje que un poco de misterio se dispare y redirija los errores de inicio de sesión a su página principal.
Elija identificaciones y contraseñas seguras
Para los hackers, es relativamente fácil inspeccionar el código para los nombres de los diferentes contribuyentes de un sitio. Evite utilizar los nombres de los autores como identificadores y recuerde siempre personalizar los apodos.
Preste especial atención a las contraseñas: 123monsite, el nombre del chat y otras combinaciones fáciles de recordar se evitan, y se prefiere una mezcla de diferentes caracteres (minúsculas, mayúsculas, números y caracteres especiales). Para obtener más información, le invito a leer el artículo y el vídeo de Alex sobre la creación de contraseñas seguras.
Alternativas al inicio de sesión del personalizador
- Tema Mi Login: más de 100.000 instalaciones activas para esta extensión, con una calificación de 4,5/5 estrellas.
Aquí, la página de inicio de sesión se adapta automáticamente a su tema. La personalización es un proceso de un solo clic, pero no tiene forma de modificar los elementos uno por uno. Úsalo si tienes prisa y no estás mirando demasiado los acabados.
- Admin Custom Login: más de 70.000 instalaciones activas, 4.5/5. El WISIWYG ha desaparecido, y eso es una verdadera lástima. Además, hay mucha información y animaciones en el tablero, nos perdemos rápidamente en las muchas configuraciones. Por no mencionar el fuerte incentivo para cambiar a la fórmula de primas. Personalmente, no me di cuenta porque cuando añado un plugin busco la simplicidad.
- 3ª solución: el combo de Elementor Pro Builder y el tema OceanWP permite crear una página de conexión personalizada, pero también 404 páginas, etc. Si tienes el presupuesto necesario, esto puede ser interesante.
Para concluir, podemos decir que la extensión Login de Customizer nos convenció de verdad, gracias a sus muchas posibilidades de personalización.
Se lo agradecemos:
- wYSIWYG, que le permite ver todos los cambios en vivo
- facilidad de manejo, incluso para principiantes
- ergonomía intuitiva gracias al acceso a los ajustes del personalizador de temas
- la integridad de las opciones de personalización
- la precisión de los parámetros, que se pueden especificar en píxeles o porcentajes
- la flexibilidad que ofrece el ajuste de los márgenes y de los acolchados
- plantillas que le permiten comenzar desde una base y ahorrar tiempo
- la adición de CSS o JavaScript para aquellos que deseen ir más lejos.
Para ser mejorada:
- ¿Traducción al francés? Pero si te apetece, debes saber que puedes contribuir;
- la pérdida de todos sus ajustes si cambia de plantilla: ¡lo que puede ser muy frustrante! De ahí la importancia de recordar guardar los ajustes cada vez que cambie de pestaña;
- imposibilidad de modificar el borde azul del campo de desconexión…..
Pero eso es realmente porque somos quisquillosos, y no tenemos mucha culpa por esta extensión;).
¿Y has pensado en personalizar las páginas de inicio de sesión para la administración de tus sitios de WordPress? ¿Ha probado otras aplicaciones que funcionan?