Advanced Custom Fields – ファイル

ACF_file

Advanced Custom Fields(通称:ACF)の使い方についての備忘録です。
この記事ではフィールドタイプ「ファイル」の設定と出力する方法について解説しています。

フィールド項目を入力するところからの解説となりますので、あらかじめご了承ください。

↓フィールドグループを新規追加するまでの手順はコチラに記載してあります。
Advanced Custom Fields – テキストを出力

ファイルのフィールド項目を入力

フィールドの項目を入力するところからやっていきます。

ファイルのフィールド項目を入力

今回設定したフィールドの項目は以下の通り。

フィールド項目入力値説明
フィールドラベルファイル編集画面で表示される名前
フィールド名fileサイトに表示するときに指定するフィールド名
フィールドタイプファイルフィールドタイプを選択
説明ファイルを選択このフィールドに対する説明を入力
返り値ファイル 配列出力する際の返り値のフォーマットを選択
ライブラリ全てファイルアップロードボタンをクリックしたときの画像一覧の表示方法を選択
最大 ファイルサイズ100 MBファイルアップロードのファイルサイズの最小値・最大値を制限

入力が完了したら「公開」をクリックして保存します。

次に投稿画面にいきます。

ACFファイルフィールド

投稿画面を表示すると先程設定したカスタムフィールドが表示されました。

投稿するファイルを選択します。

今回は例としてプラグインの「all-in-one-wp-migration-file-extension.zip」をアップロードしてみます。

投稿するファイルを選択

ファイルが表示されました。

では公開します。

ACF ファイルフィールドの値を出力

ACF のカスタムフィールドの値を出力するにはthe_field( )関数を使います。
この関数はフィールドに入力した値をそのまま出力したい場合に用いられます。

出力せずに値だけを受け取りたい場合はget_field( )関数を使います。
この関数は値を出力しません。値だけを受け取るので、なにか加工してから表示させたいなどといった場合に用いられます。

それでは先程選択したファイルがどのように出力されるか試してみましょう。

まずは$file = get_field('file')で値を受け取り、var_dump($file)で中身を確認します。

フィールド項目、返り値のフォーマットを「ファイル 配列」としたので、変数の中身は、下記のような配列になっています。

array(21) {
  ["ID"]=>
  int(68)
  ["id"]=>
  int(68)
  ["title"]=>
  string(38) "all-in-one-wp-migration-file-extension"
  ["filename"]=>
  string(42) "all-in-one-wp-migration-file-extension.zip"
  ["filesize"]=>
  int(20526)
  ["url"]=>
  string(100) "http://localhost:8888/DemoSite/wp-content/uploads/2020/07/all-in-one-wp-migration-file-extension.zip"
  ["link"]=>
  string(104) "http://localhost:8888/DemoSite/2020/07/22/advanced-custom-fields/all-in-one-wp-migration-file-extension/"
  ["alt"]=>
  string(0) ""
  ["author"]=>
  string(1) "1"
  ["description"]=>
  string(0) ""
  ["caption"]=>
  string(0) ""
  ["name"]=>
  string(38) "all-in-one-wp-migration-file-extension"
  ["status"]=>
  string(7) "inherit"
  ["uploaded_to"]=>
  int(34)
  ["date"]=>
  string(19) "2020-07-28 06:03:46"
  ["modified"]=>
  string(19) "2020-07-28 06:03:46"
  ["menu_order"]=>
  int(0)
  ["mime_type"]=>
  string(15) "application/zip"
  ["type"]=>
  string(11) "application"
  ["subtype"]=>
  string(3) "zip"
  ["icon"]=>
  string(67) "http://localhost:8888/DemoSite/wp-includes/images/media/archive.png"
}

今回は投稿されたzipファイルをダウンロードするためのリンクを貼ってみます。

どうするかというと、aタグを使用することでダウンロードするリンクを作ることができます。

コードは以下のようになります。

<?php $file = get_field('file'); ?>
<a href="<?php echo $file['url']; ?>" download="<?php echo $file['filename']; ?>">zipファイルをダウンロード</a>
  • href属性にアップロードされたファイルのURLを指定
  • download属性に設定されたファイル名が、ダウンロードされるファイルの名前

表示を確認してみます。

ファイルダウンロードのリンクを表示

これでダウンロードするリンクが表示されました。

クリックしてダウンロードしてみます。

ファイルがダウンロードされた

ダウンロードされました。

ダウンロードフォルダ内

ダウンロードフォルダにもあることが確認できます。

以上です。

この記事を書いた人

けいた

高校卒業してから15年間勤めた会社を退職→脱サラしてWeb制作。
現在はWordPressサイト構築とShopifyストア構築をメインに、副業で物販をやっています。