Advanced Custom Fields – 画像

ACF_画像

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

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

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

画像のフィールド項目を入力

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

フィールド項目入力画面

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

フィールド項目入力値説明
フィールドラベル画像編集画面で表示される名前
フィールド名imgサイトに表示するときに指定するフィールド名
フィールドタイプ画像フィールドタイプを選択
説明画像を選択してくださいこのフィールドに対する説明を入力
返り値のフォーマット画像 配列出力する際の返り値のフォーマットを選択
プレビューサイズ中(300 × 300)編集画面に表示される画像のプレビューサイズを設定
ライブラリ全てメディアアップロードボタンをクリックしたときの画像一覧の表示方法を選択
最大 ファイルサイズ100 MB画像アップロードの、幅、高さ、ファイルサイズの最小値・最大値を制限
許可するファイルタイプ.jpg,.png,.gifアップロードするファイルタイプを制限。全てのファイルタイプを許可する場合は、未入力

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

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

ACF画像フィールド

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

投稿に使用する画像を選択します。

画像を選択

画像が表示されました。

ここに表示される画像のサイズが、フィールド項目で設定したプレビューサイズ「中(300 × 300)」となっています。

それでは選択したら公開します。

ACF 画像フィールドの値を出力

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

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

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

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

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

array(24) {
  ["ID"]=>
  int(64)
  ["id"]=>
  int(64)
  ["title"]=>
  string(10) "ACF 画像"
  ["filename"]=>
  string(10) "画像.png"
  ["filesize"]=>
  int(99564)
  ["url"]=>
  string(68) "http://localhost:8888/DemoSite/wp-content/uploads/2020/07/画像.png"
  ["link"]=>
  string(84) "http://localhost:8888/DemoSite/2020/07/22/advanced-custom-fields/%e7%94%bb%e5%83%8f/"
  ["alt"]=>
  string(10) "ACF 画像"
  ["author"]=>
  string(1) "1"
  ["description"]=>
  string(0) ""
  ["caption"]=>
  string(0) ""
  ["name"]=>
  string(18) "%e7%94%bb%e5%83%8f"
  ["status"]=>
  string(7) "inherit"
  ["uploaded_to"]=>
  int(34)
  ["date"]=>
  string(19) "2020-07-28 00:08:35"
  ["modified"]=>
  string(19) "2020-07-28 00:10:27"
  ["menu_order"]=>
  int(0)
  ["mime_type"]=>
  string(9) "image/png"
  ["type"]=>
  string(5) "image"
  ["subtype"]=>
  string(3) "png"
  ["icon"]=>
  string(67) "http://localhost:8888/DemoSite/wp-includes/images/media/default.png"
  ["width"]=>
  int(1500)
  ["height"]=>
  int(800)
  ["sizes"]=>
  array(21) {
    ["thumbnail"]=>
    string(76) "http://localhost:8888/DemoSite/wp-content/uploads/2020/07/画像-150x150.png"
    ["thumbnail-width"]=>
    int(150)
    ["thumbnail-height"]=>
    int(150)
    ["medium"]=>
    string(76) "http://localhost:8888/DemoSite/wp-content/uploads/2020/07/画像-300x160.png"
    ["medium-width"]=>
    int(300)
    ["medium-height"]=>
    int(160)
    ["medium_large"]=>
    string(76) "http://localhost:8888/DemoSite/wp-content/uploads/2020/07/画像-768x410.png"
    ["medium_large-width"]=>
    int(768)
    ["medium_large-height"]=>
    int(410)
    ["large"]=>
    string(77) "http://localhost:8888/DemoSite/wp-content/uploads/2020/07/画像-1024x546.png"
    ["large-width"]=>
    int(1024)
    ["large-height"]=>
    int(546)
    ["1536x1536"]=>
    string(68) "http://localhost:8888/DemoSite/wp-content/uploads/2020/07/画像.png"
    ["1536x1536-width"]=>
    int(1500)
    ["1536x1536-height"]=>
    int(800)
    ["2048x2048"]=>
    string(68) "http://localhost:8888/DemoSite/wp-content/uploads/2020/07/画像.png"
    ["2048x2048-width"]=>
    int(1500)
    ["2048x2048-height"]=>
    int(800)
    ["small"]=>
    string(76) "http://localhost:8888/DemoSite/wp-content/uploads/2020/07/画像-600x320.png"
    ["small-width"]=>
    int(600)
    ["small-height"]=>
    int(320)
  }
}

では画像を表示させます。

画像を表示させたい場合は、画像のURLを取得して、imgタグの src属性に URLを PHPで出力すればよいでしょう。

下記コードの場合は['sizes']より['medium']を選択した場合です。

<?php $img = get_field('img'); ?>
<img src="<?php echo $img['sizes']['medium']; ?>" alt="<?php echo $img['alt']; ?>">

確認してみます。

ACF画像表示された

これで画像が表示されました。

以上です。

この記事を書いた人

けーた

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