Nuestros lectores a menudo nos preguntan si es posible mostrar iconos de archivos adjuntos en WordPress. Agregar iconos de archivos ayuda a los usuarios a identificar el tipo de archivo que están descargando de un vistazo, lo cual es excelente para ayudarlos a comprender mejor su contenido.
He probado diferentes métodos para agregar iconos de archivos, y marcan una diferencia notable en la experiencia del usuario. Los visitantes pueden detectar instantáneamente si están descargando un archivo PDF, un documento de Word o un archivo ZIP.
En esta guía, te mostraremos cómo agregar fácilmente iconos de archivos adjuntos en WordPress. Con nuestros pasos, puedes mostrar iconos de archivo que coincidan con el tipo de archivos en tu sitio.
Respuesta rápida: Cómo agregar iconos de archivos adjuntos en WordPress
Puedes agregar íconos de archivos adjuntos en WordPress usando un plugin como MimeTypes Link Icons (el método más fácil) o agregando manualmente fuentes de íconos con Font Awesome. Ambos métodos muestran indicadores visuales junto a los enlaces de descarga de archivos, ayudando a los visitantes a reconocer los tipos de archivo al instante.
El método del plugin funciona automáticamente para todos los tipos de archivo compatibles. El método Font Awesome te da más control sobre el estilo y la personalización de los iconos.
¿Qué son los iconos de archivos adjuntos?
Los iconos de archivos adjuntos son pequeños indicadores visuales (como símbolos de PDF, DOC o ZIP) que aparecen junto a los enlaces de descarga. Ayudan a los visitantes a reconocer instantáneamente qué tipo de archivo están a punto de descargar sin tener que leer la extensión del archivo.
Por defecto, WordPress te permite subir imágenes, audio, video y otros documentos. También puedes habilitar tipos de archivo adicionales para subirlos en WordPress.
Cuando subes un archivo a través del cargador de medios y lo agregas a una publicación o página, WordPress incrustará formatos compatibles como imágenes, audio y video. Esto significa que mostrará automáticamente una vista previa o un reproductor multimedia en lugar de solo un enlace.
Para todos los demás archivos, simplemente agregará un nombre de archivo como texto plano y lo enlazará a la página de descarga o adjunto.
En la captura de pantalla anterior, agregamos un archivo PDF y un archivo Docx. Sin embargo, es difícil para un usuario adivinar qué tipo de archivo estaría descargando.
Si subes diferentes tipos de archivo regularmente, mostrar un ícono junto al enlace facilita que tus usuarios encuentren el tipo de archivo que buscan.
Eso es lo que te mostraremos cómo hacer a continuación.
¿Qué método deberías usar?
Antes de entrar en los tutoriales, aquí tienes una comparación rápida de ambos métodos para que puedas elegir el adecuado para tu sitio:
| Característica | Método 1: Plugin | Método 2: Font Awesome |
|---|---|---|
| Facilidad de uso | Muy Fácil | Intermedio |
| Tiempo de configuración | Segundos | Manual por publicación |
| Personalización | Limitado | Alto |
| Mejor para | Principiantes | Usuarios avanzados |
Recomiendo el Método 1 para la mayoría de los usuarios porque es más rápido y funciona en todo el sitio. Empecemos con ese.
Método 1: Agregar iconos de archivos adjuntos en WordPress usando un plugin
La forma más fácil de agregar iconos de tipos de archivo es usando un plugin de WordPress como MimeTypes Link Icons. Es un plugin gratuito que es muy fácil de usar y te permite agregar iconos para diferentes tipos de archivo.
Lo primero que necesitas hacer es instalar y activar el plugin MimeTypes Link Icons. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, debes visitar la página Ajustes » Íconos de MimeType para configurar los ajustes del plugin.
El plugin te permite elegir el tamaño del ícono, así como entre formatos de imagen PNG y GIF. Recomendamos usar íconos PNG ya que proporcionan una mejor calidad para los indicadores de tipo de archivo.
A continuación, debes elegir la alineación del ícono y qué tipos de archivo mostrarán el ícono.
Después de eso, puedes desplazarte hacia abajo y seleccionar los iconos que se mostrarán en tu sitio web. Por ejemplo, hay iconos para tipos de archivo como PDF, PPT, CSV, AVI, RPM, TXT, y más.
Probé este plugin en nuestro sitio de demostración con archivos PDF, DOCX y ZIP. Los íconos aparecieron automáticamente a los pocos segundos de la activación, sin necesidad de configuración adicional.
A continuación, puedes desplazarte hacia abajo hasta la sección de Ajustes Avanzados.
Aquí encontrarás la opción para mostrar el tamaño del archivo junto al enlace de descarga. Está desactivada por defecto, ya que podría consumir muchos recursos.
Una vez que hayas terminado, recuerda hacer clic en el botón 'Guardar Cambios' para guardar tu configuración.
Ahora puedes editar una publicación o página y agregar un enlace de descarga de archivo usando el cargador de medios. Simplemente previsualiza tu publicación y verás el ícono del archivo junto al enlace de descarga.
Método 2: Usar fuentes de iconos para archivos adjuntos en WordPress
En este método, usaremos una fuente de iconos para mostrar un icono junto al enlace del archivo adjunto. Este método te da más control sobre el estilo del icono y funciona bien si ya estás usando Font Awesome en tu sitio.
Font Awesome es una popular biblioteca de iconos que proporciona miles de iconos vectoriales escalables. Estos son gráficos que se mantienen nítidos y claros sin importar cuánto los redimensiones.
Este método implica instalar el plugin Font Awesome y luego agregar manualmente el código del ícono a tus publicaciones.
Lo primero que necesitas hacer es instalar y activar el plugin Font Awesome. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Tras la activación, puedes dirigirte a la página Ajustes » Font Awesome desde tu panel de WordPress. Aquí, puedes editar los ajustes generales del plugin, como elegir si debe usar iconos pro o gratuitos.
A continuación, puedes editar una publicación o página donde quieras añadir un enlace de adjunto.
En el editor de contenido, agregarás el código HTML del ícono antes del enlace de descarga. Esto muestra el ícono junto al nombre del archivo.
Nota: Siempre que agregues código personalizado o fragmentos de HTML a tu sitio, es una buena idea crear una copia de seguridad primero. Para fragmentos más complejos, recomendamos usar el plugin WPCode para una implementación segura.
Para encontrar ese código HTML, puedes visitar el sitio web de la biblioteca de íconos de Font Awesome. Simplemente busca un ícono en la barra de búsqueda y luego haz clic en la imagen.
A continuación, verás diferentes variaciones del ícono y su código HTML.
Haz clic en el código para copiarlo.
Después de eso, puedes regresar al editor de contenido de WordPress de tu sitio web y hacer clic en el signo '+' para agregar un bloque de HTML personalizado.
Desde aquí, simplemente pega el código de tu icono en el bloque.
Una vez que hayas terminado, procede a publicar o actualizar tu página.
Ahora puedes visitar tu sitio web para ver el icono recién añadido para el tipo de archivo adjunto.
Extra: Vende archivos digitales para ganar dinero en línea
Ahora que sabes cómo agregar íconos de tipos de archivo adjunto, puedes ir un paso más allá y vender diferentes archivos como descargas digitales. Esto te permite ganar dinero en línea o animar a los usuarios a registrarse en tu boletín a cambio de un recurso gratuito.
La mejor manera de vender productos digitales es usando Easy Digital Downloads. Es una de las mejores plataformas de comercio electrónico para WordPress, y es muy fácil de usar y configurar.
Easy Digital Downloads se integra fácilmente con diferentes servicios de pago como PayPal, Stripe, Apple Pay y Google Pay.
Además de eso, simplemente puedes subir los archivos digitales que te gustaría vender y empezar a ganar dinero en línea.
El plugin te permite agregar detalles como un título y una descripción, establecer el precio de la descarga, elegir una imagen de descarga y más.
Para más detalles, consulta nuestra guía sobre cómo vender descargas digitales en WordPress.
Preguntas frecuentes sobre íconos de archivo en WordPress
¿Los íconos de archivo ralentizan mi sitio?
No, los íconos de archivo son archivos de imagen muy pequeños que tienen un impacto mínimo en la velocidad del sitio. El plugin MimeTypes Link Icons utiliza archivos PNG o GIF ligeros, y los íconos de Font Awesome están basados en vectores, lo que significa que están optimizados para el rendimiento.
¿Puedo personalizar los colores y estilos de los íconos?
Sí, si usas Font Awesome, puedes personalizar los colores, tamaños y estilos de los íconos usando CSS (Hojas de Estilo en Cascada). Este es el código que se usa para dar estilo a tu sitio web. El método del plugin (Método 1) utiliza diseños de íconos preestablecidos que coinciden con tipos de archivo comunes.
¿Los íconos de archivo funcionan en dispositivos móviles?
Sí, los íconos de archivo se muestran correctamente en dispositivos móviles. Los íconos son responsivos, lo que significa que se ajustarán automáticamente para verse bien en diferentes tamaños de pantalla.
¿Qué tipos de archivo pueden mostrar íconos?
El plugin MimeTypes Link Icons admite muchos tipos de archivo comunes, incluyendo:
- PDF, DOC y DOCX
- XLS y XLSX
- PPT y PPTX
- ZIP, MP3 y AVI
Puedes seleccionar exactamente qué tipos de archivo habilitar en la página de configuración del plugin.
Recursos Adicionales
Los siguientes son algunos recursos útiles adicionales que pueden resultarte útiles para administrar tu sitio web y medios de WordPress:
- Cómo usar WordPress para la gestión de documentos o archivos
- Cómo encontrar tus borradores guardados en WordPress (Guía para principiantes)
- Cómo subir archivos PDF a tu sitio de WordPress
- Cómo conectar múltiples sitios de WordPress entre sí (3 formas)
Esperamos que este artículo te haya ayudado a aprender cómo agregar íconos de archivos adjuntos en WordPress. También te puede interesar nuestra guía sobre cómo incrustar PDFs, hojas de cálculo y otros archivos en las publicaciones de blog de WordPress y nuestra selección experta de los mejores plugins de registro de actividad y seguimiento de WordPress.
Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Mrteesurez
¡Este tutorial es útil! Agregar íconos de tipo de archivo realmente mejora la experiencia del usuario, facilitando a los visitantes la identificación de los archivos adjuntos justo antes de descargarlos.
Lo he implementado en mi sitio y al instante hizo que mi contenido se viera más profesional. Tu guía paso a paso hace que el proceso sea muy sencillo. Quiero preguntar, ¿cómo afecta la adición de íconos al tiempo de carga de la página de mi sitio?
Soporte de WPBeginner
No debería tener un efecto importante en la velocidad de tu sitio.
Administrador
Mrteesurez
Gracias por la respuesta. Pregunté porque usar íconos a menudo requiere descargar o cargar bibliotecas de fuentes como Font Awesome o Google Fonts, lo que puede afectar la velocidad de un sitio web. Agradezco que me hagas saber que no tiene un gran efecto en la velocidad de mi sitio.
Isha Singh
No estoy familiarizado con WordPress. Pero mientras leo tu publicación, parece que sé todo sobre WordPress.
Enc
¿Estás recomendando seriamente un plugin que no se ha actualizado en un año?
Soporte de WPBeginner
Sí, lo estamos. Consulta nuestro artículo ¿deberías instalar plugins no probados con tu versión de WordPress? para más información sobre este tema.
Administrador