Cómo añadir o cambiar los iconos de administrador de WordPress (2 métodos fáciles)

Personalizar su escritorio de WordPress puede mejorar la experiencia del usuario. Una forma sencilla de hacerlo es añadir o cambiar los iconos de administrador / administración.

Los iconos personalizados pueden mejorar su flujo de trabajo y facilitar a los nuevos usuarios la navegación por el área de administración de su sitio. Además, un Escritorio personalizado es más agradable de usar.

En este artículo, le mostraremos cómo añadir o cambiar los iconos de administrador de WordPress. Le guiaremos a través del proceso paso a paso. Al final, su escritorio de WordPress se verá fresco y único.

¿Qué son los iconos de administrador / administración en WordPress?

Los iconos de administración son las pequeñas imágenes que se ven en el panel de navegación del área de administración de WordPress. Aparecen a continuación de cada elemento / artículo del menú.

Estas imágenes utilizan Dashicons, una fuente de iconos creada para WordPress. Se introdujo por primera vez en 2013 y no ha cambiado desde entonces.

Es posible que desee dar a su área de administrador / administración de WordPress un ligero cambio de imagen mediante el cambio de estos iconos. Puede cambiar los iconos existentes por otros que le gusten más o incluso sustituirlos por sus propios iconos personalizados.

Si está creando un sitio web para clientes que no están familiarizados con WordPress, el uso de iconos personalizados puede ayudarles a navegar por el panel de administración con mayor facilidad.

Ahora, veamos cómo puedes cambiar fácilmente los iconos de administrador / administración. Le mostraremos dos maneras de hacerlo, y usted puede elegir la que funcione mejor para usted:

Método 1: Cambiar los iconos de administración en WordPress Admin usando un plugin

Para este método, usaremos el plugin Admin Menu Editor. Como su nombre indica, le permite personalizar los menús de administración de WordPress fácilmente.

En primer lugar, debe instalar y activar el plugin Admin Menu Editor. Para más detalles, consulte nuestro tutorial sobre cómo instalar un plugin de WordPress.

Una vez activado el plugin, ve a la página Ajustes ” Editor de menús. Aquí, verás tu menú de administrador de WordPress dentro de una interfaz de usuario ordenada (UI) donde se puede personalizar.

La interfaz de usuario tiene una barra de herramientas en la parte superior que permite añadir o borrar elementos de menú, añadir separadores, copiar y pegar elementos, etc.

Debajo de eso, puedes hacer clic en un elemento del menú para expandirlo y ver sus ajustes. Aquí, hemos expandido el elemento / artículo del menú Entradas.

Al desplegar cualquier elemento / artículo del menú, verá más opciones. Si se trata de un menú principal, también verá los elementos de menú secundarios en la columna de la derecha.

Para añadir, sustituir o borrar un icono de menú, haga clic en el enlace “Mostrar opciones avanzadas” de la parte inferior.

Ahora, haga clic en el botón situado al lado del campo “Icono URL”.

Aparecerá una ventana emergente en la que podrás ver todos los Dashicons disponibles. También puede hacer clic en el botón “Biblioteca de medios” para subir su propio icono de imagen.

Si desea subir su propio icono de imagen, le recomendamos que utilice una imagen de 32×32, preferiblemente en formato PNG transparente.

Después de elegir tu icono, haz clic en el botón “Guardar cambios” para guardar tus ajustes.

Ahora verá su icono de menú personalizado en el menú de administración.

Método 2: Cambiar manualmente los iconos del menú de administración mediante un fragmento de código

Este método siguiente requiere que usted añada algún código personalizado para cambiar los iconos.

Si no lo ha hecho antes, le recomendamos que eche un vistazo a nuestro tutorial sobre cómo añadir código personalizado en WordPress.

La forma más fácil y segura de añadir código personalizado en WordPress es usar WPCode. Es el mejor plugin de fragmentos de código para WordPress. Le permite añadir de forma segura código personalizado, CSS y HTML a su sitio de WordPress sin romper nada accidentalmente.

Nota: El plugin también tiene una versión gratuita llamada WPCode Lite, que hará el trabajo. Sin embargo, la versión Pro ofrece características adicionales que pueden ser útiles.

Ejemplo 1. Sustitución de un icono utilizando los Dashicons por defecto

En este ejemplo, utilizaremos los Dashicons por defecto para sustituir un icono del conjunto de iconos existente.

Es importante tener en cuenta que WordPress ya carga Dashicons, que están altamente optimizados para el rendimiento. Por lo tanto, su uso no afectará a la velocidad de carga de la página.

Dicho esto, antes de ejecutar el código, debes anotar lo siguiente:

1. URL del elemento / artículo que desea modificar
2. El nombre del icono que desea utilizar

Primero, necesitas encontrar la URL de la página del elemento / artículo que quieres personalizar. Por ejemplo, digamos que quieres cambiar el icono del menú ‘Entradas’.

Mueve el ratón hasta el menú Entradas, y verás la URL a la que enlaza en la barra de estado de tu navegador en la parte inferior de la página. Sólo necesitas la última parte de la URL, que en este caso sería edit.php.

A continuación, vaya al sitio web de Dashicons y haga clic en el icono que desee utilizar.

