Cómo crear un botón de descarga directa (un solo clic) en Divi usando el atributo de descarga

Un enlace de descarga directa es un enlace que comienza a descargar el archivo al hacer clic en lugar de enlazarlo en la ventana de su navegador. La creación de un enlace o botón de descarga directa generalmente requiere agregar PHP avanzado en el lado del servidor, modificar el archivo .htaccess y / o javascript. A menos que sepa lo que está haciendo, esto puede presentar algunos riesgos de seguridad.

HTML5 introdujo recientemente el atributo de descarga como una solución más simplificada para descargas directas. El atributo busca lograr dos cosas principales: 1) el atributo especifica que el enlace de destino se descargará al hacer clic y 2) el valor del atributo servirá como el nombre del archivo descargado.

Esta función es útil cuando la situación requiere almacenar el archivo para verlo más tarde. Es posible que desee crear una descarga para una oferta de libro electrónico, un archivo multimedia comprado o simplemente una imagen de alta definición.

Hoy les mostraré cómo agregar un atributo de descarga a un enlace o botón que permitirá descargar un archivo directamente en la computadora del usuario.

Creación manual de un botón de descarga directa

Agregar el atributo de descarga

La estructura de un enlace con el atributo de descarga es bastante sencilla. Simplemente agregue "descargar" dentro de la etiqueta inicial <a> junto con su atributo "href" que contiene la URL de su archivo.

<a href="/files/download-file.pdf" download >Download Link</a>

Agregar el valor de atributo de descarga (o nombre de archivo)

El atributo de descarga también le permite designar un nombre de archivo que no sea el nombre del archivo original. Simplemente agregue el nuevo nombre como valor del atributo de descarga:

<a href="/files/download-file.pdf" download="newname" >Download Link</a>

En el ejemplo anterior, cuando un usuario hace clic para descargar el enlace, el archivo se almacenará en su computadora con el nombre "newname" en lugar del nombre de archivo original "download-file.pdf". Esto es útil cuando tiene un archivo con un nombre largo o una cadena de caracteres. El nuevo valor de nombre de archivo proporcionará un nombre de archivo simple y fácil de usar. Que se usará en lugar del nombre de archivo más confuso. Además, en la mayoría de los casos, no es necesario agregar la extensión del archivo (es decir .pdf) al nuevo nombre de archivo ya que el navegador agregará automáticamente la extensión al archivo.

Agregar el respaldo del atributo de destino

Debido a que el atributo de descarga aún no es compatible con todos los navegadores, es una buena idea agregar el atributo target = ”_ blank” a su enlace. Esto abrirá el enlace en otro navegador. Esta es siempre una buena práctica cuando se vincula a un archivo. De esa manera, si el navegador no admite el atributo de descarga, simplemente abrirá el archivo en una nueva ventana tal como lo haría sin el atributo de descarga. Además, si el navegador admite el atributo de descarga, descargará la imagen sin abrir una nueva ventana. Así que esta es una buena opción alternativa.

<a href="/files/download-file.pdf" download="newname" target="_blank" >Download Link</a>

Convirtiendo su enlace en un botón Divi

Una forma rápida de convertir su enlace en un botón Divi es agregar la clase "et_pb_button" a su enlace. La clase aplicará el CSS ya integrado en Divi. El botón heredará el color del enlace de su cuerpo, por lo que si desea cambiar el estilo del botón, deberá agregar un estilo en línea a su enlace o agregar una clase adicional al enlace y darle estilo usando CSS.

Aquí hay un ejemplo de nuestro enlace de descarga directa con la clase "et_pb_button" agregada.

<a href="/files/download-file.pdf" download="newname" target="_blank" class="et_pb_button" >Download Link</a>

A continuación, se muestra un ejemplo de un atributo de estilo en línea que cambiará el color del botón a naranja:

<a href="/files/download-file.pdf" download="newname" target="_blank" class="et_pb_button" style="color: #dd9933;">Download Link</a>

Creación de un botón de descarga directa con el módulo de botones de Divi

Creando el Botón

Para agregar la funcionalidad de descarga directa a un módulo de botones, primero debe crear un botón que se vincule a su archivo como lo haría normalmente.

Inserte un módulo de botones desde el Divi Builder.

En la Configuración del módulo de botones, actualice la siguiente configuración:

Agregar URL del botón (debe ser la URL completa del archivo para descargar)
Url se abre : en la nueva pestaña (esto es importante como alternativa)
Agregar texto de botón

En CSS personalizado, agregue una clase CSS llamada "et-download-button". Esta clase se utilizará para apuntar al botón con jQuery y agregar el atributo de descarga.

Guardar la salida

Mira tu nuevo botón.

