カスタムフィールドテンプレート カスタマイズ
-
カスタムフィールドテンプレートでスタッフ紹介ページを制作しています。
1つの記事に画像を複数投稿し、メインの画像とサムネイル3枚配置、サムネイルをクリックしたらメインの画像が変わるような見せ方にしたいと思い色々試していますが上手くいきませんので、教えて下さい。まず、カスタムフィールドテンプレートで投稿した画像のURLを取得し、
Jqueryを使用して、ループ処理したテンプレートを固定ページに埋め込むところまで出来ました。
が、実際に記事をアップしてサムネイルをクリックすると、メインの画像はちゃんと変わるのですが、その次の投稿記事の画像まで同様に変わってしまいます。PHPやjQuery、ワードプレスは初心者で、かなり色々調べながら行っておりますので、初歩的なところで間違っているのかもしれませんが教えていただけたら幸いです。
また、もしもっと簡単な方法で上記のような仕様に出来るようでしたら教えて下さい。
下記がテンプレートの内容です。
よろしくお願いします。<?php query_posts(‘post_type=post&paged=’.$paged); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><div class=”メイン画像”>
<img src=”<?php $img1 = get_post_meta($post->ID, ‘img1’, true); ?><?php $img1 = wp_get_attachment_image_src($img1, ‘thumbnailBig’); echo $img1[0]; ?>” width=”150″ height=”130″>
</div><div class=”サムネイル”>
ID, ‘img1’, true); ?><?php $img1 = wp_get_attachment_image_src($img1, ‘thumbnailBig’); echo $img1[0]; ?>”><img src=”<?php $img1 = get_post_meta($post->ID, ‘img1’, true); ?><?php $img1 = wp_get_attachment_image_src($img1, ‘thumbnailSmall’); echo $img1[0]; ?>” width=”44″><!–
–>ID, ‘img2’, true); ?><?php $img2 = wp_get_attachment_image_src($img2, ‘thumbnailBig’); echo $img2[0]; ?>”><img src=”<?php $img2 = get_post_meta($post->ID, ‘img2’, true); ?><?php $img2 = wp_get_attachment_image_src($img2, ‘thumbnailSmall’); echo $img2[0]; ?>” width=”44″><!–
–>ID, ‘img3’, true); ?><?php $img3 = wp_get_attachment_image_src($img3, ‘thumbnailBig’); echo $img3[0]; ?>”><img src=”<?php $img3 = get_post_meta($post->ID, ‘img3’, true); ?><?php $img3 = wp_get_attachment_image_src($img3, ‘thumbnailSmall’); echo $img3[0]; ?>” width=”44″>
</div><!—jquery部分—>
<script>
jQuery(document).ready(function()
{
//change_thumb
jQuery(function(){
jQuery(‘.thumb_img a’).click(function(){
var h = $(this).eq(0).attr(‘rel’);
jQuery(‘.target_img img’).fadeOut(function(){
(jQuery(‘.target_img img’).attr(“src”,h)).fadeIn();
});
return false;
})
});});
</script><?php
endwhile;
endif;
?><?php wp_reset_query(); ?>
- トピック「カスタムフィールドテンプレート カスタマイズ」には新たに返信することはできません。