Seleziona una pagina

Compatibilità del sistema nei vari browsers

Non tutti i Browsers supportano l’attributo “download” per i link.

In questo momento, ad esempio, non è supportato da Internet Explorer, Safari (Apple) e Opera Mini.

Firefox lo supporta, ma solo se il download diretto è di un file all’interno del vostro sito: non è possibile fare download diretti di file ospitati su server diversi e con nome dominio diverso.

Proprio per questo motivo risolviamo con il “target = _blank” (l’attributo che apre il tuo link in una nuova finestra o scheda): in questo modo se il browser non supporta il download diretto aprirà il file in una nuova scheda.

Inoltre a seconda del browser il download diretto potrebbe attivare un popup di sicurezza che chiede all’utente “Cosa vuoi fare con questo file? Lo vuoi aprire o scaricare?”.

Questo popup non è sintomo che la guida che vi presenterò non funziona ma è una notifica necessaria per motivi di sicurezza che dipende dal Browser.

Sebbene l’attributo di download non sia ancora pienamente supportato da tutti i browser, è comunque la soluzione più semplice, veloce e pratica per il download diretto.

Qui puoi contrarre la compatibilità dell’attributo “download” nei vari browser esistenti: https://caniuse.com/#feat=download

Con Divi Builder

1.Inserisci un modulo “Button” con il Divi Builder

2.Apri le impostazioni generali del modulo e modificale come segue

  • Button URL: /wp-content/uploads/image.jpg (url relativo non assoluto: senza nome del dominio)
  • Url Opens: In nuova finestra
  • Button Text: download

3.Vai nelle impostazioni avanzate e modificale cosi:

  • CSS Class: et-download-button

4.Aggiungiamo jQuery che si riferisce alla classe css che abbiamo dato al modulo:

  • Vai su Divi> Opzioni Tema > Integrazione > Header e aggiungi:
<script>jQuery(document).ready(function() {var downloadButton = jQuery('.et-download-button');<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>downloadButton.each(function(index) {jQuery(this).attr('download', '');});});</script>

 

Aggiungi questo invece se vuoi che il tuo file abbia un nome diverso anzichè quello originale.
In questo caso ogni file scaricato si chiamerà “image-file”, ma puoi modificare il codice affinchè si chiami come preferisci.

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

 

Ogni volta che vorrai aggiungere un download diretto ti basterà aggiungere la classe css “et-download-button”.

Senza Divi Builder

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