Cómo personalizar tu login de WordPress

Lo primero que te preguntarás al leer este artículo es por qué debemos personalizar el logo de la pantalla de login de WordPress y de la administración. Pues bien, la razón fundamental es que con ello transmitiremos a nuestros clientes una imagen de profesionalidad, y no nos llevará mucho tiempo.

Está claro que no es lo mismo entregar una web en la que para entrar en la administración aparezca el logo de WordPress con sus colores, idéntico a la de todos los sitios web hechos con el mismo CMS, que entrar en un login en el que aparezca el logo de una empresa y sus colores corporativos.

 

1

Pasos para personalizar los logos de la pantalla de acceso a la administración de WordPress

Para cambiar y personalizar esta pantalla tenemos dos opciones.

  1. Hacerlo mediante un plugin: esto tiene su ventaja y su desventaja. La ventaja es que no necesitarás tocar código si no tienes mucha experiencia. La desventaja es que cuántos más plugins tengas instalados en tu WordPress más actualizaciones tendrás que hacer y menos seguro es.
  2. Hacerlo de manera manual: de esta forma tendrás que añadir unas líneas de código en tu fichero functions.php pero no tendrás que estar buscando un plugin que te funcione bien ni tendrás que estar pendiente de actualizaciones.

Aprovechando que hemos creado nuestro tema hijo lo haremos en él para que si actualizamos el WordPress no nos quedemos sin la personalización. Vamos a ello.

  1. Seleccionamos el logo que queramos poner. El logo de WordPress es de 84×84 pixels. Si el logo se adapta bien a esas medidas, perfecto, si no, habrá que cambiar un poco el estilo…
  2. Creamos en nuestro tema hijo una carpeta que se llame login y dentro guardamos la imagen que vayamos a utilizar.

4

  1. Abrimos nuestro functions.php que hemos creado en el tema hijo y escribimos el siguiente código cambiando el nombre del archivo por el que le hayamos dado a nuestro logo:2
  2. A continuación tenemos que hacer que el link del logo lleve a la página web y no a la de WordPress que es la que viene por defecto. Para esto, añadimos a continuación el siguiente código:

5

  1. Por último, tendremos que cambiar el texto que aparece al pasar por encima del logo, que por defecto es “Funciona gracias a WordPress”. Para cambiar este texto, basta con añadir las siguientes líneas escribiendo el nombre que queramos que aparezca en el lugar de “Nombre de la empresa”:6
  2. Por último, si vemos que el logo no queda a nuestro gusto porque se ve muy grande o muy pequeño, podemos cambiarle es estilo para que se vea como queramos. Por ejemplo, si nuestro logo no es de 84×84 podemos darle en el estilo nuestras medidas para que quede perfectamente acoplado. En el ejemplo, nosotros hemos creado un logo de 147x84px por lo que hemos cambiado el tamaño del fondo y el alto y el ancho del tamaño de nuestro logo. Para que quede más separado de los campos del login le hemos dado algo más de espacio con el padding-bottom.3

En nuestro caso, el código completo quedaría de la siguiente manera.

7

Una vez que hemos hecho cambiado el logo, su url y el texto, podremos cambiar a través del CSS los colores de los campos del login, el botón… todo lo que queramos.

8

¿Qué piensas ahora sobre lo de personalizar la administración? ¿Merece la pena, no? Pues… ¡Adelante! ¡Marcarás la diferencia!

Comparte en tus redes ...Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Facebook
Facebook
Email this to someone
email
Print this page
Print
Marta Cabrera on Linkedin
Marta Cabrera
Máster en Gestión de la Información y Marketing Digital.

¿Quieres dejarnos algún comentario?