Un lien de téléchargement direct est un lien qui télécharge le fichier lorsque vous cliquez, plutôt qu’un lien vers celui-ci dans la fenêtre de votre navigateur. La création d’un lien de téléchargement direct ou d’un bouton de téléchargement direct nécessite généralement l’ajout de PHP avancé côté serveur, la modification du fichier .htaccess et / ou javascript. Ne pas savoir ce que vous faites peut créer des risques de sécurité.

HTML5 a récemment introduit que Télécharger l’attribut comme solution simplifiée pour les téléchargements directs. L’attribut tente d’atteindre deux objectifs principaux: 1) L’attribut indique que le lien de destination sera téléchargé lorsque l’utilisateur clique dessus, et 2) La valeur de l’attribut sert de nom au fichier téléchargé.

Cette fonction est utile lorsque la situation nécessite d’enregistrer le fichier pour une visualisation ultérieure. Vous souhaiterez peut-être créer un téléchargement pour une liste de livres électroniques, un fichier multimédia acheté ou simplement une image haute résolution.

Aujourd’hui, je vais vous montrer comment ajouter un attribut de téléchargement à un lien ou à un bouton qui peut être utilisé pour télécharger un fichier directement sur l’ordinateur de l’utilisateur.

Créer manuellement un bouton de téléchargement direct

Ajout de l’attribut de téléchargement

La structure d’un lien avec l’attribut de téléchargement est assez simple. Ajoutez simplement « télécharger » dans le premier

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

Ajoutez la valeur d’attribut de téléchargement (ou le nom de fichier)

Vous pouvez également utiliser l’attribut de téléchargement pour spécifier un nom de fichier différent du nom de fichier d’origine. Ajoutez simplement le nouveau nom comme valeur de l’attribut de téléchargement:

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

Dans l’exemple ci-dessus, lorsqu’un utilisateur clique pour télécharger le lien, le fichier est enregistré sur son ordinateur avec le nom « nouveau nom » au lieu du nom de fichier d’origine « download-file.pdf ». Ceci est utile lorsque vous avez un fichier avec un nom long ou une chaîne. La nouvelle valeur de nom de fichier fournit un nom de fichier simple et facile à utiliser à utiliser à la place du nom de fichier plus déroutant. Dans la plupart des cas, il n’est pas nécessaire d’ajouter l’extension de fichier (par exemple .pdf) au nouveau nom de fichier car le navigateur ajoutera automatiquement l’extension au fichier.

Ajout de l’attribut cible de secours

Étant donné que l’attribut de téléchargement n’est toujours pas pris en charge par tous les navigateurs, il est conseillé d’ajouter l’attribut target = « _ blank » à votre lien. Cela ouvrira le lien dans un autre navigateur. C’est toujours une bonne pratique lors de la liaison vers un fichier. De cette façon, si le navigateur ne prend pas en charge l’attribut de téléchargement, il ouvrira simplement le fichier dans une nouvelle fenêtre, comme il le ferait sans l’attribut de téléchargement. Si le navigateur prend en charge l’attribut de téléchargement, il téléchargera l’image sans ouvrir une nouvelle fenêtre. C’est donc une bonne option de secours.

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

Transformez votre lien en bouton Divi

Un moyen rapide de transformer votre lien en bouton Divi est d’ajouter la classe « et_pb_button » à votre lien. La classe utilise le CSS déjà intégré dans Divi. Le bouton hérite de la couleur de la couleur du lien de votre corps. Donc, si vous souhaitez modifier le style du bouton, vous devez ajouter un style en ligne à votre lien ou ajouter une classe supplémentaire au lien et le styliser avec CSS.

Voici un exemple de notre lien de téléchargement direct avec la classe « et_pb_button » ajoutée.

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

Voici un exemple d’attribut de style en ligne qui change la couleur du bouton en orange:

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

Créer un bouton de téléchargement direct avec le module Divis Button

Créer un bouton

Pour ajouter une fonctionnalité de téléchargement direct à un module de boutons, vous devez d’abord créer un bouton lié à votre fichier comme d’habitude.

Insérez un module de boutons depuis le Divi Builder.

Dans les paramètres du module de boutons, mettez à jour les paramètres suivants:

Ajouter l’URL du bouton (Cela devrait être l’URL complète du fichier à télécharger)
L’URL s’ouvre: Dans le nouvel onglet (ceci est important comme solution de secours)
Ajouter le texte du bouton

Sous CSS personnalisé, ajoutez une classe CSS nommée « et-download-button ». Cette classe est utilisée pour cibler le bouton avec jQuery et ajouter l’attribut de téléchargement.

Sortie sûre

Découvrez votre nouveau bouton.

Actuellement, le bouton ouvre uniquement le fichier dans une nouvelle fenêtre. Pour ajouter l’attribut de téléchargement au lien du bouton, nous devons ajouter jQuery.

