Le pasa a todo el mundo.

Encuentras un tema que te gusta, lo instalas y pasas unos meses disfrutando del aspecto de tu sitio. Pero, al cabo de unos meses, el tema empieza a parecerte rancio, un poco aburrido.

El único problema es que no quieres pasarte un par de horas buscando algo nuevo. Ojalá hubiera una forma de añadir un poco de picante a tu tema, un poco de chispa para hacerlo destacar.

Antes de que te desesperes, déjame mostrarte una forma sencilla de darle vida a tu tema sin demasiado esfuerzo y sin añadir imágenes innecesarias que podrían ralentizar tu sitio.

Introduzca Dashicons. Dashicons son iconos de fuentes que se introdujeron en WordPress 3.8. Son los iconos impresionantes y fresco que se ve cuando se inicia sesión en su tablero de instrumentos. ¿No sería genial si pudiera añadirlos a su tema también?

Pues sí puedes y te voy a enseñar cómo.

¿Cómo puede utilizar Dashicons en su menú de navegación?

Empecemos con un ejemplo sencillo. Los dashicons ya están incluidos en WordPress desde la versión 3.8, pero aún es necesario incluirlos para que se muestren correctamente en el front-end de su sitio; es decir, en su tema.

Paso 1: Prepare los Dashicons de su tema

Para que tu tema Dashicons esté listo primero abre tu archivo functions.php (que se encuentra en Apariencia>Editor - por defecto abrirá el archivo CSS de tu tema actual. Sigue adelante y busca el archivo functions.php y haz clic en él para cargarlo en Editor).

Paso 2: Poner en cola el script

Desplázate hasta el final y pega estas líneas de código al final:

 //Poner en cola el script Dashicons add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Ahora tu tema está listo para usar Dashicons.

Paso 3: Añadir Dashicons a los elementos del menú

Vamos a añadir un Dashicon para tu enlace de Inicio. Dirígete a la página web de Dashicons y selecciona el icono que más te guste.

Actualización: Los dashicons estaban disponibles originalmente en GitHub.io, pero ya están disponibles en WordPress.org.

Paso 4:

Haz clic en el icono deseado (en este caso he seleccionado el icono de inicio) y, a continuación, haz clic en Copiar HTML. Te aparecerá una ventana emergente con el código que necesitas.

Paso 5:

Vuelve a tu panel de WordPress, haz clic en Apariencia> Menús y pega el código justo donde dice Etiqueta de navegación.

Si aún así quieres que aparezca la palabra, escríbela después del paréntesis div de cierre.

Haz clic en Guardar y carga tu página de inicio. Tu enlace de inicio debería mostrar ahora un bonito y nítido Dashicon.

Puede hacerlo para todos los elementos del menú de navegación o sólo para la página de inicio. Sólo tiene que repetir los pasos anteriores con los iconos correspondientes. Ha sido fácil, ¿verdad?

¿Cómo se utilizan los Dashicons en los post meta?

Puedes ir un paso más allá y añadir Dashicons a tu meta post, o en otras palabras añadir Dashicons delante del nombre del autor, fecha, categoría o etiqueta; dependiendo de tu tema y la información que muestra.

Dado que ya has incluido Dashicons en tu tema, todo lo que tienes que hacer ahora es abrir tu archivo style.css (o utilizar el editor CSS personalizado, que siempre es una mejor opción para no perder los cambios una vez que tu tema se actualice), encontrar el selector correspondiente y añadir el código CSS.

Digamos que quieres añadir un icono delante de tu nombre o del nombre de tu autor.

Primer paso:

Primero vamos a elegir un icono que nos guste.

Segundo paso:

A continuación, haz clic en él y, esta vez, selecciona Copiar CSS. De nuevo, aparecerá una ventana emergente con el código que debes pegar.

Paso 3:

Ahora abre tu style.css y busca el selector correspondiente, en este caso - .entry-author. Añadiendo :before y luego pegando el código CSS que copiaste de la web de Dashicons, el nombre del autor tendrá un bonito icono delante. También tienes que especificar que estás usando la fuente Dashicons. El código modificado tiene este aspecto:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; } 

Vamos a añadir un poco de estilo también, y ahora el código completo se parece a esto:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

El resultado final

¿Qué aspecto tendrá esto al final?

Algo así:

Hay muchas maneras de utilizar los Dashicons. Deje volar su creatividad y vea lo que puede hacer.

Ponerlo todo junto

Aparte de los ejemplos anteriores, puede utilizar Dashicons en su backend para especificar diferentes iconos para diferentes tipos de post, o puede utilizarlos en sus títulos de post, títulos de widget, o si está creando una página de destino personalizada puede diferenciar entre las diferentes páginas de su sitio.

Aquí tienes un ejemplo básico de lo que podrías crear con ellos: