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系プラグインと組み合わせてモーダルウィンドウさせることも可能です。
リストで囲んでギャラリー風にしたり、いろいろアレンジできまっせー!