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

 2016.04.21  2017.09.20

Advanced Custom Fieldsの出力 画像編

画像は、カスタムフィールド作成画面で指定した「返り値」によって記述方法が変わります。

cf_img

「画像URL」の場合

<img src="<?php the_field(‘image_ url'); ?>"  />

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

「画像オブジェクト」の場合

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

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

Array
(
    [id] => 15
    [alt] => 画像のalt
    [title] => 画像のalt
     => 画像のキャプション
    [description] => 画像の説明
    [mime_type] => image/jpg
    [url] => http://www.test.jp/wp/wp-content/uploads/2015/11/img_test.jpg
    [width] => 1265
    [height] => 690
    [sizes] => Array //サーバーに上がっている画像サイズの配列
        (
            [thumbnail] => http://www.test.jp/wp/wp-content/uploads/2015/11/img_test-150x82.jpeg
            [thumbnail-width] => 150
            [thumbnail-height] => 82
            [medium] => http://www.test.jp/wp/wp-content/uploads/2015/11/img_test-300x164.jpeg
            [medium-width] => 300
            [medium-height] => 164
            [large] => http://www.test.jp/wp/wp-content/uploads/2015/11/img_test-1024x559.jpeg
            [large-width] => 1024
            [large-height] => 559
            [list-thumb] => http://www.test.jp/wp/wp-content/uploads/2015/11/img_test-308x230.jpeg
            [list-thumb-width] => 308
            [list-thumb-height] => 230
            [wp_rp_thumbnail] => http://www.test.jp/wp/wp-content/uploads/2015/11/img_test.jpeg
            [wp_rp_thumbnail-width] => 150
            [wp_rp_thumbnail-height] => 82
        )

)

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

<?php

$image = get_field('img_test’); //フィールド名「img_test」の画像オブジェクトの情報を取得

if(!empty($image)){
$url = $image['url’]; //画像のURL
$alt = $image['alt’]; //画像のalt
$title = $image['title’]; //画像のタイトル

$size = 'thumbnail’; //出力サイズを変数に格納
$imgThumb = $image['sizes'][ $size ]; //サムネイル画像のURL
$width = $image['sizes'][ $size . '-width' ]; //サムネイル画像の幅サイズ
?>

<a href=“<?php echo $url; ?>” title=“<?php echo $title; ?>">
<img src=“<?php echo $imgThumb; ?>”> width=“<?php echo $width; ?>” alt=“<?php echo $alt; ?>” />
</a>
<?php } ?>

「画像ID」の場合

<?php
//フィールド名「image_test」のフルサイズ画像の情報を取得
$image = wp_get_attachment_image_src(get_field('img_test'), 'full');
?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_field('img_test')) ?>" />

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 を返す。
//例:
$image = wp_get_attachment_image_src(get_field('image_test'), 'full');
$image[0] //画像URL
$image[1] //画像の幅
$image[2] //画像の高さ

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

<?php
$image = get_field(‘img_test’); //フィールド名
$size = 'full'; // 画像サイズ
if( !empty($image) ) { //画像があれば表示
     echo wp_get_attachment_image( $image, $size );
 }
?>

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

Pocket