Cómo agregar o cambiar íconos de administración de WordPress: una guía sencilla 

Como sabes, existen muchas maneras de mejorar la experiencia de usuario en el diseño web, y una de ellas es añadir o cambiar los iconos de administración de WordPress. Personalizar tu panel de WordPress no se trata solo de la apariencia, ¡sino de hacer que tu sitio sea más fácil y agradable de usar! Una forma rápida de empezar es añadiendo o cambiando los iconos de administración.

Los iconos personalizados pueden agilizar tu flujo de trabajo y facilitar la navegación, especialmente para los nuevos usuarios. Además, un panel personalizado resulta mucho más acogedor y agradable de usar

Hoy exploraremos qué son los iconos de administración de WordPress, te mostraremos cómo añadir iconos fácilmente con un plugin y exploraremos cómo usar una fuente de iconos de WordPress. ¿Listo para mejorar la experiencia de usuario de tu sitio? ¡Comencemos!

Comprensión de los iconos de administración de WordPress

de WordPress son esas pequeñas imágenes que aparecen junto a cada elemento del menú en el panel de control. Ayudan a que el panel de navegación sea más intuitivo y visualmente organizado. Por defecto, WordPress utiliza Dashiconsde iconos fuente que existe desde 2013 y que no ha sufrido grandes cambios desde entonces.

Si quieres renovar tu área de administración de WordPress, ¡cambiar estos iconos puede ser un buen punto de partida! Puedes cambiar los iconos predeterminados por otros que se adapten mejor a tu estilo o incluso añadir tus propios iconos personalizados para una apariencia verdaderamente personalizada.

Los iconos son muy útiles porque son universalmente reconocibles y facilitan que los usuarios encuentren lo que necesitan, ya sea una página de inicio de sesión, un artículo específico u otras secciones clave del sitio. Esto puede ser especialmente útil si trabajas en un sitio web multilingüe o con una audiencia internacional.

Para los clientes de diseño web que no están familiarizados con WordPress, los íconos personalizados pueden simplificar la navegación en el panel de administración y hacer que la experiencia se sienta adaptada a ellos.

Obtenga información sobre: ​​¿Cómo solucionar los íconos de Elementor que no se muestran?

Cómo agregar o cambiar los íconos de administración de WordPress: dos métodos

Ahora que conoces la función de los iconos de administración de WordPress, es hora de entender cómo añadirlos o cambiarlos. Hay dos maneras de modificarlos fácilmente. La primera es usar un plugin, lo cual es rápido y sencillo. La segunda es cambiarlos con un fragmento de código.

Analizaremos ambos métodos para ayudarte a decidir cuál te funciona mejor. Profundicemos en ello:

Cómo agregar o cambiar los íconos de administración de WordPress usando un complemento

Si eres nuevo en esto de añadir iconos en WordPress, usar un plugin es la forma más sencilla de empezar. En esta guía, te mostraremos cómo añadir iconos usando el Font Awesome .

Para obtener íconos en su sitio de WordPress con Font Awesome, siga estos sencillos pasos:

Instalar y activar el complemento.

Primero, inicie sesión en su panel de WordPress, luego vaya a Complementos e instale y active el complemento Font Awesome.

Ajuste la configuración del complemento según sea necesario.

Tras la activación, se te redirigirá a la de Plugins instalados . Busca Font Awesome y haz clic en Configuración. El plugin está configurado para usar iconos web gratuitos a través de la CDN por defecto, así que si estás conforme con eso, ya está todo listo.

Saber: ¿Cómo eliminar usuarios administradores invisibles de WordPress?

Si quieres iconos tanto gratuitos como de pago, tendrás que crear un kit de Font Awesome, obtener un token de API y añadirlo a la configuración del plugin. (Pero si solo buscas iconos básicos, ¡puedes saltarte este paso!). Cuando termines, no olvides hacer clic en Guardar cambios.

Añade el icono donde quieras que aparezca.

¡Ahora viene lo divertido! Puedes añadir iconos de Font Awesome usando un shortcode o un HTML . El formato del shortcode es [icon name= “value”]. Simplemente reemplaza “value” por el nombre del icono que quieras. Por ejemplo, para añadir un icono de premio, usa [icon name= “award”].

Si te sientes más cómodo con HTML, puedes usar la sintaxis estándar de Font Awesome. Font Awesome proporciona fragmentos de HTML para cada ícono, así que solo tienes que copiarlos y pegarlos donde quieras que aparezcan.

Obtenga una vista previa de sus cambios.

Antes de publicar, previsualiza la publicación o página para asegurarte de que el ícono se vea bien. Si no aparece, verifica que estés usando un ícono gratuito y no uno premium.

Conozca también: ¿Cómo editar y personalizar sin problemas los encabezados en WordPress?

Método 2: Cómo agregar o cambiar manualmente los íconos del menú de administración mediante un fragmento de código

Si estás dispuesto a realizar un poco de trabajo práctico, puedes personalizar tus íconos de administrador agregando un poco de código.

Antes de comenzar, le recomendamos consultar una guía rápida sobre cómo agregar código personalizado de forma segura en WordPress si aún no lo ha hecho.

La forma más fácil y segura de hacerlo es con el WPCode , ideal para añadir código personalizado, CSSy HTML sin riesgo de dañar nada. Además, existe una versión gratuita (WPCode Lite) que cumple su función, aunque la versión Pro incluye algunas características adicionales muy útiles.

Ejemplo: Reemplazo de un ícono usando los Dashicons predeterminados

En este ejemplo, usaremos Dashicons (el conjunto de iconos integrado de WordPress) para reemplazar un icono existente. Dado que los Dashicons están optimizados para WordPress, no ralentizarán tu sitio.

Esto es lo que necesitarás antes de comenzar:

• La URL del elemento del menú que desea actualizar
• El nombre del icono que quieres utilizar

Supongamos que quieres cambiar el icono del menú "Publicaciones". Simplemente pasa el cursor sobre el elemento del menú "Publicaciones" en tu panel y verás la URL en la barra de estado de la parte inferior del navegador. Solo necesitas la última parte; en este caso, sería edit.php.

A continuación, dirígete al sitio web de Dashicons, busca el ícono que deseas y copia su “slug” (como dash icons-format-aside).

Ahora, agreguemos el código:

1. Ve a Fragmentos de código » Agregar fragmento en tu panel de control.
2. Haga clic en + Agregar fragmento personalizado y asígnele un título a su fragmento.
3. Seleccione Fragmento de PHP en Tipo de códigoy luego pegue el siguiente código en el editor:

function change_post_menu_icon() {global $menu;// Recorrer los elementos del menúforeach ($menu as $key => $menu_item) {// Encontrar el elemento de menú “Publicaciones” (la URL predeterminada es 'edit.php')if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {// Cambiar el ícono a una clase Dashicon diferente$menu[$key][6] = 'dashicons-format-aside'; // Cambie esto a su slug Dashicon preferido}}}add_action('admin_menu', 'change_post_menu_icon');

Simplemente reemplace dashicons-format-aside con el slug del ícono que copió anteriormente.

Una vez que el código esté en su lugar, desplácese hacia abajo hasta la Inserción , establezca la Ubicación en 'Solo administrador' y cambie el fragmento a Activo. Luego haga clic en Guardar fragmento.

¡Ahora, WordPress comenzará a usar el ícono que elegiste para la página de Publicaciones, así de fácil!

Relacionado: Cómo configurar códigos cortos de Elementor para facilitar el uso de plantillas

Terminando

Como ves, no es difícil añadir o cambiar los iconos de administración de WordPress. Una vez que comprendas su esencia y función, te ayudarán a mejorar y optimizar el diseño de tu sitio web y la experiencia del usuario.

Ya sea que uses un plugin para intercambiar íconos rápidamente o intentes agregar código personalizado para un enfoque más práctico, el proceso es sencillo y puede marcar una gran diferencia, especialmente para clientes o usuarios que no están familiarizados con WordPress. ¡Así que adelante, renueva tu área de administración y hazla realmente tuya!