Cómo agregar iconos de tipo de archivo adjunto en WordPress

¿Ha visto algún sitio web que muestre iconos de archivos junto a los enlaces de descarga? Recientemente, uno de nuestros lectores preguntó si era posible mostrar iconos de archivos adjuntos en WordPress. Sí, es bastante fácil. En este artículo, le mostraremos cómo agregar iconos de archivos adjuntos en WordPress.

Cuando necesita iconos de archivos adjuntos en WordPress

De forma predeterminada, WordPress le permite cargar imágenes, audio, video y otros documentos. También puede permitir la carga de tipos de archivos adicionales en WordPress. Cuando carga un archivo a través del descargador de medios y lo agrega a una publicación o página, WordPress intentará incrustar el archivo si es una imagen, sonido, video o en un formato de archivo compatible. Para todos los demás archivos, simplemente agregará un nombre de archivo como texto sin formato y lo vinculará a la página de descarga o adjunto.

En la captura de pantalla anterior, hemos agregado un archivo PDF y un archivo Docx. Sin embargo, es difícil para un usuario adivinar qué archivo está descargando. Si descarga diferentes tipos de archivos con regularidad, es posible que desee mostrar un icono junto al enlace para que los usuarios puedan encontrar fácilmente el tipo de archivo que están buscando. Dicho esto, veamos cómo agregar íconos de archivos adjuntos en WordPress para diferentes tipos de archivos.

Método 1: agregar iconos de archivos adjuntos en WordPress usando un plugin

Lo primero que debe hacer es instalar y activar el plugin MimeTypes Link Icons. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Tras la activación, debe visitar Configuración »Iconos MimeType página para configurar los ajustes del plugin.

El plugin le permite elegir el tamaño del icono. También puede elegir entre iconos png y gif. A continuación, debe elegir la alineación de los iconos y qué tipos de archivos mostrarán el icono. En las opciones avanzadas, puede habilitar las clases CSS para ocultar iconos. Los enlaces de descarga de los archivos incluidos en estas clases de CSS no mostrarán iconos.

A continuación, encontrará la opción para mostrar el tamaño del archivo junto al enlace de descarga. Está deshabilitado de forma predeterminada porque podría consumir muchos recursos. Sin embargo, si lo desea, puede habilitarlo y también habilitar la opción “Caché de tamaños de archivos recuperados”. Recuerde hacer clic en el botón Guardar cambios para guardar su configuración. Ahora puede editar una publicación o página y agregar un enlace de descarga de archivos utilizando la herramienta de descarga de medios. Obtenga una vista previa de su publicación y verá el ícono de archivo junto al enlace de descarga.

Método 2: uso de fuentes de iconos para archivos adjuntos en WordPress

En este método, usaremos una fuente de icono para mostrar un icono junto al enlace del archivo adjunto. Lo primero que debe hacer es instalar y activar el plugin Better Font Awesome. Tras la activación, puede editar cualquier publicación o página en la que desee agregar un enlace de archivo adjunto. Notarás el nuevo botón "Insertar ícono" en la parte superior del Editor de publicaciones. Al hacer clic en él, aparecerá una ventana emergente donde puede encontrar y seleccionar el icono que desea agregar.

Font Awesome viene con toneladas de íconos e íconos para los tipos de archivos más utilizados. Haga clic en el icono que desea agregar y el plugin agregará automáticamente el código corto requerido en el editor de publicaciones. Ahora puede cargar su archivo e insertarlo en la publicación usando la herramienta de carga de medios.

También puede agregar su propio CSS personalizado para un ícono de archivo agregando su propia clase css al código corto de esta manera:
[icon name=”file-pdf-o” class=”” unprefixed_class=”pdf-icon”] Ahora puede utilizar la clase .pdf-icon para cambiar el tamaño, el color y el estilo del icono según sus propias necesidades.

Esperamos que este artículo le haya ayudado a aprender a agregar iconos de archivos adjuntos en WordPress. También puede consultar nuestra guía sobre cómo insertar archivos PDF, hojas de cálculo y más en las publicaciones del blog de WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.