Cómo añadir un pdf descargable a tu página web

Añadir un pdf descargable o cualquier otro tipo de archivo para descargar que amplíe la información de tu artículo, puede aportarle un valor añadido sin necesidad de enlazar con páginas externas.

Este procedimiento sencillo para unos puede convertirse en una tortura para otros, debido a su falta de conocimientos de HTML o de la gestión de su propia web. No será la primera vez que recibo la llamada de un cliente precisamente por este motivo.

Para ahorraros estas situaciones a ti y a tu proveedor he decidido enseñaros de forma detallada cómo añadir un pdf descargable a tu web, y que se presente de tres formas diferentes. El tutorial es válido para otro tipo de archivos de descarga tanto si es una web en HTML o una página WordPress.

Añadir pdf descargable a una web WordPress

Si decides implementar un elemento de estas características en tu artículo seguramente será un sitio web en WordPress, pero si tu gestor de contenidos es otro este tutorial te dará pistas sobre cómo hacerlo en esa otra plataforma.

Está claro que esto puede hacerse a través de plugins que además ofrecen posibilidades como el conteo de descargas. Yo prefiero no saturar el sitio web con complementos innecesarios, que además ralentizan la velocidad de carga de la página. Los conteos necesarios pueden hacerse mediante los eventos de Google Analytics.

Para enlazar este archivo desde una web primero necesitamos tenerlo en un hosting, puedes optar por diferentes métodos para subir el archivo PDF:

• Puedes optar por subirlo directamente a tu hosting por FTP.
• A tu hosting desde la biblioteca de medios de WordPress.
• O a otra plataforma tipo Dropbox.

Cualquiera que elijas va a permitir la posterior descarga del archivo.

Subir el archivo de descarga por FTP

Este es mi método preferido porque los archivos que subo no se entremezclan con las imágenes de la biblioteca de medios. Para acceder al hosting has de tener instalado un cliente FTP en tu ordenador.

Una vez has accedido al hosting crea una nueva carpeta en la raíz de tu sitio web y llámala “descargas-pdf”. Ábrela y añade dentro tu archivo pdf descargable.

Ya tienes el archivo disponible para su descarga y su url será algo así:

http://tudominio.es/descargas-pdf/pdf-descargable.pdf.

Subir el archivo para descargar a la biblioteca multimedia

Si no te convence el acceso por FTP a tu web, puedes añadir el archivo a descargar directamente a la biblioteca de medios de la misma forma en que subirías una imagen a WordPress. En este caso quedará mezclado entre las imágenes y por eso me gusta más subirlo por FTP.

Subir el archivo descargable a Dropbox

Como cada vez que se descargue el pdf desde tu hosting se sumará su peso a la transferencia de datos contratada, para evitarlo puedes optar por subir el archivo a Dropbox, desde donde ni la subida ni la posterior descarga afectarán a esa transferencia. Obtendrás la url al seleccionar la opción de compartir el archivo.

Insertar archivo para descargar en una entrada o página

Una vez hemos subido el archivo, que en este caso es un documento pdf, necesitamos enlazarlo para su posterior descarga. Lo haremos a través de un enlace en uno de nuestros post o páginas, y podemos crearlos de 3 formas distintas:

• Insertándolo como objeto.
• Creando el enlace en el editor visual.
• Creando el enlace en el editor de HTML.

Objeto desde la biblioteca multimedia

Puedes insertar el archivo descargable desde Añadir objeto enlazándolo a Archivo multimedia cuando lo asignes a la página o entrada, igual que lo harías con una imagen.

Enlazar el archivo a descargar desde el editor visual

También puedes añadirlo como cualquier otro enlace desde el editor visual, escribiendo el “anchor text” y seleccionándolo para más tarde convertirlo en enlace.

Enlazar el archivo a descargar desde el editor HTML

Si lo prefieres puedes añadirlo directamente desde el editor de código HTML de WordPress con el siguiente código como referencia:

<a href="http://tudominio.es/descargas-pdf/pdf-descargable.pdf">Descargar archivo desde aquí</a>

El código y el resultado de este proceso en tu entrada o página será el mismo para cualquiera de los tres sistemas, aunque si has subido el archivo a la biblioteca de medios la url te la dará WordPress y será algo así:

http://tudominio.es/tu-plantilla/wp-content/uploads/2017/04/pdf-descargable.pdf

