En el vídeo tutorial de hoy vamos a ver el código html para descargar archivos automáticamente desde tu web al hacer clic. Seguro que más de una vez has querido crear un enlace para descargar un archivo y así ofrecer a tus usuarios un fichero .pdf por ejemplo. O una hoja de trabajo que complemente tu contenido. O quizá un .zip con imágenes o material complementario a lo que ofreces en el mismo… En definitiva veremos cómo crear link de descarga sea cual sea tu caso.
NOTA: Desde la versión 5.0 de WordPress podemos utilizar el bloque archivo para crear nuestros archivos descargables.
Las razones para crear enlaces para descargar archivos pueden ser muchas. Y las soluciones también pueden ser varias. Te pongo un par de ejemplos:
- Podríamos crear un link de descarga a un archivo que está directamente en nuestro servidor (esto veremos hoy)
- También un enlace a Drive (enlace descarga directa Google Drive), Dropbox u otros sistemas de almacenaje en la nube donde tienes esos archivos.
Pero hoy, como adelantaba antes, vamos a ver cómo crear enlaces para descargar archivos que tienes en tu servidor con un simple código html y haciendo uso del atributo download de html5.
Aquí lo tienes.
<a href="https://rafarjonilla.com/contenido/swiper-no-robes.png" download="Swiper, el zorro ladrón">Haz clic aquí para descargar el archivo</a>
Código html5 para crear un enlace de descarga
Pero como te comentaba, ahora, con Gutenberg podemos ponerlo con un bloque de archivo y nos permite previsualizar el archivo pinchando en el link o descargarlo pulsando en el botón.
Y te lo explico en dos minutos en este vídeo.¡Dentro vídeo!
A continuación te dejo los códigos que hemos visto en el vídeo y también los pasos, por si prefieres leer en vez de verme en acción 🙂
Cómo crear un link de descarga en html de forma sencilla
Voy a partir de cero. Imaginando que no sabes siquiera crear un enlace en html. Así que si no es tu caso, sáltate el paso 1.
1.- Crea un enlace html
Supongo que estás en WordPress, así que, crear un enlace html es tan simple como escribir en el editor de texto de cualquier contenido. Algo cómo “Haz clic aquí para descargar el archivo”, selecciónalo y pulsa el eslabón de enlace. ¡Ya tienes creado el enlace!
Ahora pincha en la pestaña de HTML (esquina superior derecha del editor de texto) para ver el código. Deberías tener algo parecido a esto.
<a href="#">Haz clic aquí para descargar el archivo</a>2.- Sube tu archivo a la biblioteca de medios y obtén su url
Ahora necesitamos la url del archivo a descargar. Así que si estás en WordPress tendrás que subirlo primero a tu biblioteca de medios y coger de allí el enlace. Éste enlace está en la caja de información que hay a la derecha del archivo multimedia.
Fíjate en la imagen.
3.- Añade la url y el atributo download al enlace html
Venga, que ya casi está. Ahora vamos a coger nuestro enlace html y vamos a poner la url del archivo. Si lo dejáramos así, al hacer clic en el enlace lo navegaríamos, es decir, nos llevaría a una página con ese contenido enlazado.
Y lo que queremos es descargarlo.
Así que tendremos que añadir el atributo download. Te debe quedar algo así:
<a href="https://rafarjonilla.com/contenido/swiper-no-robes.png" download="">Haz clic aquí para descargar el archivo</a>
Pruébalo aquí: Descargar
4.- Personaliza el link de descarga (opcional)
Ahora vamos un paso más allá y vamos a darle un valor al atributo download para que el fichero a descargar se guarde con un nombre. Si no funciona siempre cogerá el nombre del archivo. Quedaría algo así:
<a href="https://rafarjonilla.com/contenido/swiper-no-robes.png" download="Swiper, el zorro ladrón">Haz clic aquí para descargar el archivo</a>Si haces esto con el bloque de archivo quedaría algo así.
Como puedes ver es algo muy sencillo. Pero muy efectivo y funcional para hacer que tu audiencia interactúe con tu contenido. Darles un plus 🙂
Espero que te haya gustado. Ahora ya sabes cómo crear enlaces de descarga con html5.
Más trucos con enlaces html
- Cómo crear enlaces ancla html para navegar verticalmente en una misma página
- Aprende a crear un enlace para llamar por teléfono al hacer clic
- Tutorial para crear un enlace que al pulsarlo abra el gestor de correos y prepare un mail
- Más info en: https://www.w3schools.com/html/
Si crees que es interesante y te apetece, me ayudas al compartir éste contenido en redes sociales. ¡¡Gracias!!
