Cómo personalizar su pantalla de autenticación de WordPress

¡Estás tan cerca! Tienes un maravilloso sitio web construido con WordPress. Tienes lectores interesados. Y ahora use miembros de miembros en WordPress para que los visitantes puedan crear sus propias cuentas. ¿Qué pasa después? Grabar o autenticar y ver eso:

Probablemente haya invertido mucho tiempo y recursos en el diseño de su sitio, obteniendo las mejores imágenes de Deposithphos o PIXLR, lo siguió con software como Crello para asegurarse de que todo se vea bien, pero a pesar del aspecto profesional de los demás. A su sitio. , esta página de autenticación completa puede destruir la calidad premium de su sitio.
No arruine su experiencia de usuario con una página de inicio de sesión básica. En este tutorial, aprenderá cómo personalizar cada aspecto de la página de autenticación predeterminada de WordPress. Ya he probado un puñado de soluciones y seleccioné la opción más intuitiva (y gratuita). ¡Continúe leyendo para ver cómo personalizar su pantalla de autenticación de WordPress ahora! Personalice su página de inicio de sesión, es probable que vean cómo se ve el producto final. Tendrá mucha libertad para personalizar su página de autenticación como desee, pero aquí hay un ejemplo de un formulario de conexión que puede crear siguiendo los pasos en este tutorial:

La parte más importante es que puede cambiar el logotipo de WordPress con usted y personalizar los colores. Para un sitio de membresía, los usuarios ni siquiera sabrán que está utilizando WordPress, porque su formulario está completamente marcado. Debido a que personalizar la página de conexión es una solicitud bastante común para los usuarios de WP, hay muchos complementos excelentes para elegir. Sin embargo, hay uno en particular que se destaca en mi opinión. Elija el complemento correcto descubrí que la mayoría de la personalización de la pantalla de conexión de WordPress está confundida o es demasiado compleja para usar. El avión que me parece tener el mejor equilibrio entre flexibilidad y simplicidad es el personalizador de página de Pagin personalizado de Hardeep Asrani.
En el resto de esta guía, obtendrá una presentación general de este complemento y cómo usarlo para crear una página de conexión como compartí anteriormente. Instale y active el complemento en el tablero de WordPress, acceda a la página Pluginuri y haga clic en el botón Agregar nuevo en la parte superior. Luego busque “Personalizador de página de inicio de sesión personalizado” y haga clic en el botón Instalar ahora en este complemento.

Verá otros complementos disponibles. Siéntase libre de probarlos, pero después de algunas pruebas, creo que la página de personalización personalizada es la mejor.

Una vez que instale el complemento, el botón se actualizará a un botón de activación que puede presionar para completar el proceso de instalación. Dónde encontrar la nueva configuración, la página de conexión personalizada no abarca su tablero con un nuevo elemento de menú de nivel superior, lo cual es hermoso. Si pasa con el mouse sobre el elemento del menú de aspecto, verá una nueva opción de conexión. Haga clic en él y se le dirigirá a la nueva configuración en la personalización.
Esta es una captura de pantalla del tema Challenger con este complemento activado. Puede ver cómo esto crea un impacto mínimo en el grado de uso de su menú de administrador. Elija una plantilla al hacer clic en la sección Personalizador de inicio de sesión, el formulario de conexión se cargará instantáneamente y encontrará una serie de secciones para la personalización.

Verifiquemos primero la sección de plantilla. Tiene tres estilos diferentes disponibles.

Al seleccionar una plantilla, todo lo que hace es actualizar la configuración que se encuentra en las otras secciones. En otras palabras, puede elegir cualquier plantilla que se asemenda más con el diseño final que desea hacer un poco más rápido. Permaneceré con el valor predeterminado en esta guía.

Ahora pasemos a algunos de los trabajos de personalización reales. Cambie el fondo al editar el fondo, puede elegir entre un fondo o color estático. En mi caso, actualizaré el color para que coincida con el gris azul oscuro que se encuentra en el sitio web del sitio web de Compete Temas.