Ajouter le jQuery

Pour ajouter l’attribut de téléchargement au module de bouton, nous pouvons ajouter jQuery pour ajouter l’attribut de téléchargement au lien du module de bouton avec une classe spécifique. Dans cet exemple, nous ajoutons l’attribut download au module button avec la classe CSS « et_download-button » (la même classe que nous avons ajoutée au module button précédemment).

Pour ajouter le jQuery, allez dans Divi → Options du thème. Sous l’onglet Intégration, collez le code suivant dans la zone de texte « Ajouter du code à l’en-tête de votre blog »:

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

Ce code ajoute l’attribut download à chaque lien créé par le module button avec la classe et_download_button. Cependant, ce code n’ajoute pas la nouvelle valeur de nom de fichier à l’attribut de téléchargement, qui remplace le nom de fichier d’origine. Je l’ai laissé de côté pour que vous puissiez ajouter la classe et_download_button aux futurs modules de boutons sans attribuer le même nouveau nom de fichier à chaque fichier téléchargé.

Si vous souhaitez ajouter la nouvelle valeur de nom de fichier à votre module de bouton, vous pouvez l’ajouter au code jQuery. Par exemple, si je voulais que mon module de boutons renomme mon fichier de téléchargement en « Fichier image », j’utiliserais cet extrait de code jQuery à la place:

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

Désormais, lorsque vous cliquez sur le bouton, le fichier téléchargé (quel que soit son nom d’origine) sera appelé « fichier image ». Et comme mentionné précédemment, le navigateur détectera automatiquement l’extension de fichier et l’ajoutera.

C’est ça. Vous pouvez maintenant ajouter la fonction de téléchargement direct à l’un de vos boutons à l’aide du module de boutons.

Prise en charge actuelle du navigateur

Au moment d’écrire ces lignes, l’attribut de téléchargement n’est pas pris en charge par Safari (iOS et OXS), Opera Mini ou Internet Explorer. Regardez ça Prise en charge actuelle du navigateur pour l’attribut de téléchargement.

Pour des raisons de sécurité, Firefox ne prend en charge que les liens de téléchargement de même origine. Cela signifie essentiellement que vous ne pouvez pas diriger les liens de téléchargement avec un nom de domaine différent ou des liens hébergés sur différents serveurs.

Les replis

Étant donné que l’attribut de téléchargement n’offre pas une prise en charge étendue du navigateur, je recommande de mettre en œuvre une option de secours pour les autres navigateurs. L’avantage de l’attribut de téléchargement est que le lien fonctionne également dans les navigateurs qui ne le prennent pas en charge. Il est toujours lié au fichier comme d’habitude. Pour cette raison, je suggérerais d’utiliser « target = _blank » (l’attribut qui ouvrira votre lien dans une nouvelle fenêtre ou un nouvel onglet) dans votre structure de lien. Cela ouvrira le fichier dans un onglet différent si le navigateur ne prend pas en charge l’attribut de téléchargement.

Utiliser des fichiers compressés

Si vous êtes globalement contre l’attribut de téléchargement en raison d’une prise en charge incohérente du navigateur, vous pouvez essayer de compresser votre fichier téléchargé dans un fichier zip qui oblige généralement le visiteur à télécharger le fichier au lieu de le visualiser.

Télécharger les popups

Selon votre navigateur, votre lien de téléchargement direct peut déclencher une fenêtre contextuelle de téléchargement vous demandant ce que vous voulez faire avec ce fichier. Cela ne signifie pas que le lien ne fonctionne pas. La notification est requise pour des raisons de sécurité. Voici un exemple de popup de téléchargement lorsque vous cliquez sur un lien de téléchargement direct sur un fichier PDF:

Dernières pensées

Je suis conscient qu’il existe des solutions plus traditionnelles et plus compliquées pour forcer les téléchargements. J’ai décidé de rester simple et de proposer une solution sans les tracas des solutions PHP ou JS avancées.

L’ajout de l’attribut de téléchargement à un lien est aussi simple que l’ajout de « Télécharger » au -Jour. Le nom du fichier peut être défini librement avec la valeur facultative.

Avec un peu de jQuery, ajouter des fonctionnalités au module Divi Button est aussi simple que d’ajouter une classe personnalisée au module.

Bien que l’attribut de téléchargement ne soit pas encore entièrement pris en charge par tous les navigateurs, il s’agit toujours d’une solution simple et pratique. Étant donné que l’attribut est ignoré par les navigateurs non pris en charge, le lien fonctionnera toujours et s’ouvrira dans la fenêtre de votre navigateur.

Espérons que ce sera une ressource utile pour le prochain client qui demande un lien de téléchargement direct.

J’ai hâte de vous entendre dans les commentaires.





Source link

Recent Posts