Advertisement
  1. Code
  2. Creative Coding

Personalizar el administrador de WordPress: La pantalla de inicio de sesión

Scroll to top
Read Time: 5 min
This post is part of a series called Customizing the WordPress Admin.
Customizing the WordPress Admin - The Dashboard

Spanish (Español) translation by Esther (you can also view the original English article)

La pantalla de inicio de sesión de WordPress está bien diseñada, es limpia y sencilla de interactuar y funciona bien en todos los tamaños de pantalla. ¿Pero qué pasa si estás construyendo un sitio para un cliente que quiere mostrar su propio logo a los usuarios que se conectan? ¿O si tienes una instalación MultiSite y quieres que tus usuarios vean tu marca cuando se conecten? Por suerte, puedes personalizar el aspecto de la pantalla de inicio de sesión con bastante facilidad.

Para este tutorial he creado un plugin para hacer esto; la ventaja de usar un plugin es que puedes soltarlo en cualquier sitio de WordPress que desarrolles y añadirle instantáneamente un poco de tu marca.

Los pasos que voy a demostrar en este tutorial son:

  1. Añadir un logotipo personalizado
  2. Estilizar la pantalla de inicio de sesión, el logotipo, los enlaces y los botones

Lo que necesitarás para completar este tutorial

Para completar este tutorial necesitarás:

  • Una instalación de WordPress
  • Accede a la carpeta de plugins de tu sitio para añadir tu plugin
  • Un editor de texto para crear tu plugin.

Configuración del plugin

En la parte superior de mi plugin estoy añadiendo las siguientes líneas:


1. Añadir un logotipo personalizado

Es fácil añadir tu propio logotipo o el de tu cliente a la página de inicio de sesión e instantáneamente hacer que tu instalación de WordPress se vea más profesional.

  1. Primero, crea una carpeta llamada media dentro de tu carpeta de plugins, y sube tu logo a ella.
  2. En el archivo del plugin (o archivo de funciones), añade la siguiente función, adjuntándola al gancho de acción login_enqueue_scripts:

Esto agregará tu logo a la pantalla de ingreso, como se muestra en la captura de pantalla.

customizing-the-wordpress-admin-part1-login-screen-with-custom-logocustomizing-the-wordpress-admin-part1-login-screen-with-custom-logocustomizing-the-wordpress-admin-part1-login-screen-with-custom-logo

2. Estilo de la pantalla de inicio de sesión

Además de añadir un logotipo, también puedes cambiar su tamaño para que se ajuste y añadir estilo para otros elementos de la pantalla.

Estilo del logo

El logo de arriba está ligeramente aplastado para que se ajuste al espacio predeterminado que se le ha dado. Voy a ajustar el tamaño.

Edita el código de tu plugin para que se lea como sigue:

El valor de altura que utilices dependerá de la relación de aspecto de tu logotipo. El uso de 300px y auto para la propiedad de background-size asegure que tu logotipo sea tan ancho como el cuadro de conexión y que su relación de aspecto se mantenga, y el valor de height proporcionará suficiente espacio para que tu logotipo encaje.

Ahora mi logo se ve así:

customizing-the-wordpress-admin-part1-login-screen-with-custom-logo-resizedcustomizing-the-wordpress-admin-part1-login-screen-with-custom-logo-resizedcustomizing-the-wordpress-admin-part1-login-screen-with-custom-logo-resized

¡Mucho mejor! Pero dimensionar el logo no es lo único que puedo hacer con respecto al estilo. ¿Qué tal si cambiamos algunos colores?

Enlaces de estilo

Todo el texto que se muestra en la página de inicio de sesión es en forma de enlaces, así que son enlaces que tendrás que estilizar. Edita tu código de nuevo para que se lea como sigue:

Esto me da enlaces que están en concordancia con los colores de mi logo. El color de los enlaces es cian y el color de los cierres es magenta.

customizing-the-wordpress-admin-part1-login-screen-with-restyled-linkscustomizing-the-wordpress-admin-part1-login-screen-with-restyled-linkscustomizing-the-wordpress-admin-part1-login-screen-with-restyled-links

Nota: Como el color principal de mi logo es similar al azul, funciona bien para los enlaces. Puede que no quieras cambiar el color de tus enlaces si tu logo es de un color muy diferente, para evitar problemas de usabilidad.

Estilizar el botón

El último elemento de la pantalla es el botón "Log In", que sigue siendo azul. Cambiemos eso. Edita tu código para que se lea como sigue:

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.


Resumen

Personalizar la pantalla de inicio de sesión de WordPress es sencillo y puede marcar una gran diferencia en la impresión que tu sitio da a los usuarios y clientes que inician sesión. Ajustando el código anterior para satisfacer tus necesidades y reflejar tu marca, puede crear una pantalla de inicio de sesión muy profesional en muy poco tiempo.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.