Aprende a usar Dashicons para WordPress

Esta Navidad, regala sueños. Planes de hosting al 70% de descuento.

Contrata ilusión aquí

Desde la versión 3.8 de WordPress es posible utilizar una fuente de iconos, llamada Dashicons, en los textos del back-end.

Son una forma de personalizar y de añadir diseño a las páginas de WordPress sin tener que utilizar imágenes, mucho más pesada y que ralentizan la carga (muy penalizada en esos tiempos por los algoritmos de Google). 

Muchos diseñadores web utilizan el “truco” de cambiar algunas imágenes en las páginas principales de carga de WordPress, sustituyendolas con iconos, para así arañar un poco más de velocidad de carga.

En el panel de administrador de WordPress podemos ver esos iconos incluidos en la librería Dashicons y que de forma sencilla se pueden utilizar en el resto de WordPress (menús, entradas, páginas, etc.). Estos son algunos ejemplos:

Pero qué es Dashicons

Dashicons es la fuente de iconos oficial de WordPress con licencia GPLv2 (que permite su libre utilización y difusión y previniendo que alguien se apropie de sus derechos), por lo tanto se trata de una librería de fuentes.

Engloba una serie de iconos agrupados por categoría como Admin Menu, Welcome Screen, Post Formats, Media, Image Editing, Sorting, Social, Products, notifications, etc. Cada icono tiene asociado un código y un nombre, que sirven para luego ser utilizados dentro de WordPress.

En la web oficial de WordPress se puede acceder al nombre, código numérico y códigos CSS, HTML y Glyph de los iconos Dashicons.

Cada vez que se actualiza la versión de Dashicons WordPress están disponibles nuevos iconos para poder usar dentro de las páginas creadas con WordPress.

Cómo añadir Dashicons en temas WordPress

No todos los temas disponibles para WordPress soportan Dashicons, pero es muy sencillo habilitarlos. Para ello basta con añadir un código en el archivo functions.php del propio tema, y ya podrán utilizarse.

Sólo hay que editar el archivo functions.php que se encuentra dentro de la carpeta del propio tema, y añadir al final del mismo, el siguiente código:

>// Soporte de Dashicons

add_action( wp_enqueue_scripts, load_dashicons_front_end );

function load_dashicons_front_end() {

>wp_enqueue_style( dashicons );

Cómo utilizar Dashicons

Una vez activado Dashicons en el tema que se está utilizando, hay que ir a la web oficial de WordPress para elegir qué icono se quiere usar.

Tras elegir el icono, sólo hay que elegir en qué código se quiere insertar (CSS, HTML o Glyph) y copiar y añadir dentro de WordPress (en el caso de entradas, páginas, etc.). 

Editando las opciones CSS de WordPress es posible añadir el icono de Dashicons que se desee a menús, encabezados o widgets, solo tienes que colocar la línea de código correspondiente.

Ventajas de utilizar Dashicons

La principal ventaja de utilizar iconos como los Dashicons en una página web creada con WordPress, es la de mejorar el aspecto visual de la misma sin que se resienta la velocidad de carga.

Esto es posible gracias a que los iconos cargan más rápido que otros recursos, como las imágenes.

Con la librería oficial de iconos Dashicons WordPress, se pueden añadir iconos a las distintas partes de tu página de WordPress, desde las páginas o entradas, hasta los menús o widgets.

Permíteme recordarte también, que no por utilizar imágenes tu WordPress irá más lento, lo único que tienes que saber es que existe la forma de optimizar esas imágenes para que así tu página web cargue como un rayo.

Mi recomendación es el plugin gratuito Optimizador.io, el cual mejora la optimización de tus imágenes fuera de tu servidor para que no se ralentice tu web mientras se hacen las mejoras.