La pantalla de login de WordPress no tiene nada malo: es sobria y funcional. Sin embargo a veces, por las características de nuestra plataforma, necesitamos que clientes o colaboradores la utilicen para entrar en su cuenta de usuario y queremos dar una imagen completa de marca. Afortunadamente, el login de WordPress se puede personalizar.

En esta entrada vamos a ver cómo hacerlo paso a paso, cambiando el logotipo, los colores, la tipografía y el fondo, de manera que la adaptemos por completo a nuestra imagen corporativa.

Por qué personalizar la pantalla de inicio de sesión

Admitámoslo: esto no es lo más oportuno a la hora de dar una experiencia de marca:

Si quieres dar una imagen de marca, potenciando tu propio logo y tus colores corporativos ante clientes, colaboradores e incluso curiosos, quizá algo así es mucho más deseable:

Sí, cierto, no añade ninguna funcionalidad ni mejora WordPress en ningún aspecto, pero la imagen siempre es importante, tanto para marcas como para profesionales.

Además un plugin que realice estos cambios no carga ni ralentiza la web, ya que (si está bien hecho) no debe añadir nada en el front-end, en la parte de la web que ven los visitantes. Así que, si suma y no resta, ¿por qué no hacerlo?

Personalizar el login paso a paso

Así que pongámonos manos a la obra. Ya verás que es muy fácil y rápido. Para conseguirlo vamos a utilizar el plugin WIP Custom Login.

Aunque hay varios plugins de este tipo, yo utilizo éste porque funciona bien, implementa HTML5 y CSS3 (las últimas tecnologías web) y se actualiza regularmente, es decir, no está “abandonado”.

Personalizar el logotipo en el inicio de sesión

Una vez instalado y activado verás que aparece una nueva opción en el menú de administración llamada precisamente WIP Custom Login. Pinchando en ella encontrarás una pantalla como ésta:

Como ves hay cuatro pestañas: Logo, Background, Form e Import/Export. Vamos a empezar por la primera de ellas, Logo, que es para personalizar el inicio de sesión sustituyendo el logotipo de WordPress por el tuyo propio.

La anchura que hay disponible para tu propio logotipo es de 350 píxeles. Más adelante, cuando llegue el momento de personalizar el formulario, verás que esto se puede aumentar, pero no es muy recomendable: hay que tener en cuenta a los usuarios de dispositivos móviles.

Si subes un logotipo más grande que esos 350 píxeles se redimensionará, pero como vamos a ver a la hora de establecer la altura, mejor que lo subas como mucho de ese ancho. Si hace falta, redimensiónalo tú mismo. Ya sabes que para ello puedes utilizar la utilidad incluida en la biblioteca de medios.

Fíjate bien en la altura del logotipo, porque tendremos que establecerla manualmente en la opción Logo height. Por eso te decía que mejor ponerla ya redimiensionada: así tendrás claro qué altura tiene.

La opción Logo width (anchura del logotipo) la puedes dejar en 100%. Después podrás jugar con ella si descubres que no te gusta tan grande. Una vez hecho esto y establecida la altura en píxeles pulsamos Save, y listo. El resultado:

Ya tenemos nuestro logotipo en lugar de que se muestre el de WordPress. Ahora vamos a ir un paso más allá y personalizaremos el fondo. Para ello vamos a ir a la pestaña Background.

Personalizar el fondo en la pantalla de inicio de sesión

Aquí verás varias opciones, que básicamente se reducen a dos: poner como fondo una imagen (Custom image background) o un color sólido (Background Color). Es más recomendable utilizar un color, ya que para una imagen tendrás tres opciones:

• Usar una imagen grande, que ocupe toda la pantalla, con lo que la carga se hará muy lenta (no tiene sentido, en una pantalla de login).
• Hacer que la imagen se repita hasta ocupar toda la pantalla mediante la opción Repeat. No es mala opción si usas uno de esos patrones sin fin.
• Mostrar la imagen una sola vez, alinéandola mediante la opción Background Position.

Como ves, ninguna de las tres alternativas es muy recomendable, salvo en casos concretos. De cualquier forma, si consigues una imagen suficientemente grande pero bien optimizada para no pesar mucho, puede quedar muy bien.

Yo he conseguido algo así con una imagen que presenta un degradado como el del logotipo del ejemplo. El resultado es, como puedes ver, bastante aparente:

Personalizar el formulario de inicio de sesión

Por último, vamos a ver cómo personalizar el formulario (la opción Import/Export sólo sirve para exportar la configuración y volverla a importar en otra web). Para eso nos vamos a la pestaña Form.

En ella puedes elegir la fuente para los textos de la pantalla de inicio de sesión (más de 600 fuentes de Google Fonts disponibles, en el ejemplo he utilizado Lobster), los colores para el texto y los enlaces, el del fondo y el borde de la caja de inicio de sesión y, por fin, el ancho de la misma.

Ten cuidado a la hora de utilizar esta última opción (la del ancho del formulario) y recuerda que ya la mayor parte del tráfico web (al menos en España) proviene de dispositivos móviles, y un ancho excesivo puede hacer que no se vea bien en smartphones. Si puedes evitar cambiar el ancho (350 píxeles por defecto), evítalo.

En fin, el resultado puede ser algo similar a esto (compáralo con la pantalla de inicio de sesión de WordPress):

Vídeo: personalizando la pantalla de inicio de sesión de WordPress, paso a paso

Y si eres de los que prefiere verlo en vivo y en directo, o si te ha quedado alguna duda, aquí te dejo un corto vídeo (unos 10 minutos) en el que puedes ver cómo hacerlo paso a paso, mejores prácticas, cosas a tener en cuenta, etcétera:

Conclusiones

Ya has visto que sencillo es, gracias a este plugin, personalizar la pantalla de inicio de sesión de WordPress. Si sólo la vas a utilizar tú no es algo muy útil, como podrás imaginar (aunque también puede hacerse, claro, que sólo la veas tú no quiere decir que no puedas “disfrutar” tu marca), pero algunos modelos de negocio puede necesitar que la utilicen también clientes y/o colaboradores, y mejorar el branding es siempre algo positivo.

Recuerda que configuraciones de este tipo están incluidas en mi servicio de mantenimiento web. Y, como siempre, si tienes alguna duda sobre este asunto o sobre cualquier otro tema relacionado con WordPress me tienes a tu disposición.