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:

La imagen que se refiere es al 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:

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 🙂