Siguiendo con esta locura que me ha dado con personalizar la barra de herramientas de la administración de WordPress, en la que ya hemos visto cómo añadir elementos a la barra de administración, cómo quitar menús, como ocultar la barra de herramientas y cómo moverla abajo, hoy vamos a cambiar o quitar el logotipo de WordPress, que ya nos hemos hartado de verlo siempre ahí ¿no?
Índice de contenidos
Cómo quitar el logo de WordPress de la barra de administración
Para empezar vamos a saco, con todo, pues vamos a quitar completamente el logo de WordPress de la barra de administración, y en consecuencia el menú que de él aparece, todo.
Con una función
Para empezar, verás qué fácil, solo añade esta función al archivo functions.php del tema que tengas activo, o a un plugin de personalizaciones, que ya sabes que siempre te animo a tener para estas cosas:
/* Quitar logo barra admin */
function quitar_logo_wp_admin() {
global $wp_admin_bar;
$wp_admin_bar->remove_menu( 'wp-logo' );
}
add_action( 'wp_before_admin_bar_render', 'quitar_logo_wp_admin', 0 );Guarda los cambios y ya lo tienes.
Con un plugin
¿Que no te atreves con los códigos? No pasa nada, instala y activa este plugin, pásate por su página de ajustes y activa la casilla «Hide WordPress Logos» para ocultar el logo de WordPress de la barra de administración .
Da igual el método elegido, pasarás de esto:
A esto otro:
Cómo cambiar el logo de WordPress de la barra de administración
Si lo que prefieres es cambiar el logo de WordPress por otro, el de tu marca o de tu cliente, por ejemplo, entonces estás en el lugar adecuado, vamos a por ello.
Con una función
De nuevo, empezamos por una sencilla función, esta:
/* Cambiar logo barra admin */
function ayudawp_cambiar_logo_admin() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(AQUI_LA_RUTA_DE_TU_IMAGEN) !important;
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>
';
}
//gancho en la salida de la cabecera de admin
add_action('wp_before_admin_bar_render', 'ayudawp_cambiar_logo_admin');Lo único que tienes que tener en cuenta de este código es lo siguiente:
- Sube una imagen de logotipo que no sea muy grande, preferentemente de un máximo de 20 píxeles de alto, sino se cortará y quedará feo.
- Pon la ruta de tu imagen personalizada donde está el texto
AQUI_LA_RUTA_DE_TU_IMAGEN. Puede ser relativa o absoluta, lo que prefieras.
Un ejemplo con una ruta relativa sería así:
/* Cambiar logo barra admin */
function ayudawp_cambiar_logo_admin() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/logos/mi-logo.png) !important;
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>
';
}
//gancho en la salida de la cabecera de admin
add_action('wp_before_admin_bar_render', 'ayudawp_cambiar_logo_admin');En este ejemplo de arriba la imagen mi-logo-png estaría alojada en la carpeta /wp-content/themes/mi-tema-activo/logos/mi-logo.png.
Y aquí con una ruta absoluta:
/* Cambiar logo barra admin */
function ayudawp_cambiar_logo_admin() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(https://miweb.com/wp-content/uploads/2020/07/mi-logo.png) !important;
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>
';
}
//gancho en la salida de la cabecera de admin
add_action('wp_before_admin_bar_render', 'ayudawp_cambiar_logo_admin');Como siempre, tienes que añadir esta función, o al final del archivo functions.php del tema activo o a tu plugin de personalizaciones y ñapas.
Con un plugin
En este caso yo usaría el plugin White Label CMS, que tiene muchas más posibles personalizaciones, pero esta en concreto está aquí:
Simplemente subes tu logo y ya está.
De nuevo, acuérdate de que como mucho tenga una altura de 20 píxeles, de ancho puede ser un poco más grande, prueba con varios tamaños, pero la altura es el límite.
Sea cual sea el método elegido, podrías pasar del logo estándar de WordPress…
A otro que tú prefieras…
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