Quedando el código del enlace:

<a href="http://tudominio.es/tu-plantilla/wp-content/uploads/2017/04/pdf-descargable.pdf">Descargar archivo desde aquí</a>

Opciones de descarga de archivos

Una vez tenemos enlazado el archivo podemos decidir su comportamiento al clicar sobre el link. Podemos hacer que el archivo se abra en la misma ventana del navegador, en una ventana diferente, o que se descargue directamente. Esta última opción solo es posible si el archivo descargable está en nuestro hosting y no en Dropbox o similar.

Para abrir el documento en una ventana diferente o para presentarlo con la opción de descarga directa necesitaremos manipular el código HTML del enlace de descarga, pero es algo muy sencillo que te explico a continuación.

Entra en el editor HTML de WordPress y busca el enlace dentro del código para poder manipularlo.

Visualizar el archivo descargable en la misma ventana

Es la forma habitual de mostrar cualquier enlace sea o no para la descarga de archivos. Al clicar sobre el link abrirá el archivo en la misma ventana del navegador en la que estemos. Una vez abierto podremos descargarlo.

En este caso no hemos tenido que añadir nada más al código del link.

<a href="http://tudominio.es/descargas-pdf/pdf-descargable.pdf">Descargar archivo desde aquí</a>

Visualizar el documento a descargar en una nueva ventana

Aquí la cosa cambia. El archivo pdf se abrirá en una ventana nueva permitiendo tener a la vista de forma simultánea nuestra página web y el pdf, que podremos descargar desde esta vista.

La diferencia con el código anterior es que añadiremos el atributo target=”_blank” al enlace.

<a href="http://tudominio.es/descargas-pdf/pdf-descargable.pdf" target="_blank">Descargar archivo desde aquí</a>

Descarga directa del pdf

En este caso el archivo se descargará directamente a nuestra carpeta de descargas sin más. Observa que se ha añadido el atributo download al enlace de descarga.

<a href="http://tudominio.es/descargas-pdf/pdf-descargable.pdf" download>Descargar archivo desde aquí</a>

Añadir pdf descargable en una web HTML

Lamentablemente de no ser que tu web disponga de un panel de control que permita subir archivos al hosting, deberás seguir las instrucciones para subir el pdf descargable por FTP que hemos visto anteriormente.

Implementar código HTML

Para escribir el código del enlace de descarga a tu página deberás acceder al documento HTML que corresponda e insertarlo con una de las diferentes opciones de código que acabamos de aprender.

¿Cómo presentar los enlaces para los archivos de descarga?

El diseño de tu web  y cómo se presenten sus elementos en ella puede afectar a las conversiones. Puedes presentar los enlaces de descarga de distintas formas en función de la cantidad que quieras añadir. Si solo tienes uno puedes presentarlo en forma de banner para que destaque entre el texto.

<a href="url del enlace"><img src="tu-imagen.jpg" title="título de la imagen" alt="texto alternativo"  width="900" height="176"/></a>

Pero en cambio si la página dispone de varios enlaces de descarga te recomiendo presentarlos en forma de lista.

<ul>
  <li><a href="url del enlace">Anchor text</a></li>
  <li><a href="url del enlace">Anchor text</a></li>
  <li><a href="url del enlace">Anchor text</a></li>
</ul>

•  Actividades extra escolares curso 2017
•  Excursiones 2017
•  Reuniones de padres 2017

Personaliza el diseño de los archivos descargables

Si quieres que el aspecto del link para tu archivo pdf descargable no sea el de un simple enlace y que además cuando crees otros tengan el mismo estilo, puedes personalizarlo con CSS añadiéndole una clase. Podrás darle por ejemplo el aspecto de un botón.

Para personalizar el enlace en WordPress te recomiendo que instales un tema hijo con el fin de evitar que las actualizaciones posteriores del CMS afecten a este código añadido. Si tu plantilla permite personalizar el CSS puedes hacerlo desde ese apartado si te es más cómodo.

Aquí tienes un completo tutorial sobre CSS para poder personalizar por completo tus enlaces de descarga.

Espero haberte aportado la información que buscabas, pero si necesitas ampliar algún concepto puedes recurrir al formulario de comentarios un poco más abajo. Si te ha gustado el artículo compártelo en las redes sociales 😉