Wordpressカスタムフィールド: 繰り返し画像でギャラリー表示する

Wordpressのカスタムフィールドで「繰り返し（グループ）機能」が標準装備のプラグインSmart Custom Fieldsで下記のグループを作りました。
・グループ名＝photo-group
・項目＝photo-g（画像）

下記のように記述すると、繰り返し画像の表示は出来ました。

<?php $repeat_group = SCF::get( 'photo-group' ); foreach ( $repeat_group as $fields ) { ?> <?php $image = get_post_meta($post->ID, 'photo-g', true); echo wp_get_attachment_image($fields['photo-g'], 'thumbnail');?> <?php } ?>

この画像を使って、大きい画像１つの下に小さいサムネイル画像を繰り返しの数だけ配置し、サムネイル画像をクリックするとクリックした画像が大きい画像の場所に表示される、というギャラリーを作成したいのですが、なかなかうまくいきません。
また、これらの画像のサイズも指定したいのですが、上記ソースのどこにサイズ指定すればよいのか分かりません。

自力では解決できず、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

PHP
1echo wp_get_attachment_image($fields['photo-g'], 'thumbnail');?>

これの'thumbnail'のところが画像サイズ指定でここは数値で指定することもできます
参照

PHP
1echo wp_get_attachment_image($fields['photo-g'], [100,100]);?>

ただこの方法はWordpressが画像投稿時にあらかじめ生成している
各サイズの画像から近いものを選出してタグでサイズ指定して貼り付けてるだけなので
Wordpressであらかじめ生成されるサイズに近いものがない場合
add_image_sizeでWordpressが投稿時に生成する
画像のサイズバリエーションを登録しておくほうが望ましいです

Wordpressが初期であらかじめ生成する画像のサイズバリエーションは
thumbnail=150x150
middle=300x300
large=640x640
full=元画像サイズ
です

クリックすると〜ってのはPHPじゃなくjavascriptの領分なので
jQueryのライブラリにはリンク先の画像ファイルを
指定した領域にAjaxで読み込ませることもできるタイプの
スライドショーというのもあるのでそういうのを探すといいかもしれません

PHP
1<?php 
2$image = get_post_meta($post->ID, 'photo-g', true); 
3printf('<a href="%s">', wp_get_attachment_image_src($fields['photo-g'],'large'));
4echo wp_get_attachment_image($fields['photo-g'], 'thumbnail');
5echo '</a>';
6?>

みたいな感じにして適当なjQueryのスライドショーのライブラリを導入すれば実現するかと思います
jquery slider ajaxで検索すれば適当なものが見つかるかと思います

2015/10/10追記

配列の最初の要素はreset($array)で取得できます

PHP
1<!--大きい画像-->
2<?php
3$repeat_group = SCF::get( 'photo-group' );//小さい画像のほうから移動
4$fields=reset($repeat_group);
5$size = "medium"; // (thumbnail, medium, large, full or custom size)
6$image = wp_get_attachment_image_src( $fields['photo-g'], $size );
7$alt = get_post_meta($fields['photo'], '_wp_attachment_image_alt', true);
8$image_title = $fields['photo']->post_title;
9?>

投稿2015/10/01 05:11

編集2015/10/10 13:56

KazuhiroHatano

総合スコア7804

kurumi

2015/10/02 03:23

ご丁寧な回答、ありがとうございます。おかげさまで、少し形になってきました。

kurumi

2015/10/10 12:44

少し間が空いてしまいましたが、この前の続きです。よろしくお願いします。下記のような記述で、”下の小さいサムネイル画像を繰り返しの数だけ配置し、サムネイル画像をクリックするとクリックした画像が大きい画像の場所に表示される”のはできました。しかし、ページ表示時に大きい画像が表示されず（下記記述の部分の　　 <IMG src="<?php echo $image[0]; ?>" name="myBigImage"> の画像が表示されていないのだと思います）、小さいサムネイル画像を一度クリック後に表示されます。ページ表示時の最初から、大きい画像を表示するにはどのようにすればよいか教えて下さい。尚、設定は、Wordpressのカスタムフィールドで「繰り返し（グループ）機能」が標準装備のプラグインSmart Custom Fieldsで下記の項目を作りました。（１）・項目＝photo（画像） →　初期の大きい画像として使用（これが表示されません）（２）・グループ名＝photo-group 　　　・項目＝photo-g（画像） →　小さいサムネイル画像として使用（表示できました） ※初期の大きい画像は、グループ”photo-group”の１つ目の画像にしたいのですが、繰り返しの１件目、という指定方法もわかりません。ちなみに、ギャラリー表示の参考サイトは http://www.red.oit-net.jp/tatsuya/java/image3.htm です。 <table class="work_gyaraly">  <?php $size = "medium"; // (thumbnail, medium, large, full or custom size) $image = wp_get_attachment_image_src( $fields['photo'], $size ); $alt = get_post_meta($fields['photo'], '_wp_attachment_image_alt', true); $image_title = $fields['photo']->post_title; ?> <TR> <TD colspan="7" class="work_bigimage"> <IMG src="<?php echo $image[0]; ?>" name="myBigImage"> </TD> </TR>  <?php $repeat_group = SCF::get( 'photo-group' ); foreach ( $repeat_group as $fields ) { $size = "medium"; // (thumbnail, medium, large, full or custom size) $image = wp_get_attachment_image_src( $fields['photo-g'], $size ); $alt = get_post_meta($fields['photo-g'], '_wp_attachment_image_alt', true); $image_title = $fields['photo-g']->post_title; ?> <TR class="test"> <TD class="work_smallimage"> <a href="javascript:void(0)" onmouseover="myChgPic( '<?php echo $image[0]; ?>' )"> <img src="<?php echo $image[0]; ?>" width="80" height="80" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>" /> </a> </TD> <?php } ?> </TR> </TABLE>  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> </SCRIPT>

行動規範の内容に同意します