Advanced Custom Fieldsの繰り返しフィールドを使って画像を好きなだけ追加し、サムネイル画像として表示、ついでにクリックしたらフルサイズを表示する

カスタムフィールドで好きなだけ追加していきたい

Advanced Custom Fieldsはカスタムフィールドをより使い易くしてくれるプラグイン。
このプラグインの有料アドオン「Repeater Field(繰り返しフィールド)」を使って、好きな数だけ画像を登録しページに表示させます。
今日現在で25$というお値段は、クライアントワークにもいろいろ活用できそうなので購入に至りました。

Repeater Fieldとは

画像を見てもらうとわかりやすいが、1つの項目で好きな数だけ追加して登録できる機能。
例えば、カラーバリエーションが赤、青、黄とか

まず、好きなサイズのサムネイル画像を追加します。

function.php

add_theme_support('post-thumbnails');
add_image_size('custom-image', 245, 245, true);

1行目でサムネイル画像の使用をON
2行目で好きなサイズのサムネイル画像を追加
trueで切り抜き、falseで縮小

表示したいページ(例えばsingle.phpとか)に以下のコードを記述。
繰り返しフィールドは、独自のテンプレートタグを使います。
尚且つループを使い、任意の数に対応するやり方になります。

single.php

<php while(the_repeater_field('subimages')){
  if(get_sub_field('subimage')){
     $image = wp_get_attachment_image_src(get_sub_field('subimage'), 'custom-image');
     $max = wp_get_attachment_image_src(get_sub_field('subimage'), 'full');
     echo '<a class="attachment-post-thumbnail wp-post-image" href="'.$max[0].'"><img src="'.$image[0].'" alt="" /></a>';
  }
 }
?>

1行目で繰り返しフィールド名(親)の$keyを指定
2行目で繰り返しフィールド名(子)の$keyを指定
3~4行目で追加したサムネイル画像情報を取得
5行目のechoで文字列(画像表示のソース)を出力

このソースで画像が表示され、クリックするとフルサイズの画像が表示されます。
Lightbox系プラグインと組み合わせてモーダルウィンドウさせることも可能です。

リストで囲んでギャラリー風にしたり、いろいろアレンジできまっせー!