Al hacer clic en cualquier icono aparecerá su nombre y su slug en la parte superior. En este punto, tienes que copiar el slug porque lo necesitarás en el siguiente paso.

Una vez hecho esto, vaya a la página Fragmentos de código ” + Añadir fragmento y pase el ratón por encima de la casilla “Añadir su código personalizado (nuevo fragmento)”.

A continuación, basta con hacer clic en el botón “+ Añadir fragmento de código personalizado” que aparece.

En la siguiente pantalla, ponga un título a su fragmento de código y seleccione Fragmento de código PHP en la opción Tipo de código.

Después, puede copiar y pegar el siguiente código en el cuadro del editor de código:

function change_post_menu_icon() {
    global $menu;
    
    // Loop through the menu items
    foreach ($menu as $key => $menu_item) {
        // Find the "Posts" menu item (default URL is 'edit.php')
        if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
            // Change the icon to a different Dashicon class
            $menu[$key][6] = 'dashicons-format-aside'; // Change this to your preferred Dashicon slug
        }
    }
}
add_action('admin_menu', 'change_post_menu_icon');

No olvides cambiar dashicons-format-aside por el slug que has copiado antes.

Tu código aparecerá así en el editor:

A continuación, debe indicar a WordPress dónde ejecutar este código.

Los iconos del menú de administración aparecen dentro del área de administrador / administración de WordPress. En la misma página, desplácese hasta la sección Inserción y seleccione “Solo administrador” en la opción Ubicación.

Por último, cambie el fragmento de código a Activo y haga clic en el botón “Guardar fragmento” para guardar los cambios.

WordPress empezará a usar el icono que seleccionaste para la página de entradas.

Ejemplo 2. Utilice Font Awesome icono de un elemento de menú en el área de administración de WordPress

La biblioteca por defecto de Dashicon tiene un conjunto limitado de iconos. La buena noticia es que puedes utilizar una biblioteca de fuentes e iconos como Font Awesome, que establece un conjunto de iconos mucho más amplio.

Sin embargo, esto significa que tendrá que cargar Font Awesome, lo que puede ralentizar ligeramente su área de administrador / administración de WordPress (solo unos milisegundos).

Antes de añadir cualquier código, primero tienes que encontrar el icono que quieres utilizar. Vaya al sitio web de Font Awesome y cambie a la biblioteca gratuita.

Verás todos los iconos disponibles de forma gratuita.

Haz clic en el icono que quieras utilizar y se abrirá en un mensaje / ventana emergente. A partir de aquí, tienes que copiar el valor Unicode del icono.

A continuación, vaya a la página Fragmentos de código ” + Añadir fragmento en su escritorio de WordPress.

Siga adelante y haga clic en el botón “+ Añadir fragmento de código personalizado” dentro del cuadro “Añada su código personalizado (nuevo fragmento de código)”.

En la siguiente pantalla, escriba un título para el fragmento y seleccione Fragmento PHP como opción Tipo de código.

Después, puede copiar y pegar el siguiente código en el cuadro del editor de código:

// Enqueue Font Awesome in the admin area
function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');

// Add custom class to the Posts menu item
function add_custom_post_menu_class() {
    global $menu;

    foreach ($menu as $key => $menu_item) {
        if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
            $menu[$key][4] .= ' custom-post-menu-class';
        }
    }
}
add_action('admin_menu', 'add_custom_post_menu_class');

// Add custom CSS to change the icon to a Font Awesome icon
function custom_admin_menu_icon() {
    echo '<style>
        .custom-post-menu-class .wp-menu-image:before {
            font-family: "Font Awesome 5 Free" !important;
            content: "\f015"; /* Unicode for the Font Awesome icon */
            font-weight: 900; /* Needed for solid icons */
        }
    </style>';
}
add_action('admin_head', 'custom_admin_menu_icon');

No olvides sustituir \f015 por el valor Unicode que has copiado antes.

Tu código aparecerá así en el editor:

A continuación, debe indicar a WordPress dónde ejecutar este código.

Los iconos del menú de administración aparecen dentro del área de administración de WordPress, por lo que puede desplazarse hasta la sección Inserción y seleccionar “Solo para administradores” como opción de Ubicación.

Por último, cambie su fragmento de código a Activo y haga clic en el botón “Guardar fragmento” para guardar los cambios.

WordPress empezará a usar el icono que seleccionaste para la página de entradas.

Bonificación: Añadir iconos para tipos de contenido personalizado en WordPress

Los tipos de contenido personalizados le permiten crear tipos de contenido únicos para su sitio web WordPress. No se trata de entradas o páginas por defecto, sino de algo totalmente original para su sitio.

Si está utilizando un tipo de contenido personalizado en su sitio web de WordPress, es posible que desee cambiar su icono para que pueda identificarlo fácilmente.

En ese caso, marque / compruebe nuestro detallado tutorial sobre el tema, que muestra múltiples formas de cambiar o añadir iconos para sus tipos de contenido personalizados.

Esperamos que este artículo te haya ayudado a cambiar o añadir iconos de administrador en WordPress. También puedes comprobar cómo poner una marca blanca en el escritorio de administración de WordPress o ver estos consejos de expertos sobre cómo personalizar el área de administración de WordPress para mejorar los flujos de trabajo.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.