ケケンタ

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ファイルや画像など、サイトを訪れたユーザにダウンロードさせたいファイルがあるときに有効です。

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

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

ケケンタ

こんにちは！　ケケンタです。

あまり無いケースかもしれませんが、過去に「同じカスタムフィールドで画像もPDFもどっちもアップロードできるようにしてほしい」という案件に当たりました。

単純にアップロードできるようにするだけであればACFのファイルフィールドを使用すれば簡単に実装可能なのですが、このときは「ファイルの種類に応じて出力の仕方（つまりHTML部分）」を変える必要がありました。

今回はそのときの経験を元に

１つのカスタムフィールドで画像やPDFなど
様々な種類のファイルをアップロードでき、
それを別々のHTMLで出力する方法

を解説していきます。

あわせて読みたい

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

ACFの「ファイル」フィールドを使用して画像とPDFの両方に対応する

今回の解説では「画像」と「PDF」の２種類を例として扱います。

また、今回はWordPressプラグインの「ACF」を使用します。

全体の作業の大まかな流れは次の通りです。

ケケンタ

順番に詳しく解説していきます！

STEP１　ACFで「ファイル」フィールドを設定する

まずはACFで「ファイル」フィールドを設定していきます。

実際の設定内容

「返り値」を「ファイル配列」にするところがポイントです。

STEP２　対象ページのテンプレートファイルにコードを記述する

続いて、対象ページのテンプレートファイルで「ファイル」フィールドに設定された画像・PDFを出力するためのコードを記述していきます。

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

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

<!-- フィールド名「file」の中身の有無を確認 -->
<?php if(!empty($filefield)): ?>

    <!-- mime_typeでファイルの種類を判定 -->
	<?php if( $filefield['mime_type'] == 'application/pdf' ) : ?>
		
        <!-- ここにPDFを出力するときに使用するHTMLを記述 -->

    <?php elseif( $filefield['mime_type'] == 'image/jpeg' ) : ?>

        <!-- ここに画像（jpg形式）を出力するときに使用するHTMLを記述 -->

    <?php endif; ?>
<?php endif;  ?>

ケケンタ

ポイントは次の通りです。

使用例

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

<!-- フィールド名「file」の中身の有無を確認 -->
<?php if(!empty($filefield)): ?>

    <!-- mime_typeでファイルの種類を判定 -->
	<?php if( $filefield['mime_type'] == 'application/pdf' ) : ?>
		<!-- PDF表示 -->
		<p>これはPDF</p>
		<object data="<?php echo $filefield['url']; ?>" width="100%" height="500"></object>
		<a href="<?php echo $filefield['url']; ?>" target="_blank">拡大表示する >></a>

    <?php elseif( $filefield['mime_type'] == 'image/jpeg' ) : ?>
		<!-- 画像表示 -->
		<p>これは画像</p>
		<a href="<?php echo $filefield['url']; ?>" ><img src="<?php echo $filefield['url']; ?>" alt="カレンダー"></a>
    <?php endif; ?>
<?php endif;  ?>

上記のソースコードによって、ファイルフィールドにPDFが設定されていた場合にはobjectタグで、画像ファイル（jpg形式）が設定されていた場合にはimgタグで値（設定されたファイル）が出力されるようになります。

PDFファイルを設定した場合

画像（jpg形式）を設定した場合

$filefield[‘mime_type’]（MIMEタイプ）について

今回の実装で利用している$filefield[‘mime_type’]ですが、こちらで取得しているのは

ファイルの種類を区別するMIMEタイプ情報です。

MIMEタイプを確認することで、取得した情報が画像（jpg形式）なのかPDFなのかを判定し、出力するHTML部分を変更しています。

ITの世界ではファイルの種類ごとに「この拡張子ならこのMIMEタイプ」というルールがあらかじめ定められています。

ケケンタ

以下はよくあるMIMEタイプの一例です

先ほどご紹介したソースコードのようにMIMEタイプで条件分岐したい場合は、「拡張子ごとにあらかじめ定められているMIMEタイプ」と「ファイルフィールドの戻り値の『mime_type』（先ほどのソースコードでは$filefield[‘mime_type’]）」を比較すればOKです。

ケケンタ

また、ご自身で特定のファイルのMIMEタイプを確認したい場合は、以下のようにvar_dump()関数でファイルフィールドの返り値を出力することで確認することが可能です。

$filefieldをvar_dump()関数で出力してデータの中身を確認している様子

<?php

echo('<pre>');
var_dump($filefield);
echo('</pre>');

?>

array(21) {
  ["ID"]=>
  int(23)
  ["id"]=>
  int(23)
  ["title"]=>
  string(33) "PDFファイル（サンプル）"
  ["filename"]=>
  string(37) "PDFファイル（サンプル）.pdf"
  ["filesize"]=>
  int(6243)
  ["url"]=>
  string(85) "http://swell01.local/wp-content/uploads/2024/05/PDFファイル（サンプル）.pdf"
  ["link"]=>
  string(191) "http://swell01.local/acf%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab/pdf%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%ef%bc%88%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%ef%bc%89/"
  ["alt"]=>
  string(0) ""
  ["author"]=>
  string(1) "1"
  ["description"]=>
  string(0) ""
  ["caption"]=>
  string(0) ""
  ["name"]=>
  string(93) "pdf%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%ef%bc%88%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%ef%bc%89"
  ["status"]=>
  string(7) "inherit"
  ["uploaded_to"]=>
  int(20)
  ["date"]=>
  string(19) "2024-05-23 10:52:32"
  ["modified"]=>
  string(19) "2024-05-23 10:52:32"
  ["menu_order"]=>
  int(0)
  ["mime_type"]=>
  string(15) "application/pdf"
  ["type"]=>
  string(11) "application"
  ["subtype"]=>
  string(3) "pdf"
  ["icon"]=>
  string(58) "http://swell01.local/wp-includes/images/media/document.png"
}

青色下線の引かれている部分がMIMEタイプを表しています。

HTML部分を分ける必要が無いのであればもっとシンプルに書ける

上記ではPDFか画像かどうかによってHTML部分の出力内容を変えていました。

しかし、もしもHTML部分の出力内容が同一でも問題が無いケースで有れば、極論objectタグを一行セットしておくだけでも実装は可能です。

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

<!-- フィールド名「file」の中身の有無を確認 -->
<?php if(!empty($filefield)): ?>

    <!-- 以下の１行で様々な種類のファイルに対応可能 -->
	<object data="<?php echo $filefield['url']; ?>">ファイルリンク</object>

<?php endif;  ?>

しかし、objectタグは対応ブラウザなどの関係により使用可能な状況が制限されやすいHTMLタグです。
また、使用環境によって動作が変わる場合があるため、万全を期すのであれば先ほどご紹介したようにファイルの種類に応じてHTMLタグを出しわけるのが安全かもしれません。

ACFのファイルフィールドなら複数種類のファイルをまとめて制御できる

ケケンタ

以上がファイルの種類に応じてHTML部分の出力を変える方法でした！

今回のようなケースはあまり無いかもしれませんが、もし自分と同じような状況に遭遇したという方の助けになればと思い記事にまとめさせていただきました。

この記事が少しでもお役に立ったなら何よりです。

ケケンタ

WordPressのプラグインでACFをよく使うけど、「日付選択ツール」の出力形式をもっと自由に調整したいなあ……

今回はこのようなお悩みをお持ちの方に向けて、WordPressのプラグインのひとつ

ACF（Advanced Custom Fields）の日付選択ツールの出力形式を自由に調整する方法

について解説します。

ケケンタ

今回の記事で解説するのは、ACFで設定可能なカスタムフィールドの内、「日付選択ツール」に関する内容です。

記事の後半では年月日の0埋めを無くす方法も解説しています

あわせて読みたい

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

ACFで設定したカスタムフィールドの値を出力するときの基本形

ACFを使用するとカスタムフィールドを簡単に設定することが可能ですが、その際、編集ページで入力・保存された値を実際にページ上へ出力するためにはテンプレートファイルにプログラムを記述する必要があります。

例えば、「日付選択ツール」における基本的な設定・出力用プログラム・出力結果は以下の通りです。

基本的な設定

出力用のプログラム

<?php 
if(get_field('date')) {
  the_field('date');
}
?>

get_field(‘date’)……カスタムフィールド[date]の値を取得する
the_field(‘date’)……カスタムフィールド[date]の値を出力する

出力結果

ACFの「日付選択ツール」の基本設定機能では実現できないこと

通常の使用方法でも設定項目の以下の箇所で、ある程度の出力形式を任意に設定することが可能です。

ケケンタ

しかし、例えば以下のように「年」と「月日」を分割して出力するといったことは、標準の設定機能だけでは実現することができません。

以下のような出力は、標準の設定機能では実現できない

「年」と「月日」を分割して出力する

ACFの「日付選択ツール」で出力形式を自由に調整する方法

ケケンタ

先ほどのように「年月日」を別々に出力したい場合には、ACFから取得した日付情報をPHPの処理で分割する必要があります。

以下は「年月日」を「年」と「月日」に分割して出力するコードです。

<?php 
if(get_field('date')) {

	// 日付情報を取得
	$dateStr = get_field('date');

	/* *** 年月日を分割する ***
     * ACFの設定で出力形式（戻り値の形式）を「Y/m/d」という形で「/」区切りにしておき、
     * その区切り文字「/」を利用してexplode関数で分割している
     */
	$dateStr = explode("/",$dateStr);

    // 分割した「年月日」をそれぞれの変数に格納
	$year  = $dateStr[0];
	$month = $dateStr[1];
	$day   = $dateStr[2];

	// 月日の出力
	echo $month . '月' . $day . '日';
				
	echo '<br>';

	// 年の出力
	echo $year . '年';
}
?>

このような処理を記述することで、以下のように年月日を分割した出力が実現可能です。

また、「05」というような0埋めを無くしたいときには、以下のようにintval関数で年月日情報を数値型に変換すればOKです。

0埋めを無くしたいときはintval関数を使用

<?php
if(get_field('date')) {

	～　中略　～

	// 月日の出力
	echo intval($month) . '月' . intval($day) . '日';
				
	～　中略　～
}
?>

PHPも活用すればACFの出力形式も自由自在

以上がACFの「日付選択ツール」の出力形式を自由に調整する方法でした。

WordPressのプラグインは便利ですが、今回お伝えしたように、ほとんどの場合は何かしら機能的な制限があります。

そのようなときにPHPの標準的なプログラムを活用することでできることの幅が一気に広がります。

今回はその中の一例について解説してみました。

ケケンタ

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