ダウンロード属性を使用してDiviで直接（シングルクリック）ダウンロードボタンを作成する方法

公開: 2017-04-28

直接ダウンロードリンクは、ブラウザウィンドウでファイルにリンクするのではなく、クリックするとファイルのダウンロードを開始するリンクです。直接ダウンロードリンクまたはボタンを作成するには、通常、サーバー側で高度なPHPを追加し、.htaccessファイルやjavascriptを変更する必要があります。自分が何をしているのかを知らない限り、これはセキュリティ上のリスクをもたらす可能性があります。

HTML5は最近、直接ダウンロードのより単純化されたソリューションとしてダウンロード属性を導入しました。この属性は、主に2つのことを実行しようとします。1）属性は、クリック時にターゲットリンクがダウンロードされることを指定し、2）属性の値は、ダウンロードされたファイルの名前として機能します。

この機能は、後で表示するためにファイルを保存する必要がある場合に役立ちます。電子書籍のオファー、購入したメディアファイル、または単に高解像度の画像のダウンロードを作成することをお勧めします。

今日は、ファイルをユーザーのコンピューターに直接ダウンロードできるようにするリンクまたはボタンにダウンロード属性を追加する方法を紹介します。

直接ダウンロードボタンを手動で作成する

ダウンロード属性の追加

ダウンロード属性を持つリンクの構造は非常に単純です。ファイルのURLを含む「href」属性とともに、先頭の<a>タグ内に「download」を追加するだけです。

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

ダウンロード属性値（またはファイル名）の追加

ダウンロード属性を使用すると、元のファイル名以外のファイル名を指定することもできます。ダウンロード属性の値として新しい名前を追加するだけです。

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

上記の例では、ユーザーがクリックしてリンクをダウンロードすると、ファイルは元のファイル名「download-file.pdf」ではなく「newname」という名前でコンピューターに保存されます。これは、長い名前または文字列を含むファイルがある場合に役立ちます。新しいファイル名の値は、より紛らわしいファイル名の代わりに使用される、シンプルでユーザーフレンドリーなファイル名を提供します。また、ほとんどの場合、ファイル拡張子（.pdfなど）を新しいファイル名に追加する必要はありません。ブラウザがファイルに拡張子を自動的に追加するため、ファイル名。

ターゲット属性フォールバックの追加

ダウンロード属性はまだすべてのブラウザでサポートされているわけではないため、target =” _ blank”属性をリンクに追加することをお勧めします。これにより、別のブラウザでリンクが開きます。これは、ファイルにリンクするときに常に良い習慣です。そうすれば、ブラウザがダウンロード属性をサポートしていない場合、ダウンロード属性がない場合と同じように、ファイルを新しいウィンドウで開くだけです。さらに、ブラウザがダウンロード属性をサポートしている場合、新しいウィンドウを開かずに画像をダウンロードします。したがって、これは適切なフォールバックオプションです。

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

リンクをDiviボタンに変える

リンクをDiviボタンに変える簡単な方法は、「et_pb_button」クラスをリンクに追加することです。このクラスは、すでに組み込まれているCSSをDiviに適用します。ボタンはボディリンクの色の色を継承するため、ボタンのスタイルを変更する場合は、リンクにインラインスタイルを追加するか、リンクにクラスを追加してCSSを使用してスタイルを設定する必要があります。

これは、「et_pb_button」クラスが追加された直接ダウンロードリンクの例です。

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

ボタンの色をオレンジ色に変更するインラインスタイル属性の例を次に示します。

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

Diviのボタンモジュールを使用して直接ダウンロードボタンを作成する

ボタンの作成

ボタンモジュールに直接ダウンロード機能を追加するには、最初に、通常どおりにファイルにリンクするボタンを作成する必要があります。

DiviBuilder内からボタンモジュールを挿入します。

ボタンモジュール設定で、次の設定を更新します。

ボタンのURLを追加（これはダウンロード用のファイルへの完全なURLである必要があります）
URLが開きます：[新しい]タブ（これはフォールバックとして重要です）
ボタンテキストを追加

カスタムCSSの下に、「et-download-button」というCSSクラスを追加します。このクラスは、jQueryでボタンをターゲットにし、ダウンロード属性を追加するために使用されます。

保存して終了

新しいボタンをチェックしてください。

