Saltar al contenido

How to customize your WordPress login screen

How to customize your WordPress login screen
5 (100%) 1 vote

¡Estás tan cerca!

Tienes un sitio web impresionante construido con WordPress.

Tienes lectores interesados.

Y ahora estás utilizando las características de membresía en WordPress para que tus visitantes puedan crear sus propias cuentas.

¿Qué pasa después?

Se registran o se conectan y ven esto:

A pesar de la apariencia profesional del resto de su sitio, esta página de inicio de sesión sin marca puede matar la calidad superior de su sitio.

No estropees tu experiencia de usuario con una página de inicio de sesión básica.

En este tutorial, aprenderás a personalizar cada aspecto de la página de inicio de sesión predeterminada de WordPress. Ya he probado un puñado de soluciones y he seleccionado la opción más intuitiva (y gratuita).

Sigue leyendo para ver cómo personalizar tu pantalla de inicio de sesión de WordPress ahora!

Personalice su página de inicio de sesión

Probablemente sienta curiosidad por ver cómo es el producto final.

Tendrás mucha libertad para personalizar tu página de inicio de sesión como quieras, pero aquí tienes un ejemplo de formulario de inicio de sesión que puedes crear siguiendo los pasos de este tutorial:

La parte más importante es que puedes cambiar el logotipo de WordPress con el tuyo propio y personalizar los colores. Para un sitio de membresía, los usuarios ni siquiera sabrán que estás usando WordPress porque tu formulario está completamente marcado.

Dado que la personalización de la página de inicio de sesión es una petición bastante común de los usuarios de WP, hay muchos plugins excelentes para elegir. Sin embargo, hay una en particular que se destaca en mi opinión.

Elija el plugin adecuado

Encontré que la mayoría de los plugins de personalización de la pantalla de inicio de sesión de WordPress son confusos o demasiado complejos de usar.

El plugin que me sorprende por tener el mejor equilibrio entre flexibilidad y simplicidad es el Custom Login Page Custom Customizer plugin de Hardeep Asrani.

A lo largo del resto de esta guía, obtendrá una visión general de este plugin y cómo usarlo para crear una página de inicio de sesión como la que he compartido anteriormente.

Instalar y activar el plugin

En el panel de control de WordPress, visite la página Plugins y haga clic en el botón Añadir nuevo en la parte superior. Luego busque “Custom Login Page Custom Custom Customizer” y haga clic en el botón Install Now de este plugin.

También verás otros plugins disponibles. Siéntase libre de probarlas, pero después de algunas pruebas, creo que Custom Login Page Customizer es lo mejor.

Una vez instalado el plugin, el botón se actualizará a un botón Activar que puede pulsar para finalizar el proceso de instalación.

Dónde encontrar los nuevos ajustes

El Personalizador de la Página de Inicio de Sesión Personalizada no abarrota tu tablero de instrumentos con un nuevo elemento de menú de nivel superior, lo cual es agradable. Si pasa el ratón por encima del elemento Apariencia, verá una nueva opción Personalizador de inicio de sesión. Haga clic aquí y se le llevará a la nueva configuración en el Personalizador.

En lugar de crear un nuevo menú de administración, encontrará las nuevas configuraciones añadidas junto con las opciones de personalización del tema en el Personalizador.

Esta es una captura de pantalla del tema Challenger con este plugin activado. Puede ver cómo esto crea un impacto mínimo en la usabilidad de su menú de administración.

Elija una plantilla

Al hacer clic en la sección Personalizador de inicio de sesión, el formulario de inicio de sesión se cargará instantáneamente y encontrará una serie de secciones para personalizar.

Echemos un vistazo a la sección Plantillas primero.

Dispone de tres estilos diferentes prediseñados.

Cuando selecciona una plantilla, todo lo que hace es actualizar la configuración que se encuentra en las otras secciones. En otras palabras, puede elegir la plantilla que más se parezca al diseño final que desee para hacer el trabajo un poco más rápido. Me quedaré con el valor predeterminado de esta guía.

Ahora vamos a pasar a algunos de los trabajos de personalización real.

Cambiar el fondo

Al editar el fondo, puede elegir entre una imagen de fondo estática o un color. En mi caso, voy a actualizar el color para que coincida con el gris azulado oscuro que se encuentra en el encabezado del sitio web Compete Themes.

Usar el mismo color de fondo del encabezado es una buena opción ya que creará una estética consistente y usted sabe que su logo se verá bien contra él.

Añada su logotipo

Agregar su logotipo es el paso más importante en la creación de la marca del formulario. Si no utiliza ninguna de las otras opciones de personalización aquí, asegúrese de implementar ésta.