Usar el mismo color de fondo para el encabezado es una buena opción, ya que creará una estética consistente y sabe que su logotipo se verá bien contra él. Agregue su logotipo al logotipo es el paso más importante para crear una forma de forma. . Si no utiliza ninguna de las otras opciones de personalización aquí, asegúrese de implementarlo.
El personalizador de conexión personalizado tiene una excelente selección de funciones disponibles que le permiten seleccionar la imagen del logotipo y cambiarla para que se ajuste perfectamente. Incluso puede actualizar el espacio entre el logotipo y el formulario y personalizar la URL a la que está conectado el logotipo.

Con la imagen de fondo y el logotipo cambiado, la forma del logotipo ya se ve muy singular. Para ser correctos en esta parte, descubrimos que las herramientas de dimensionamiento del logotipo son un poco difíciles de usar. Deberá cambiar el tamaño de la imagen de antemano y conocer las dimensiones exactas que usará para no estirar la imagen con la configuración de ancho y altura.

A continuación, editaremos el tamaño y el diseño del formulario que contiene el botón y las entradas. Personalice el formulario que puede cambiar el color de fondo del formulario o puede darle su propio fondo. Personalmente, creo que el fondo blanco simple está bien, por lo que dejé lo mismo, pero esto podría cambiar radicalmente el aspecto de su pantalla de autenticación de WordPress.
Cambié un poco el tamaño del formulario, hice la sombra de la caja más oscura y agregué un borde de 3px para redondear ligeramente las esquinas de la forma. Estos cambios han sido bastante sutiles, pero aún así ayudan a marcar la forma. Enseñe los campos personales, son buenos con la forma en que se ven los campos, pero nunca he sido fanático de la caja de “Remember Me”. Hemos eliminado ese elemento utilizando completamente una de las configuraciones disponibles en la sección de campo.

Una vez más, hay una maravillosa variedad de opciones de personalización aquí. No me cansé de tocar a los demás además de ocultar la caja de selección “Recuérdame”. Personalizar el botón El botón es otra buena oportunidad para marcar su formulario de autenticación. En este momento, el botón se destaca porque no coincide con los colores del logotipo y el fondo.
Deshabilité el color de fondo y el borde del botón. Además, cambié el color de la sombra del texto del texto “Iniciar sesión” y redimensioné el botón para que sea un poco más grande.

¡Nos estamos acercando a una página de autenticación completamente marcada ahora! Editar los enlaces en la última sección con configuración de personalización simple es la sección Otras. Las opciones que encontrará aquí personalizan los enlaces que aparecen antes del formulario. Aunque probablemente desee dejar la contraseña perdida del enlace, el enlace de regreso al sitio siempre ha parecido inútil, porque el logotipo ya está vinculado.
Eliminé el enlace de retorno del sitio, facilité el enlace para la contraseña perdida y hice el texto un poco más grande. Elementos centrales con CSS En este momento, estoy bastante satisfecho con mi nuevo formulario de conexión de marca. Sin embargo, no me gusta que haya más alineaciones de texto. Esto hace que la página se vea un poco desordenada. El personalizador de conexión personalizado no incluye opciones para centrar el botón y el enlace de contraseña, pero hay una sección CSS personalizada y JavaScript disponible. Agregué algunos CSS como este para centrar ambos: aquí está el CSS si desea hacer la misma personalización para su formulario de conexión: #loginform .submit text-align: Center; } #loginform #wp-submit {flotating: none; } #login #nav {text-align: center; } Toques finales El botón parecía bien centrado, pero todavía no me gustó la forma en que creó nuevas alineaciones en la página. Para completar el diseño, cambiamos el botón de 96 PX de ancho a 100% de ancho usando la configuración del botón. Luego agregué un poco más de relleno desde la parte inferior en la sección del formulario para crear el aspecto final: