Cada nueva instalación de WordPress viene con una barra de herramientas que contiene, entre otros componentes, el logo oficial de WordPress, pero sería más profesional con el logo de tu marca. En este tutorial te explico cómo cambiar el logo de barra de herramientas en WordPress.
Barra de Herramientas de WordPress
La barra de herramientas, o barra de administración anteriormente, es un conjunto de elementos que representan los accesos rápidos a los componentes y menús de la administración.
Esos elementos de la barra son muy útiles para llegar a las secciones más usadas en el gestor de contenido de WordPress, para crear contenido de forma eficaz y rápida.
Entre estos elementos, aparece en el extremo izquierdo el logo oficial de WordPress, con un enlace que te lleva a la información de la actualización más recientes.
Afortunadamente con WordPress puedes cambiar casi todo, y el logo también. En este tutorial te explicaré cómo cambiar el logo de barra de herramientas para darle una apariencia más personalizada y profesional.
Cambiar Logo de Barra de Herramientas
Antes de realizar cualquier cambio en los archivos de tu instalación, es importante siempre crear una copia de respaldo (backup) completo de los archivos de tu instalación, junto con un backup de la base de datos de WordPress.
Primero es necesario que dispongas de la imagen que vas a usar en lugar del logo oficial de WordPress. La imagen debe ser con la dimensión 16x16px para que se ajuste al espacio de forma adecuada.
Para cambiar el logo de barra de herramientas en WordPress, necesitas insertar un código en el ecosistema de tu sitio web para que tenga efecto.
function logo_barra_herramientas() { echo ' <style type="text/css"> #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before { background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/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> '; } add_action('wp_before_admin_bar_render', 'logo_barra_herramientas');
Este es todo el código que necesitas. Hay dos formas para incrustarlo. Puedes pegarlo en el archivo de functions.php de tu tema actual, recomendablemente un tema hijo (child theme).
El segundo método es crear un plugin personalizado en WordPress, para pegar ahí cualquier código que quieres enganchar en el ecosistema de tu sitio web.
Asegúrate de modificar la ruta de la imagen que deseas utilizar para que apunte a la ubicación adecuada. En el código de arriba el logo de tu marca debe ir en la carpeta ~/wp-content/tu-tema/images/ de tu instalación. Si no existe la creas.
Como puedes observar en esta imagen, el logo de WordPress desapareció, y ahora en su lugar aparece el logo oficial de WPBody en la barra de administración.
Si lo que estás buscando es quitar el logo de barra de tu administración, entonces te recomiendo ver mi tutorial anterior de cómo eliminar el logo de barra de herramientas de forma correcta.
También puedes encontrar aquí todos los tutoriales de la barra de herramientas, para añadir, quitar o personalizar un determinado elemento.
Esto es todo. Te invito a seguir la página de WPBody en facebook y twitter, para que obtengas todos los recientes tutoriales de seguridad y optimización de WordPress.