Cómo agregar un logo personalizado al panel de WordPress

En WPBeginner, recibimos muchas preguntas de usuarios que quieren personalizar WordPress. ¿Una de las solicitudes más comunes? Cambiar el logo predeterminado de WordPress por un logo personalizado en el panel.

Reemplazar el logo de WordPress con tu propio logo personalizado es una excelente manera de darle marca a tu área de administración y hacer que tu sitio se sienta verdaderamente único.

Ya sea que administres el sitio tú mismo o tengas un equipo de usuarios, un logo personalizado en el panel es un buen detalle que hace que el sitio se sienta más profesional.

En este artículo, te mostraremos cómo agregar un logo personalizado en el panel de WordPress para branding.

¿Qué es un logo personalizado en el panel y por qué agregar uno? 

Un logotipo personalizado del panel aparece en el panel de administración de WordPress con su propio logotipo o marca personalizada.

Si bien agregar uno puede parecer un detalle menor, es una parte vital de la marca de tu sitio web y es importante por varias razones:

• Branding: Refuerza la identidad de tu marca y hace que el área de administración de WordPress se sienta más como parte de tu negocio.
• Profesionalismo: Un logo personalizado en el panel le da a tu sitio de WordPress un aspecto más profesional y pulido.
• Marca blanca: Si está creando sitios web para clientes o ejecutando una red multisitio, puede usar logotipos personalizados del panel para aplicar marca blanca al área de administración de WordPress. Esto significa que puede eliminar por completo la marca de WordPress y reemplazarla con la suya propia para crear una experiencia personalizada para sus clientes.

Ya sea que posea una tienda en línea, un pequeño negocio o un blog, un logotipo personalizado del panel es importante para ayudar a personalizar la experiencia del backend y establecer una sólida identidad de marca interna.

En las siguientes secciones, te mostraremos 2 métodos diferentes para agregar un logotipo personalizado en el panel de WordPress, así como un método para simplemente eliminar el logotipo de WordPress del panel.

¿Listo? Empecemos.

Método 1: Agregar un logotipo personalizado en el panel de WordPress usando un plugin

Este método es súper fácil y recomendado para la mayoría de los principiantes.

Lo primero que debe hacer es instalar y activar el plugin White Label CMS. Si necesita ayuda, puede consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, deberás visitar Configuración » White Label CMS desde tu panel de WordPress. 

Luego, asegúrate de estar en la pestaña 'Branding'.

Desde aquí, puedes cambiar el interruptor de izquierda a derecha a ‘Ocultar logo y enlaces de WordPress’.

A continuación, querrás ir a la pestaña ‘Panel’.

En ‘Icono del Panel’, subirás un logo personalizado. Simplemente haz clic en el enlace ‘Subir’ para iniciar el proceso.

Tu logo personalizado debe tener exactamente 40 x 40 píxeles de dimensiones. De lo contrario, se verá raro, ya sea recortado o estirado.

No olvides hacer clic en el botón ‘Guardar’ en la esquina superior derecha para guardar tus cambios.

Ahora, regresemos al área de administración de WordPress y abramos el panel ‘Panel’.

En este panel, deberías ver el nuevo logo personalizado. Así es como podría verse:

Además del logo personalizado del panel, el plugin White Label CMS también ofrece otras funciones para rediseñar tu instalación de WordPress.

Para obtener más información, puede consultar nuestra guía sobre cómo aplicar marca blanca al panel de administración de WordPress.

Método 2: Agregar manualmente un logotipo personalizado en el panel de WordPress

Este método es para usuarios que se sienten cómodos pegando fragmentos de código en WordPress. La forma más fácil y segura de agregar código personalizado a su WordPress es con un plugin como WPCode.

La mayoría de los tutoriales que le enseñan cómo agregar shortcodes a su sitio de WordPress le pedirán que agregue el código al archivo functions.php de su tema. Si bien puede funcionar, hay muchas cosas que pueden salir mal.

Incluso un pequeño error en el código o en la forma en que lo agregas puede dañar tu sitio de WordPress y hacerlo inaccesible. Por lo tanto, solo lo recomendamos para usuarios avanzados.

