En este tutorial veremos cómo cambiar el logotipo de WordPress en el wp-login. Por defecto, cuando entramos en wp-login (o en wp-admin) aparece el logotipo de WordPress.
Este cambio es puramente estético pero siempre mola ver tu logo personal (o de empresa) cuando accedes al panel de administración de tu WordPress.
Aunque haya muchos plugins en el repositorio que ya realizan esta función, lo haremos mediante código.
No soy muy partidario de instalar tropocientos plugins para hacer pequeños cambios cómo este. Siempre es mucho mejor añadir unas pocas líneas de código en tu functions.php del tema (o mejor aún, en un plugin personalizado) antes que optar por un plugin de terceros.
Cómo veremos, es súper sencillo de implementar. No hace falta saber nada de programación, simplemente copiar y pegar código.
¡Vamos a ello!
Cambiando el logotipo del wp-login
Cómo he mencionado antes, tendremos que añadir unas líneas de código en nuestro plugin personalizado, o a malas, en nuestro archivo functions.php del tema.
El código es el siguiente:
/* Cambiar imagen que aparece en wp-login */
function jc_change_image_logo() {
?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(https://www.joelcantero.com/contenido/joel-cantero-favicon.png);
background-repeat: no-repeat;
background-size: cover;
height: 150px;
width: 150px;
}
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'jc_change_image_logo' );
Fíjate que simplemente añadimos unas clases CSS al logo del wp-login. Para indicarle el logo que queremos añadirle, tendremos que cambiar el atributo del «background-image».
En mi caso, he seleccionado el favicon de mi página web, puedes aprovechar una imagen que tengas en tu carpeta de medios (Medios, Biblioteca) y copiar el URL de la imagen.
Cuando tengas la URL de tu imagen, simplemente sustitúyelo dentro de:
background-image: url(https://www.tupaginaweb.com/contenido/tu-imagen.png);
Si tu logo o imagen es tiene el formato PNG y de color transparente, quedará muy bien con el fondo de la página de wp-login.
Por otro lado, también podemos elegir el tamaño de la imagen modificando las propiedades CSS height y width.
height: 150px;
width: 150px;
Resumen y conclusión
¿A que ha sido fácil? Simplemente con unas líneas de código podemos personalizar esta página de login que tantas y tantas veces accedemos.
Aunque este tutorial no aporta nada funcional, ayuda que tu página web transmita más tu marca personal y no se vea más el logo de WordPress.
¿Te gustaría ver más tutoriales de diseño como este? Házmelo saber y tendréis más en un futuro 🙂