ケケンタWordPressでリンクをクリックしたら画像やファイルをダウンロードできるようにしたいんだけど、具体的にはどうすれば良いんだろう……
今回はこのようなお悩みをお持ちの方に向けて
WordPressでクリックしたら画像やファイルを
ダウンロードできるリンクを作成する方法
をご紹介していきます。
ケケンタ基本的なやり方はWordPressを使わない場合（HTMLサイト）と同じですが、WordPressではダウンロード用リンクをカスタムフィールドを用いて設置するのが便利なので、今回はその方向性で解説をしていきます。
格安レンタルサーバーを
お探しなら
格安サーバーをお探しならリトルサーバーがおすすめ！
- 月額150円～利用可能
- 標準で全サーバー毎日自動バックアップ付き
- 全プランWordPress対応（簡単インストール機能付き）
- 独自SSLが無料（全プランがSSLに完全対応）
- 提供ドメインが複数あるため独自ドメインが無くても複数サイト運営可能
- 独自ドメイン無制限（サブドメインも無制限で利用可能）
- 無料お試し期間がある
リトルサーバーの最大の特徴は安価な月額料金です
＼ 利用料金比較表 ／
| ミニプラン | ワードプラン | リトルプラン | ビッグプラン | |
|---|---|---|---|---|
| 月額料金 | 150円～ | 195円～ | 250円～ | 430円～ |
| SSD容量 | 20GB | 30GB | 60GB | 120GB |
| 提供ドメイン | アカウント＋２ | アカウント＋２ | アカウント＋３ | アカウント＋５ |
| 独自ドメイン | 無制限 | |||
| バックアップ | ７日分 | |||
有名なサーバーだと月額料金は1000円前後であることが普通です。
仮にリトルサーバーで同じ料金（1000円）を支払ったとすると
最も安いミニプランだと半年分、
おすすめのリトルプランでも４カ月分のサーバーがレンタル可能！
こんな方にオススメ
- 実案件でテスト用のサーバーを用意したい
- とりあえずサーバーというものに触れてみたい
- 試しにWordPressを本番運用してみたい
- いま利用しているサーバーが高額だから安価なレンタルサーバーに乗り換えたい
ケケンタリトルサーバーには無料お試し期間があります。
ご興味のある方は是非ご検討してみてはいかがでしょうか。
＼無料お試しのお申し込みはこちら／
「仕事が忙しい方」、「すぐに商品が欲しい方」にピッタリのサービス
日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる
最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る
※ご注文の時間帯やお住まいの地域によります。
Amazonプライムの無料体験は「何度でも」利用可能
Amazonプライムの無料体験を何度も利用する方法
- Amazonプライムに会員登録する
- 会員の自動更新を解除しておく＝期限が来たら自動解約
- １～３ヶ月ぐらいすると再度無料体験の案内が表示される
ケケンタ僕自身、過去に少なくとも３回は無料体験を利用しています。
今回使用する技術・機能の解説
具体的な解説に入る前に、まずは今回使用する技術・WordPressの機能についてご紹介をします。
- aタグのdownload属性
- WordPressプラグイン「ACF」のファイルフィールド
ケケンタまずはこれら２つの技術・機能について具体的にご紹介していきます。
aタグのdownload属性
みなさんご存じのaタグには、download属性というものが使用できます。
これをaタグに指定するだけで、実は簡単に「画像やファイルをダウンロードできるリンク」ができあがります。
aタグにdownload属性を指定する（実例）
<a href="ダウンロードさせたいファイルの絶対パスまたは相対パス" download>リンク名</a>この書き方の場合、ダウンロードしたファイル名はパスで使用しているファイル名そのままになる
ダウンロードするファイルの名前を指定したい場合
<a href="ダウンロードさせたいファイルの絶対パスまたは相対パス" download="任意のファイル名">リンク名</a>aタグにこのように記述するだけで簡単にダウンロード用リンクが作成できます。
ただし、aタグのdownload属性には使用上の注意点があります。
以下の点に気を付けて使用するようにしましょう。
- 外部のサイトのファイルをダウンロードさせることはできない（自サイト内＝同じドメインのファイルのみダウンロード可能）
- IEは非対応（別タブで開く動作になる）
ACFのファイルフィールド
続いて使用するのがWordPressプラグインの「ACF」です。
ACFは誰でも簡単にカスタムフィールドの追加・編集を可能にする、WordPressプラグインのひとつです。
カスタムフィールドを自作しようとすると、functions.phpに何行ものコードを記述する必要があり手間がかかりますが、ACFを利用することで簡単に様々な種類のカスタムフィールドを導入できます。
今回はこのACFの「ファイルフィールド」を使用してダウンロード用リンクを設置します。
ファイルフィールドを使用するとあらゆるタイプのファイルをカスタムフィールドに設定できる。
WordPressにアップロードできるファイルタイプを増やす方法
ここまでに「ダウンロード用リンクをWordPressで設定するために使用する技術・機能」をご紹介してきました。
しかし、WordPressの場合はそれだけでは以下の理由により、対応が不十分になってしまう場合があるため、本章ではそれを補うためのプラグインをもうひとつご紹介します。
様々なタイプのファイルをアップロードできるようにするためのプラグインとして「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のファイルフィールドを設定
まずは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ファイルや画像など、サイトを訪れたユーザにダウンロードさせたいファイルがあるときに有効です。
この記事の内容がお役に立ったなら何よりです。
最後までご覧いただきありがとうございました！
コメント