En este artículo voy a mostrarte cómo personalizar la página de login de WordPress. Voy a enseñarte cómo lo he hecho sin utilizar plugins.
Esta página es muy importante en nuestra página web, sobretodo si hablamos de negocios donde existen muchos usuarios que deben pasar por la misma para acceder al panel de administración de la web.
Si realizo una página web a un cliente, esta página siempre la cambio para que exista coherencia entre su diseño y la marca del cliente.
El cambio más recurrente es el del logotipo, pero verás cómo podemos realizar más cambios.
Pagina de login de WordPress
Lo primero que me gustaría es enseñarte la página que vamos a modificar. Es esta:
Como ves tenemos una interfaz bastante sencilla, en la que por defecto aparece el logo de WordPress, con un campo para introducir nuestro nombre de usuario o correo electrónico. Y otro campo para la contraseña.
En función de la configuración de tu página web, es posible que también aparezca un campo de registro, pero por norma general suele aparecer así.
Cambiar logo de la página de login de WordPress.
Para realizar este cambio voy a crear mi propio plugin personalizado. De esta manera evito insertar el código directamente en el archivo functions.php de mi child theme y arriesgar perder esta modificación con cualquier actualización del mismo.
Los pasos que sigo son:
Creo un plugin, y dentro de ese plugin un archivo .php que contendrá las funciones necesarias para realizar el cambio de diseño de esta página. El resultado que verás en comparación con la página por defecto que propone WordPress es la siguiente:
Como puedes ver he cambiado el logo de WordPress por el de mi marca.
Aún asi podemos hacer algunas cosas más.
Cambiar el color de fondo de la página de login de WordPress.
Como habrás visto en la última imagen que ves en esta entrada, además del logotipo también he cambiado el color del fondo. Todos estos cambios se realizan por CSS, lo que ocurre es que se usan entre código PHP.
Para realizar el cambio del fondo he asignado a la etiqueta .login el código «Background-color: white;«, y poco más. Sólo con este cambio ya he cambiado el color de fondo.
Cambiar el enlace del logotipo en la pagina de login en WordPress
El cambio del enlace que hay por defecto en la imagen de la página de login puede sustituirse por uno que no remita a la página de WordPress y lo haga a la página de inicio de tu web.
Para hacerlo he añadido por PHP un filtro que dice a wordpress que cuando pulsen en la imagen lleven al visitante a la home de mi web. Algo así:
Como conclusión comentar que es posible realizar un montón de cambios también en esta página de tu web. Importante sobretodo de cara a la presentación de tu trabajo a tus clientes. Hemos realizado la sustitución del logo de WordPress por el nuestro, hemos modificado el color de fondo, y hemos personalizado el enlace de la imagen.
Son algunos ejemplos, pero podríamos realizar muchos más, como colocar una imagen de fondo, personalizar las sobras de la caja del formulario, o cambiar el color del botón serían otras posibilidades.
Si no quieres entretenerte realizando estos cambios tú, puedes contactar conmigo para pedirme presupuesto y hacértelo yo mismo más rápido.