En este pequeño artículo vamos a ver cómo cambiar el logotipo de WordPress en nuestro wp-login. Cuando entramos en wp-login (o en wp-admin), por defecto aparece el logotipo de WordPress.
Este cambio es puramente estético pero añade profesionalidad a tu sitio que se vea el logo personal (o de empresa) cuando accedes al panel de administración de tu WordPress.
Aunque existen muchos plugins en el repositorio que realizan esta tarea, lo que vamos a hacer en este artículo es generarlo mediante un sencillo código.
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 muy fácil 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
Como hemos comentado, 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://sutilweb.com/contenido/mi-logo.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.
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/mi-logo.png);
Si tu logo o imagen tiene el formato PNG y de color transparente, quedará muy bien con el fondo de la página de wp-login.
También podemos elegir el tamaño de la imagen modificando las propiedades CSS height y width.
height: 150px;
width: 150px;
Conclusión
Como podemos ver, simplemente con unas líneas de código se puede personalizar esta página de login a la que tantas veces accedemos.