• Saltar a la navegación principal
  • Saltar al contenido principal

Joel Cantero

Data Scientist

  • ¿Quién soy?
  • Contactar
Cómo cambiar la imagen de WordPress en la barra de administración

Cambiar icono de la barra de administración de WordPress

Cuando escribí el tutorial de cómo cambiar la imagen del wp-login sin plugins, un usuario me preguntó lo siguiente:


¿Cómo cambio la imagen del logo de WordPress en el dashboard que sale en la esquina superior izquierda?

La imagen que se refiere es al icono de WordPress que aparece en la barra de administración:

Icono de WordPress que aparece en la barra de administración.
Icono de WordPress que aparece en la barra de administración.

De la misma manera que lo hicimos en el anterior tutorial, tampoco vamos a utilizar ningún plugin para modificar esta imagen. Unas sencillas líneas de código en nuestro plugin personalizado será suficiente.

¡Vamos a ello!

Cambiar imagen de WordPress de la barra de administración sin plugins

Para cambiar el logo de WordPress de la barra de administración simplemente tendremos que modificar nuestro plugin personalizado o el functions.php de nuestro tema:

function jc_change_icon_admin_bar() {
	
	echo '<style type="text/css">
	
			#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
				background-image: url(https://www.joelcantero.com/contenido/joel-cantero-wp-admin-bar.png) !important;
				background-size: cover;
				background-position: 0 0;
				color:rgba(0, 0, 0, 0);
			}
			
			#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
				background-position: 0 0;
			}
	</style>';
}
add_action('wp_before_admin_bar_render', 'jc_change_icon_admin_bar');

Fíjate que en tu caso tendrás que cambiar el enlace que aparece en «background-img: url()», sino aparecerá mi logo.

Para ello, tendrás que subir primero una imagen de dimensiones 20px por 20px en tus Medios, y copiar el enlace del archivo.

Quedará algo así:

    background-image: url(https://www.tu-web.com/contenido/tu-imagen.png);

Como ya podrás ver, la imagen es extremadamente pequeña. Para facilitaros la faena, te puedes descargar el icono PNG que utilizo yo. De esta manera sólo tienes que modificarlo (te recomiendo que utilices Photoshop) y reemplazarlo por tu icono.

Y este es el resultado:

Icono cambiado de WordPress en la barra administración. Ahora aparece mi logo.
Icono cambiado de WordPress en la barra administración. Ahora aparece mi logo.

Resumen y conclusion

Pues ya hemos visto un nuevo tutorial de cómo personalizar aún más nuestro WordPress. Aunque estos cambios solo se aprecian en nuestro dashboard (cuando estamos identificados como administrador), siempre luce muy bien.

Como siempre, si tienes alguna duda o me quieres proponer otro tutorial de diseño, házmelo saber. Disfruto mucho escribiendo tutoriales que me pidáis 🙂

© 2023 · Diseño web por Joel Cantero · Aviso legal · Política de cookies · Política de privacidad

  • Twitter
  • LinkedIn