カスタムフィールドプラグインAdvanced Custom FieldsのRepeater Fieldは繰り返し処理が出来て色々と捗る

2013年1月23日 2019年1月30日 Wordpress ,

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

Advanced Custom Fieldsはカスタムフィールドをより使い易くしてくれるプラグイン。
このプラグインの有料アドオン「The Repeater Field(繰り返しフィールド)」を使って、好きな数だけ画像を登録しページに表示させます。

Advanced Custom Fields
The Repeater Field

現在(2016/8/31)で25$というお値段は、クライアントワークにもいろいろ活用できそうなので購入に至りました。

Repeater Fieldとは

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

Repeater Fieldを使って画像を表示させる

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

function.php

add_theme_support('post-thumbnails');
add_image_size('custom-image', 245, 245, true); // 好きなサイズのサムネイル画像を追加

※デフォルトの画像サイズ(thumbnail, medium, large, full)を使用する場合は必要ありません

表示したいページ(例えばsingle.phpとか)に以下のコードを記述。

single.php

<php 
if( have_rows('repeater_field_name') ):
while( have_rows('repeater_field_name') ): the_row(); // フィールド名(親)の$keyを指定
  if(get_sub_field('subimage')){ // フィールド名(子)の$keyを指定
     $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>';
  }
endwhile;
endif;
?>

Repeater Fieldは、独自の関数を使います。
have_rows()get_sub_field()はRepeater Field用の関数です。

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

コメントを残す

メールアドレスが公開されることはありません。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

このサイトの管理者

ナオユ

Wordpress初心者向けにカスタマイズ方法やWEB制作のノウハウをポロッとまとめています。広告代理店→WEB制作会社→リモート勤務になり在宅ワークしながらアフィリエイトなど副業に挑戦中|子ども大好き新米パパ@H29男児|フラット35で実家を建て直し親と同居|仮想通貨投資(絶賛含み損w)