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 logo personalizado en el panel aparece en el panel de administración de WordPress con tu propio logo 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.
• Etiquetado blanco: Si estás creando sitios web para clientes o administrando una red multisitio, puedes usar logotipos personalizados en el panel para etiquetar el área de administración de WordPress. Esto significa que puedes eliminar por completo la marca de WordPress y reemplazarla con la tuya para crear una experiencia personalizada para tus clientes.

Ya sea que tengas una tienda en línea, un pequeño negocio o un blog, un logotipo personalizado en el panel es importante para ayudar a personalizar la experiencia del backend y establecer una fuerte 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.

• Método 1: Agregar un logotipo personalizado en el panel de WordPress usando un plugin
• Método 2: Agregar manualmente un logotipo personalizado en el panel de WordPress
• Alternativa: Eliminar el logotipo de WordPress del panel de administración

¿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 necesitas hacer es instalar y activar el plugin White Label CMS. Si necesitas ayuda, puedes ver 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 más información, puedes consultar nuestra guía sobre cómo personalizar la marca del 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 tu WordPress es con un plugin como WPCode.

La mayoría de los tutoriales que te enseñan cómo agregar shortcodes a tu sitio de WordPress te pedirán que agregues el código al archivo functions.php de tu 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ás instalar y activar el plugin gratuito WPCode. Para obtener instrucciones más detalladas, querrás 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 tengas tu logo personalizado listo, lo subirás a la carpeta /wp-content/themes/your-theme/images usando FTP. Si tu tema no tiene una carpeta de imágenes, deberás 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 1,500 fragmentos de código listos para usar, incluido uno para eliminar el logo de la barra de administración de WordPress, que puedes utilizar para personalizar tu sitio rápidamente, sin necesidad de experiencia en codificación.

Para empezar, necesitas instalar y activar el plugin gratuito WPCode. Si necesitas ayuda, puedes 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 te haya ayudado a aprender cómo agregar un logo personalizado al panel de administración en WordPress. A continuación, también puedes consultar nuestra guía sobre cómo ocultar elementos innecesarios del administrador 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 obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.