ケケンタ

WordPressでリンクをクリックしたら画像やファイルをダウンロードできるようにしたいんだけど、具体的にはどうすれば良いんだろう……

今回はこのようなお悩みをお持ちの方に向けて

WordPressでクリックしたら画像やファイルを
ダウンロードできるリンクを作成する方法

をご紹介していきます。

ケケンタ

基本的なやり方はWordPressを使わない場合（HTMLサイト）と同じですが、WordPressではダウンロード用リンクをカスタムフィールドを用いて設置するのが便利なので、今回はその方向性で解説をしていきます。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

今回使用する技術・機能の解説

具体的な解説に入る前に、まずは今回使用する技術・WordPressの機能についてご紹介をします。

ケケンタ

まずはこれら２つの技術・機能について具体的にご紹介していきます。

aタグのdownload属性

みなさんご存じのaタグには、download属性というものが使用できます。

これをaタグに指定するだけで、実は簡単に「画像やファイルをダウンロードできるリンク」ができあがります。

aタグにdownload属性を指定する（実例）

<a href="ダウンロードさせたいファイルの絶対パスまたは相対パス" download>リンク名</a>

この書き方の場合、ダウンロードしたファイル名はパスで使用しているファイル名そのままになる

ダウンロードするファイルの名前を指定したい場合

<a href="ダウンロードさせたいファイルの絶対パスまたは相対パス" download="任意のファイル名">リンク名</a>

ケケンタ

aタグにこのように記述するだけで簡単にダウンロード用リンクが作成できます。

ただし、aタグのdownload属性には使用上の注意点があります。

以下の点に気を付けて使用するようにしましょう。

ACFのファイルフィールド

続いて使用するのがWordPressプラグインの「ACF」です。

今回はこのACFの「ファイルフィールド」を使用してダウンロード用リンクを設置します。

ファイルフィールドを使用するとあらゆるタイプのファイルをカスタムフィールドに設定できる。

WordPressにアップロードできるファイルタイプを増やす方法

ここまでに「ダウンロード用リンクをWordPressで設定するために使用する技術・機能」をご紹介してきました。

しかし、WordPressの場合はそれだけでは以下の理由により、対応が不十分になってしまう場合があるため、本章ではそれを補うためのプラグインをもうひとつご紹介します。

WordPressの初期状態ではai形式やsvg形式など特殊なファイルをアップロードできない

様々なタイプのファイルをアップロードできるようにするためのプラグインとして「WP Add Mime Types」を使用します。

ケケンタ

以下は「WP Add Mime Types」の設定画面です。

「WP Add Mime Types」をインストールして有効化するだけで、様々なタイプのファイルのアップロードができるようになります。

「ai」や「eps」形式もアップロード可能にしたいとき

ただ、実を言うと「WP Add Mime Types」を有効化しただけでは「ai」や「eps」形式のファイルをアップロードすることはできません。

ケケンタ

もしも「ai」や「eps」形式もアップロード可能にしたいときは、
「WP Add Mime Types」の「追加の項目」に以下の2行を追加し「設定を保存」をクリックします。

「追加の項目」に以下の2行を追加

ai = application/postscript
eps = appilcation/postscript

ケケンタ

たったこれだけで、「ai」や「eps」形式のファイルもアップロードできるようになります。

ワンクリックで画像がダウンロードできるリンクの作成手順

前置きが長くなりましたが、ここからは具体的に

「WordPressでクリックしたら画像やファイルをダウンロードできるリンクを作成する方法」

を解説していきます。

① ACFのファイルフィールドを設定

まずはACFをインストールし、ファイルフィールドの設定を行います。

実際の設定内容の例

② 作成したファイルフィールドにファイルを設定

続いて投稿画面で、作成したファイルフィールドに実際にファイルを設定します。

JPGファイルを設定した例

③ テンプレートファイルにソースコードを記述

最後に、ダウンロード用リンクを出力したいテンプレートファイル内に以下のソースコードを記述します。

テキストリンクのみを表示する場合

<!-- フィールド名「file」を取得 -->
<?php $filefield = get_field('file'); ?>

<!-- ファイルが設定されていたらダウンロード用リンクを設置 -->
<?php if(!empty($filefield)): ?>
    <a href="<?php echo $filefield['url']; ?>" download>ダウンロード >></a>
<?php endif; ?>

プレビュー付き表示にしたい場合（こちらは画像ファイルでのみ可能）

<!-- フィールド名「file」を取得 -->
<?php $filefield = get_field('file'); ?>

<!-- ファイルが設定されていたらダウンロード用のプレビュー付きリンクを設置 -->
<?php if(!empty($filefield)): ?>
    <a href="<?php echo $filefield['url']; ?>" download><img src="<?php echo $filefield['url']; ?>"></a>
<?php endif; ?>

ケケンタ

以上により、テキストあるいは画像をクリックすることで、そのファイルをダウンロードできるリンクの作成ができました！

まとめ

いかがだったでしょうか。

前置きこそ長くなってしまいましたが、手順自体は意外とシンプルで簡単だったのではないかと思います。

ケケンタ

今回の方法はPDFファイルや画像など、サイトを訪れたユーザにダウンロードさせたいファイルがあるときに有効です。

この記事の内容がお役に立ったなら何よりです。

最後までご覧いただきありがとうございました！