Incluso para usuarios avanzados, WPCode es la forma más segura de hacerlo.

Entonces, para empezar, necesitará instalar y activar el plugin gratuito WPCode. Para obtener instrucciones más detalladas, querrá seguir nuestra guía sobre cómo instalar un plugin de WordPress.

A continuación, asegúrate de guardar tu logo personalizado como un archivo custom-logo.png en tu computadora. Debe tener exactamente 40 x 40 px de dimensiones.

Una vez que tenga su logotipo personalizado listo, lo cargará a la carpeta /wp-content/themes/su-tema/images usando FTP. Si su tema no tiene una carpeta de imágenes, deberá crearla.

Desde allí, puedes dirigirte a Fragmentos de código » +Agregar fragmento.

Luego, llegarás a la biblioteca de WPCode, donde hay docenas de fragmentos de código para elegir.

Aquí, querrás seleccionar 'Agregar tu código personalizado' y hacer clic en el botón 'Usar fragmento'.

En el editor, le darás un título al fragmento, por ejemplo, 'Logo personalizado del panel'.

Luego, deberás configurar el 'Tipo de código' en 'Fragmento de PHP'.

Después de eso, simplemente agrega este código en el cuadro 'Vista previa del código':

function wpb_custom_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/custom-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>
';
}

//hook into the administrative header output
add_action('wp_before_admin_bar_render', 'wpb_custom_logo');

Debería verse algo así:

Antes de continuar, asegurémonos de que todo el texto y el formato sean exactamente iguales a los que se muestran arriba.

si todo se ve bien, puedes desplazarte hacia abajo hasta 'Método de inserción' y seleccionar 'Inserción automática'.

Para asegurarte de que tu logo personalizado aparezca en el panel, querrás expandir el menú desplegable 'Ubicación' y elegir 'Solo administrador'.

Por último, puedes cambiar el interruptor de Inactivo a Activo y hacer clic en el botón 'Guardar'.

Este código simplemente agrega el CSS necesario para mostrar tu logo personalizado en la barra de administración de WordPress.

Alternativa: Eliminar el logotipo de WordPress del panel de administración

Si prefieres simplemente eliminar el logo de WordPress del panel de administración por completo sin reemplazarlo con un logo personalizado, este método es para ti.

Como mencionamos anteriormente, WPCode es el mejor plugin de fragmentos de código, y facilita agregar código personalizado a WordPress.

Aún mejor, viene con una biblioteca de más de 1500 fragmentos de código listos para usar, incluido uno para eliminar el logotipo de la barra de administración de WordPress, que puede usar para personalizar rápidamente su sitio, sin necesidad de experiencia en codificación.

Para comenzar, necesita instalar y activar el plugin gratuito WPCode. Si necesita ayuda, puede seguir nuestro tutorial sobre cómo instalar un plugin de WordPress.

Una vez activado, deberás ir a Fragmentos de código » Biblioteca desde el panel de administración de WordPress.

Desde allí, puedes buscar el fragmento de código ‘Eliminar el logo de WordPress de la barra de administración’. Una vez que lo encuentres, simplemente pasa el cursor sobre él y haz clic en el botón ‘Usar fragmento’.

WPCode agregará automáticamente el código por ti.

También seleccionará el método de inserción adecuado y agregará etiquetas para ayudarte a hacer un seguimiento del código que estás utilizando en tu sitio.

Ahora, es hora de activar el fragmento de código.

Todo lo que necesitas hacer es cambiar el interruptor en la parte superior de la página de ‘Inactivo’ a ‘Activo’ y presionar el botón ‘Actualizar’.

Eso es todo; ahora has eliminado el logo de WordPress del panel de administración.

Esperamos que este artículo le haya ayudado a aprender cómo agregar un logotipo personalizado al panel en WordPress. A continuación, también puede consultar nuestra guía sobre cómo ocultar elementos innecesarios de WordPress con Adminimize o leer nuestras selecciones expertas de plugins y consejos para mejorar el área de administración de WordPress.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.