¡Los iconos son fascinantes!
Tienen el poder de comunicarse rápidamente con la audiencia al establecer una fuerte conexión visual.
Es por eso que los íconos se usan ampliamente en todas partes, incluidos los sitios web de WordPress.
Además, usar el mismo tema en tu sitio durante varios meses puede ser aburrido. Es común.
Y luego, estarás en busca de algo más interesante, usando eso, y te aburrirás de nuevo,
Y el ciclo sigue y sigue…
Entonces, ¿cómo puedes saltarte ese ciclo de aburrimiento?
¡Dashicons es una forma excelente!
Puede darle vida a la estética de tu sitio y ayudarte a destacar. También evitará que haga un esfuerzo adicional y llene su sitio con imágenes innecesarias que ralentizan la velocidad de la página.
Entonces, exploremos Dashicons y cómo puede usarlos de manera efectiva en su sitio web de WordPress.
Tabla de contenido
¿Qué son los Dashicons de WordPress?
Dashicons son las fuentes de iconos oficiales de WordPress introducidas hace años con su versión 3.8. Estas fuentes son geniales e impresionantes si las usa en su sitio web. Son archivos SVG de alta calidad que puede escalar fácilmente a cualquier tamaño sin pixelización.
Como poseen soporte nativo de WordPress debido a que fueron creados por su propio equipo, puede usarlos directamente sin cargar scripts adicionales. Hay alrededor de 350 fuentes de iconos incluidas, que puede encontrar dentro de la oficial Recursos para desarrolladores de WordPress.
Han categorizado estos íconos según el tema, además, puede ver un campo de búsqueda dinámico que le permite filtrar los íconos disponibles.
Puede utilizar estos iconos en:
- Tablero de WordPress
- Menús de navegación
- paginas y publicaciones
- Metadatos
- Elementos del editor
- Complementos y temas personalizados
- Paneles de administración
- Diseño frontal
¿Notas que estoy diciendo «iconos» repetidamente?
Aquí, me refiero solo a fuentes de iconos.
No imágenes en forma de iconos.
Sí, hay una diferencia entre los dos.
Vamos a desentrañar eso.
¿Diferencia entre iconos de imagen y fuentes de iconos?
Las fuentes de íconos y los íconos de imágenes son algo similares, pero en lugar de alfabetos, hay símbolos vectoriales en las fuentes de íconos.
¿Eso se volvió demasiado técnico?
Déjame aclarar eso.
Básicamente, estas fuentes de íconos se asemejan a imágenes que puede usar para agregar símbolos en su sitio web, pero no a una imagen real.
Te brindan muchos beneficios.
¿Cómo?
Descúbrelo en la siguiente sección.
¿Por qué deberías usarlos?
- Escalables como los textos que se usan en su sitio web ya que son fuentes
- Ligero que no afecta la velocidad de carga de su página en comparación con las imágenes
- Capaz de configurar el color del icono a través de CSS y agregar propiedades adicionales como color degradado, sombra, etc.
- Excelente para guardar demasiadas solicitudes HTTP al permitirle cargar fuentes todas a la vez, que puede usar en sus páginas. Si usa muchas imágenes en el sitio, tendrá que hacer muchas solicitudes para obtenerlas, lo que aumenta el tiempo de carga de la página.
- Fácil de usar y ajustar que las imágenes. Puede agregar símbolos reconocibles y creativos sin necesidad de recrearlos cada vez que necesite un ícono para un reproductor de video, correo electrónico, música o cualquier otra cosa.
- Mayor accesibilidad porque están integrados directamente en WordPress
¿Cómo usarlos?
Usar Dashicons no es ingeniería espacial.
Confía en mí; conozco los dos :0
Simplemente siga algunos pasos que se mencionan a continuación para comenzar con WordPress Dashicons.
Paso 1: habilite Dashicons en su sitio de WordPress
Antes de comenzar, habilite Dashicons donde necesite, por ejemplo, un tema. Para esto, debe agregar algunos códigos al archivo function.php.
Para hacerlo:
- Primero, vaya al Editor de temas/apariencia desde su panel de WordPress.
- Abra el archivo function.php.
- Desplácese hasta el final del archivo y agregue algunas líneas de código para poner en cola los scripts
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
El ejemplo anterior es para habilitar Dashicons en la interfaz.
Asegúrese de crear un tema secundario antes de editar el archivo functions.php. Es porque si edita directamente el archivo del tema y luego llega una actualización para ese tema, anulará todos los cambios que realice en el archivo.
Paso 2: encuentre los códigos HTML y CSS de Dashicon
WordPress.org ofrece una biblioteca de Dashicons, que lo ayuda a encontrar códigos CSS y HTML que pertenecen a cada ícono. Aquí, vaya a Recursos para desarrolladores para encontrar los Dashicons que desea usar y luego:
- Haga clic en el icono de su deseo.
- Elija entre «Copiar CSS» o «Copiar HTML» haciendo clic en él.
- Ahora, verá una ventana emergente. Simplemente copie el código en el portapapeles.
- Decide dónde quieres usar el icono, como temas, metadatos, menú de navegación, etc.
- Pegue el código copiado en el Text Widget o Text Editor del lugar elegido.
- Modificar el aspecto de los iconos usando CSS personalizado
Eso es todo.
Además, por defecto, todos los iconos tienen un tamaño de 20 píxeles. Puede cambiarlo usando los elementos CSS de opciones como Inspect Element de Google Chrome o FireBug de Firefox.
¿Cómo aprovechar al máximo los Dashicons de WordPress?
Viste cómo podrías usar Dashicons en tu sitio, y ahora veremos su uso para propósitos específicos.
1. Uso del menú de navegación
Para agregar íconos al menú, siga los pasos a continuación:
- Vaya a Menús/Apariencia desde el tablero
- Copie los códigos HTML diseñados para el ícono del menú de WordPress.org
- Péguelo en la «Etiqueta de navegación» en el tablero
- Haga clic en el botón «Guardar» y luego cargue la página de inicio. Debería mostrar el ícono fresco y nítido.
2. Usar meta en la publicación
Podrá usar Dashicons justo delante de una fecha, nombre de autor, etiqueta o categoría según el tema más los datos que muestra.
Como ya ha puesto en cola los Dashicons, abra el archivo style.css. De lo contrario, también puede optar por un editor de CSS personalizado, que no le permite perder sus cambios después de las actualizaciones del tema. A continuación, agregue su código CSS después de encontrar un selector coincidente.
3. En el backend de WordPress
Si desea que se incluyan diferentes íconos para diferentes títulos de publicaciones personalizadas, tipos de publicaciones o widgets, es fácil de hacer.
Un consejo rápido: Crea un shortcode
Para usar Dashicons fácilmente, puede crear un código corto para ello. Es útil, especialmente cuando crea un sitio web para sus clientes a quienes les resultará fácil insertar Dashicons sin tener que jugar con los códigos.
Conclusión
Espero que las cosas estén bastante claras de su parte con respecto a los Dashicons de WordPress. No solo cubren la estética de tu sitio web, sino que también son fáciles de usar y mejoran la velocidad de carga de la página.
Y sabes, ‘belleza y cerebro’ es una combinación rara.
¡Entonces, date prisa, usa esos llamativos Dashicons en tu sitio de WordPress!