Share
La pantalla de inicio de sesión de WordPress está bien diseñada: es limpia y simple de interactuar y funciona bien en todos los tamaños de pantalla. Pero, ¿qué sucede si está creando un sitio para un cliente que desea mostrar su propio logotipo a los usuarios que inician sesión? ¿O si tiene una instalación MultiSite y desea que sus usuarios vean su marca cuando inicien sesión? Por suerte, puede personalizar la forma en que se ve la pantalla de inicio de sesión con bastante facilidad.
Para este tutorial he creado un complemento para hacer esto; La ventaja de usar un complemento es que puede colocarlo en cualquier sitio de WordPress que desarrolle y darles un poco de marca..
Los pasos que voy a demostrar en este tutorial son:
Para completar este tutorial necesitarás:
En la parte superior de mi plugin estoy agregando las siguientes líneas:
/ * Nombre del complemento: WPTutsPlus Personalice la Parte 1 del administrador: Pantalla de inicio de sesión URI del complemento: http://rachelmccollin.co.uk Descripción: Este complemento es compatible con el tutorial en wptutsplus. Personaliza la pantalla de inicio de sesión de WordPress. Versión: 1.0 Autor: Rachel McCollin Autor URI: http://rachelmccollin.com Licencia: GPLv2 * /
Es fácil agregar su propio logotipo o el de su cliente a la página de inicio de sesión y hacer que su instalación de WordPress parezca más profesional al instante..
Accentsconagua
login_enqueue_scripts gancho de acción:// agregar un nuevo logotipo a la función de la página de inicio de sesión wptutsplus_login_logo () ?>
Esto agregará su logotipo a la pantalla de inicio de sesión, como se muestra en la captura de pantalla.
Además de agregar un logotipo, también puede cambiar su tamaño para que se ajuste y agregar estilo a otros elementos en la pantalla.
El logotipo de arriba está ligeramente aplastado para que quepa en el espacio predeterminado que se le ha asignado. Voy a ajustar el tamaño.
Edite el código en su complemento para que se lea como sigue:
// agregar un nuevo logotipo a la función de la página de inicio de sesión wptutsplus_login_logo () ?>
El valor de altura que utilice dependerá de la relación de aspecto de su logotipo. Utilizando 300px y auto Para el tamaño de fondo la propiedad garantiza que su logotipo sea tan ancho como el cuadro de inicio de sesión y que se mantenga su relación de aspecto, y que altura El valor proporcionará espacio suficiente para que su logotipo encaje.
Ahora mi logo se ve así:
¡Mucho mejor! Pero el tamaño del logotipo no es lo único que puedo hacer con respecto al estilo. ¿Qué tal cambiar algunos colores??
Todo el texto que se muestra en la página de inicio de sesión se encuentra en forma de enlaces, por lo que los enlaces los tendrá que personalizar. Edite su código de nuevo para que se lea como sigue:
// agregar un nuevo logotipo a la función de la página de inicio de sesión wptutsplus_login_logo () ?>
Esto me da enlaces que están en consonancia con los colores de mi logotipo. El color del enlace es cian y el color de desplazamiento es magenta..
Nota: Como el color principal de mi logotipo es similar al azul, funciona bien para los enlaces. Es posible que no desee cambiar el color de sus enlaces si su logotipo es de un color muy diferente, para evitar problemas de usabilidad..
El elemento final en la pantalla es el botón "Iniciar sesión", que todavía es azul. Vamos a cambiar eso. Edite su código para que se lea como sigue:
// agregar un nuevo logotipo a la función de la página de inicio de sesión wptutsplus_login_logo () ?>
Así que ahora tengo una pantalla de inicio de sesión completamente personalizada, lo que significa que cuando mis clientes o usuarios inician sesión, ven algo que es consistente con mi marca y hace que el sitio se vea más profesional..
La personalización de la pantalla de inicio de sesión de WordPress es sencilla y puede marcar una gran diferencia en la impresión que su sitio da a los usuarios y clientes que inician sesión. hora.