現在、ボタンはファイルを新しいウィンドウでのみ開きます。ダウンロード属性をボタンリンクに追加するには、jQueryを追加する必要があります。

jQueryの追加

ダウンロード属性をボタンモジュールに追加するために、jQueryを追加して、ダウンロード属性を特定のクラスのボタンモジュールリンクに挿入できます。この例では、CSSクラス「et_download-button」（以前にボタンモジュールに追加したのと同じクラス）を使用して、ダウンロード属性をボタンモジュールに追加します。

jQueryを追加するには、Divi→テーマオプションに移動します。 [統合]タブで、[ブログの先頭にコードを追加する]テキストボックスに次のコードを挿入します。

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

このコードは、クラス「et_download_button」を持つボタンモジュールによって作成されたリンクにダウンロード属性を追加します。ただし、このコードは、元のファイル名を上書きする新しいファイル名の値をダウンロード属性に追加しません。すべてのダウンロードファイルに同じ新しいファイル名を指定しなくても、クラス「et_download_button」を将来のボタンモジュールに追加できるように、省略しました。

ボタンモジュールに新しいファイル名の値を追加する場合は、jQueryコードに追加できます。たとえば、ボタンモジュールでダウンロードファイルの名前を「image-file」に変更する場合は、代わりに次のjQueryスニペットを使用します。

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

これで、ボタンをクリックすると、ダウンロードされたファイル（元の名前に関係なく）に「image-file」という名前が付けられます。また、前述したように、ブラウザはファイル拡張子を自動的に検出して追加します。

それでおしまい。これで、ボタンモジュールを使用して、任意のボタンに直接ダウンロード機能を追加できます。

現在のブラウザサポート

この投稿の執筆時点では、ダウンロード属性はSafari（iOSおよびOXS）、Opera Mini、またはInternetExplorerではサポートされていません。ダウンロード属性については、この最新のブラウザサポートを確認してください。

Firefoxは、セキュリティ上の理由から同一生成元のダウンロードリンクのみをサポートします。つまり、基本的に、異なるドメイン名のダウンロードリンクや、異なるサーバーでホストされているリンクを直接ダウンロードすることはできません。

フォールバック

ダウンロード属性には広範なブラウザサポートがないため、他のブラウザにフォールバックオプションを実装することをお勧めします。ダウンロード属性の優れている点は、リンクがサポートされていないブラウザでも引き続き機能することです。それでも通常どおりファイルにリンクします。そのため、リンク構造内で「target = _blank」（新しいウィンドウまたはタブでリンクを開く属性）を使用することをお勧めします。そうすれば、ブラウザがダウンロード属性をサポートしていない場合、別のタブでファイルを開きます。

圧縮ファイルの使用

ブラウザのサポートに一貫性がないためにダウンロード属性に完全に反対している場合は、ダウンロードファイルをzipファイルに圧縮してみてください。通常、訪問者はファイルを表示する代わりにダウンロードする必要があります。

ポップアップをダウンロード

ブラウザによっては、直接ダウンロードリンクによって、「このファイルで何をしたいですか？」という行に沿って何かを尋ねるダウンロードポップアップがトリガーされる場合があります。これは、リンクが機能していないことを意味するものではありません。通知はセキュリティ上の理由から必要です。 PDFファイルの直接ダウンロードリンクをクリックしたときのダウンロードポップアップの例を次に示します。

最終的な考え

ダウンロードを強制するための、より伝統的で複雑なソリューションがあることを私は知っています。私はそれをシンプルに保ち、より高度なphpまたはjsソリューションの手間をかけずにソリューションを提供することにしました。

ダウンロード属性をリンクに追加するのは、<a>タグに「ダウンロード」を追加するのと同じくらい簡単です。また、オプションの値を使用して、ファイル名を任意の値に設定できます。

さらに、小さなjQueryを配置すれば、Divi Button Moduleに機能を追加するのは、モジュールにカスタムクラスを追加するのと同じくらい簡単です。

ダウンロード属性はまだすべてのブラウザで完全にサポートされているわけではありませんが、それでもシンプルで実用的なソリューションです。サポートされていないブラウザでは属性が無視されるため、リンクは引き続き機能し、ブラウザウィンドウで開きます。

うまくいけば、これは直接ダウンロードリンクを要求する次のクライアントにとって有用なリソースになるでしょう。

コメントでお返事をお待ちしております。