Le sucede a todos.

Encuentras un tema que te gusta, lo instalas y pasas unos meses disfrutando del aspecto de tu sitio. Pero luego, después de unos meses, el tema comienza a sentirse rancio. Un poco aburrido.

El único problema es que no quieres pasar un par de horas buscando algo nuevo. Si solo hubiera una manera de agregar un poco de sabor a tu tema, un poco de destello para que se destaque.

Antes de tirar las manos en la desesperación, déjame mostrarte una manera fácil de darle vida a tu tema sin demasiado esfuerzo y sin agregar imágenes innecesarias que podrían ralentizar tu sitio.

Escriba Dashicons. Los dashicons son iconos de fuentes que se introdujeron en WordPress 3.8. Son esos iconos increíbles y geniales que ves cuando inicias sesión en tu panel de control. ¿No sería genial si pudieras agregarlos a tu tema también?

Bueno, puedes y voy a mostrarte cómo.

¿Cómo se pueden usar los Dashicons en el menú de navegación?

Comencemos con un ejemplo sencillo. Los dashicons ya están incluidos en WordPress desde la versión 3.8, pero aún debe incluirlos para que se muestren correctamente en la parte frontal de su sitio; es decir, su tema.

Paso 1: Prepara los Dashicons de tu tema

Para preparar los Dashicons de tu tema primero abre tus funciones.archivo php (encontrado en Apariencia> Editor-por defecto abrirá el archivo CSS de su tema actual. Siga adelante y busque funciones.archivo php y haga clic en él para cargarlo en el Editor.)

Paso 2: Encolar el script

Desplácese hasta la parte inferior y pegue estas líneas de código al final:

¡Muy bien! Ahora tu tema está listo para usar Dashicons.

Paso 3: Agregar Dashicons a los elementos del menú

Agreguemos un Dashicon para el enlace de inicio. Dirígete al sitio web de Dashicons y selecciona el icono que más te guste.

Actualización: Los Dashicons estaban disponibles originalmente en GitHub.io, pero desde entonces se han puesto a disposición en WordPress.org.

Paso 4:

Haga clic en el icono deseado (en este caso, seleccioné el icono de inicio) y luego haga clic en Copiar HTML. Le dará una ventana emergente con el código que necesita.

Paso 5:

volver a su panel de WordPress, haga clic en Apariencia > Menús y pegue el código de derecho donde dice Navegación de la Etiqueta.

Si usted todavía desea que la palabra para mostrar, escriba después de la clausura div soporte.

haga Clic en guardar y cargar la página de inicio. Tu enlace de inicio ahora debería mostrar un Dashicon bonito y nítido.

Puede hacer esto para todos los elementos del menú de navegación o solo para el hogar. Simplemente repita los pasos anteriores con los iconos correspondientes. Eso fue fácil, ¿verdad?

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

Puede ir un paso más allá y agregar Dashicons a su meta de publicación, o en otras palabras, agregar Dashicons delante del nombre del autor, la fecha, la categoría o la etiqueta; dependiendo de su tema y la información que muestre.

Dado que ya has puesto Dashicons en cola en tu tema, todo lo que tienes que hacer ahora es abrir tu estilo.archivo css (o utilice el editor CSS personalizado, que siempre es una mejor opción para que no pierda los cambios una vez que se actualice su tema!), busque el selector correspondiente y agregue el código CSS.

Supongamos que desea agregar un icono delante de su nombre o el nombre de su autor.

Paso 1:

Primero vamos a elegir un icono que nos gustaría.

Paso 2:

A continuación, haga clic en él, y esta vez seleccione Copiar CSS. De nuevo, le dará una ventana emergente con el código que necesita pegar.

Paso 3:

Ahora abra su estilo.css y encuentra el selector correspondiente, en este caso – .entrada-autor. Al agregar: antes y luego pegar el código CSS que copió del sitio web de Dashicons, el nombre del autor tendrá un bonito icono frente a él. También debe especificar que está utilizando la fuente Dashicons. El código modificado se ve así:

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

Agreguemos un poco de estilo también, y ahora el código completado se ve así:

El resultado final

¿Cómo se verá esto al final?

Algo como esto:

Hay muchas maneras que usted puede utilizar Dashicons – deje que su creatividad afianzarse, y ver qué puede hacer.

Juntándolo todo

Aparte de los ejemplos anteriores, puede usar Dashicons en su backend para especificar diferentes iconos para diferentes tipos de publicaciones, o puede usarlos en los títulos de sus publicaciones, los títulos de los widgets, o si está creando una página de destino personalizada, puede diferenciar entre diferentes páginas de su sitio.

Un gran ejemplo de esto es la antigua página de inicio de WP Superstars. Aquí, puede ver los Dashicons en uso para diferentes áreas del sitio web:

Dashicons no son el único tipo de icono de fuentes que se pueden añadir. Echa un vistazo a nuestro tutorial de iconos de FontAwesome para obtener más información.

Incluye actualizaciones por correo electrónico. Darse de baja en cualquier momento.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.