ACFの「ファイル」フィールドでファイル種類によって出力内容を変える

ケケンタ

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

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

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

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

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

を解説していきます。

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

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部分の出力を変える方法でした！

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

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