Actualmente, el botón solo abrirá el archivo en una nueva ventana. Para agregar el atributo de descarga al enlace del botón, necesitamos agregar algo de jQuery.

Añadiendo jQuery

Para agregar el atributo de descarga al módulo de botones, podemos agregar algo de jQuery para insertar el atributo de descarga en el enlace del Módulo de botones con una determinada clase. Para este ejemplo, vamos a agregar el atributo de descarga al Módulo de botones con la clase CSS “et_download-button” (la misma clase que agregamos anteriormente al Módulo de botones).

Para agregar jQuery, vaya a Divi → Opciones de tema. En la pestaña Integración, inserte el siguiente código en el cuadro de texto "agregar código al encabezado de su blog":

<script>
jQuery(document).ready(function() {
  var downloadButton = jQuery('.et-download-button');
   
  downloadButton.each(function(index) {
    jQuery(this).attr('download', '');
  });
});
</script>

Este código agregará el atributo de descarga a cualquier enlace creado por el módulo de botón con la clase "et_download_button". Sin embargo, este código no agrega el nuevo valor de nombre de archivo al atributo de descarga que reemplaza el nombre de archivo original. Lo dejé fuera para que pueda agregar la clase "et_download_button" a los módulos de botones futuros sin tener el mismo nombre de archivo nuevo asignado a cada archivo de descarga.

Si desea agregar el nuevo valor de nombre de archivo a su módulo de botón, puede agregarlo al código jQuery. Por ejemplo, si quiero que mi módulo de botones cambie el nombre de mi archivo de descarga como "archivo de imagen", usaría este fragmento de jQuery en su lugar:

<script>
jQuery(document).ready(function() {
  var downloadButton = jQuery('.et-download-button');
  
  downloadButton.each(function(index) {
    jQuery(this).attr('download', 'image-file');
  });
});
</script>

Ahora, cuando se hace clic en el botón, el archivo descargado (independientemente de su nombre original) se llamará "archivo de imagen". Y como mencioné anteriormente, el navegador detectará y agregará automáticamente la extensión del archivo.

Eso es todo. Ahora puede agregar la funcionalidad de descarga directa a cualquiera de sus botones usando el Módulo de botones.

Soporte de navegador actual

En el momento de escribir esta publicación, el atributo de descarga no es compatible con Safari (iOS y OXS), Opera Mini o Internet Explorer. Consulte este soporte de navegador actualizado para el atributo de descarga.

Firefox solo admite enlaces de descarga del mismo origen por razones de seguridad, lo que básicamente significa que no puede dirigir enlaces de descarga con un nombre de dominio diferente o enlaces alojados en diferentes servidores.

Los Fallbacks

Dado que el atributo de descarga carece de un soporte de navegador generalizado, sugiero implementar una opción de respaldo para los otros navegadores. Lo mejor del atributo de descarga es que el enlace seguirá funcionando en navegadores que no lo admitan. Todavía se vinculará al archivo como de costumbre. Es por eso que sugeriría usar "target = _blank" (el atributo que abre su enlace en una nueva ventana o pestaña) dentro de su estructura de enlace. De esa manera, si el navegador no admite el atributo de descarga, abrirá el archivo en otra pestaña.

Usar archivos comprimidos

Si está en contra del Atributo de descarga por completo debido a la compatibilidad inconsistente del navegador, puede intentar comprimir su archivo de descarga en un archivo zip que generalmente obliga al visitante a descargar el archivo en lugar de verlo.

Descargar ventanas emergentes

Dependiendo de su navegador, su enlace de descarga directa puede activar una ventana emergente de descarga que pregunte algo como "¿Qué desea hacer con este archivo?". Esto no significa que el enlace no funcione. La notificación es necesaria por motivos de seguridad. A continuación, se muestra un ejemplo de una ventana emergente de descarga al hacer clic en un enlace de descarga directa de un archivo pdf:

Pensamientos finales

Soy consciente de que existen soluciones más tradicionales y complicadas para forzar las descargas. Decidí mantenerlo simple y ofrecer una solución sin el alboroto de soluciones php o js más avanzadas.

Agregar el atributo de descarga a un enlace es tan simple como agregar "descargar" a la etiqueta <a>. Y el valor opcional puede configurar el nombre del archivo para que sea lo que desee.

Además, con un poco de jQuery en su lugar, agregar la funcionalidad al módulo Divi Button es tan simple como agregar una clase personalizada al módulo.

Aunque el atributo de descarga aún no es totalmente compatible con todos los navegadores, sigue siendo una solución sencilla y práctica. Dado que los navegadores no compatibles ignoran el atributo, el enlace seguirá funcionando y se abrirá en la ventana de su navegador.

Con suerte, este será un recurso útil para el próximo cliente que solicite un enlace de descarga directa.

Espero tener noticias tuyas en los comentarios.