Advanced Custom Fieldsによるカスタムフィールドの出力 [画像編]

 2016.04.21  2017.11.02

Advanced Custom Fieldsの出力 画像編

画像は、カスタムフィールド作成画面で指定した「返り値」によって記述方法が変わります。返り値は「画像オブジェクト」「画像URL」「画像ID」の3種類です。

cf_img

返り値を「画像URL」に指定した場合

テキスト出力と同じように、画像へのURLがそのまま表示されます。

返り値を「画像オブジェクト」に指定した場合

「返り値」を「画像オブジェクト」に指定すると、画像の情報が以下のように配列で返ってくるので、ここから必要な情報を取り出して表示させるという流れになります。 alt、title、caption、descriptionはWPの画像管理画面で入力した情報が入ります。

画像オブジェクトの返り値

画像のURL、alt、タイトルを取得して、指定したサイズで画像を表示させる

返り値を「画像ID」に指定した場合

wp_get_attachment_image_src()はWordpressの関数で、画像IDが分かれば画像の情報を取得できます。

wp_get_attachment_image_src( $attachment_id, $size, $icon )

$attachment_id
(必須)画像ID
$size
(オプション)画像のサイズを指定できます。WPで設定したサイズ(thumbnail, medium, large, full)や幅と高さをピクセルで指定することができます。例:array(32,32) 初期値:thumbnail
$icon
(オプション)添付を表すメディアアイコンを使用するかどうか。初期値:false

以下の情報が配列で戻ってくるので、使用したい情報の配列番号を指定して表示させます。

[0] => url
配列の一番最初に格納されている画像URL
[1] => width
2番目に格納されている画像の幅
[2] => height
3番目に格納されている画像の高さ
[3] => 真偽値
リサイズされいている場合は true、元のサイズの場合は false (true/false) 画像でない場合はfalse を返す。

また、以下の様な書き方でもOKです。

単純に画像のURLだけが必要なら「画像URL」、サイズやaltなど画像周辺の情報も必要なら「画像ID」「画像オブジェクト」を選択すればよいかと思います。

複数の画像を直感的に管理できるACF Proのギャラリー機能

このページで解説している無料版Advanced Custom Fieldsの上位プラグイン「ACF Pro」に「ギャラリー」という機能(アドオン)があります。このギャラリー機能を使うと、カスタムフィールド入力画面で複数の画像をドラッグ&でドロップで並べ替えたり、altや説明などを変更したりと、画像を直感的に管理することが可能です。有料ですが、他にも便利な機能が多く搭載されているのでオススメです!

参考記事Advanced Custom Fieldsを更に使いやすく!ACF Proを選ぶ理由と機能紹介