Custom Login Customizer tiene una gran selección de características disponibles que le permiten seleccionar la imagen del logotipo y cambiar su tamaño para que se ajuste perfectamente. Incluso puede actualizar el espacio entre el logotipo y el formulario, y personalizar la URL a la que se enlaza el logotipo.

Con la imagen de fondo y el logotipo cambiados, la forma del logotipo ya tiene un aspecto único.

Para ser justos sobre esta parte, encontré que las herramientas de dimensionamiento de logotipos son un poco difíciles de usar. Usted querrá redimensionar su imagen de antemano y conocer las dimensiones exactas que va a utilizar para no estirar la imagen con las configuraciones de ancho y alto.

A continuación, editaremos el tamaño y diseño del formulario que contiene el botón y las entradas.

Personalizar el formulario

Puede cambiar el color de fondo del formulario o darle una imagen de fondo propia. Personalmente, creo que el fondo blanco liso está bien, así que lo dejé igual, pero esto podría cambiar radicalmente el aspecto de tu pantalla de inicio de sesión de WordPress.

Modifiqué un poco las dimensiones de la forma, oscurecí la sombra de la caja y agregué un radio de borde de 3px para redondear un poco las esquinas de la forma.

Estos cambios fueron bastante sutiles, pero todavía ayudan a marcar aún más la forma.

Actualizar los campos

Personalmente, estoy bien con el aspecto de los campos, pero nunca he sido un fan de la caja “Recuérdame”. He eliminado ese elemento por completo utilizando una de las opciones disponibles en la sección Campos.

Una vez más, hay una variedad impresionante de opciones de personalización aquí. No me molesté en tocar a nadie más aparte de ocultar la casilla de verificación “Recuérdame”.

Personalizar el botón

El botón es otra buena oportunidad para marcar su formulario de inicio de sesión.

En este punto, el botón se destaca porque no coincide con los colores del logotipo y del fondo.

Cambié el fondo y el color del borde del botón. Además, cambié el color de la sombra del texto “Log In” y redimensioné el botón para que fuera un poco más grande.

Nos estamos acercando a una página de inicio de sesión de marca completa ahora!

Editar los enlaces debajo del formulario

La última sección con configuraciones de personalización simples es la sección Otra. Las opciones que encontrará aquí principalmente personalizan los enlaces que aparecen antes del formulario.

Aunque probablemente querrá dejar el enlace Contraseña perdida, el enlace Volver al sitio web siempre me ha parecido innecesario ya que el logotipo ya está enlazado.

He eliminado el enlace de retorno del sitio, aligerado el enlace de la contraseña perdida y también he hecho que el texto sea un poco más grande.

Elementos centrales con CSS

En este punto, estoy bastante contento con mi nuevo formulario de inicio de sesión de marca.

Sin embargo, no me gusta que haya múltiples alineaciones de texto. Esto está causando que la página se vea un poco desordenada.

Custom Login Custom Customizer no incluye opciones para centrar el botón y el enlace de contraseña, pero hay una sección de CSS y Javascript personalizada disponible.

Añadí algunas CSS como esta para centrar ambos:

Aquí está el CSS si desea hacer la misma personalización de su formulario de inicio de sesión:

#loginform.submit
text-align: centro;
}
#loginform #wp-submit {
float: ninguna;
}
#login #nav {
text-align: centro;
}

Toques finales

El botón se veía bien centrado, pero aún así no me gustaba la forma en que creaba nuevas alineaciones en la página.

Para completar el diseño, cambié el botón de 96 píxeles de ancho a 100% de ancho usando la configuración del botón . Luego agregué un poco más de relleno en la sección Formas para crear la apariencia final:

Con estas actualizaciones finales, el botón es más fácil de hacer clic en el escritorio y el móvil. Además, el formulario de inicio de sesión está ahora completamente personalizado para que coincida con mi marca y crear una mejor experiencia de usuario para mis visitantes.

Ahora es tu turno

Con el Custom Login Custom Customizer plugin, hacer cambios drásticos o sencillos en su formulario de inicio de sesión es muy sencillo.

Estoy contento con el resultado de mi nuevo formulario de inicio de sesión y no me ha llevado mucho tiempo.

Ponerle una marca a tu pantalla de inicio de sesión de WordPress puede darle a tu sitio una apariencia mucho más profesional a los visitantes. Sin ver el logotipo de WordPress en el inicio de sesión, se sentirá como su propia plataforma.

¿Tiene experiencia con la personalización de los datos de inicio de sesión? ¿Tiene alguna pregunta sobre este tutorial? Publique sus opiniones y comentarios en la sección de comentarios a continuación.