wordpress WordPress で取得したデータを jQuery で表示（フォトギャラリー）

CATEGORY: WordPress | TAG: ,

2013年6月5日

カスタム投稿タイプのそれぞれの投稿のアイキャッチ画像を jQuery で表示するフォトギャラリーのメモ。

  • カスタム投稿タイプ’works’とそのタクソノミー’works_cat’を登録。
  • テンプレート「taxonomy-works_cat.php」を使って表示。
  • ループで投稿のデータを取得し、最初のデータの中サイズの画像と、全てのデータの小サイズの画像を表示。
  • 小サイズの画像（サムネイル）をクリックすると、それに対応する中サイズの画像を jQuery で表示する。
  • posts_per_page を指定すれば、それ以上の投稿があればページネーションなどでページングのリンクを表示できる。
//taxonomy-works_cat.php
<?php get_header(); ?>
<div id="content">
<div class="works_top">
<?php $catinfo = get_term_by('slug', $term, $taxonomy); ?>
//カテゴリー名とその説明を表示
<h2 class="cat_title"><?php echo $catinfo->name; ?> : <?php echo $catinfo->description; ?></h2>　　
</div><!-- end of .works_top -->

//このループで最初の画像と全てのサムネイル画像のデータを取得して出力
<div class="works_individual">
<?php if(have_posts()) : ?>
<?php $is_first = true; ?>  //最初の投稿かどうかのフラグ
<?php while(have_posts()): the_post(); ?>  
<?php if($is_first): ?>  //最初の投稿の場合中サイズの画像とタイトルを表示

<div class="works_photo">
<p class="main_photo"><a href="<?php the_permalink(); ?>" ><?php the_post_thumbnail('works_m'); ?></a></p>
<h3><?php the_title(); ?></h3>
</div><!-- end of .works_photo -->

<div class="works_right">
<div class="works_thumbnails">
<ul>
<?php endif; ?>  //全ての投稿のサムネイルを表示
<?php $is_first = false; ?>    //最初の投稿かどうかのフラグを false に
<li><a href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('works_s'); ?></a></li>
<?php endwhile; ?>
<?php endif;?>
</ul>

<?php pagenavi(); ?>

</div><!-- end of #works_thumbnails -->
</div><!-- end of .works_right -->
</div><!-- end of .works_individual -->

</div><!-- end of #content -->
<?php get_sidebar(); ?>
<?php get_footer('works'); ?>

<div id="works_data">
//2つ目のループで、画像の情報を取得。この部分は CSS で非表示にしておき、jQuery でデータを取得。
<?php if(have_posts()): while(have_posts()): the_post();  ?>
<div class="works_data_inner">
<div class="title_data"><?php the_title(); ?></div>
<div class="content_data"><?php the_content(); ?></div>
<div class="photo_data"><?php the_post_thumbnail('works_m'); ?></div>
<div class="link_data"><?php the_permalink(); ?></div>
<div class="h3_data"><h3><?php the_title(); ?></h3></div>
<?php endwhile; endif; ?>
</div><!-- end of .works_data -->

</body>
</html>

#works_data は非表示にしておく。

#works_data {
  display: none;
}

但し、body 要素の外側に記述すると HTML の文法エラーとなるので、body の閉じタグの前に記述するように調整する。他のフッターでは、get_footer() で body および html の閉じタグを含むが、このテンプレートでは get_footer(‘キーワード’)を利用するなどして body および html の閉じタグを含まないようにする。

以下は jQuery の記述。

  • 表示されているサムネイル画像要素のラップ集合を変数「thumbnails$」に格納。
  • 表示されているサムネイル画像の総数を変数「thubnails_counts」に格納。
  • 2つ目のループで取得して生成した要素のラップ集合を変数「works_data_inner$」に格納。
  • ラップ集合「works_data_inner$」の要素数はサムネイル画像の要素数と同じだけあり、それぞれのインデックスは対応している。
  • そのため、クリックされたサムネイルのインデックスから、対応する情報の要素（div.works_data_inner）を特定できる。
  • サムネイル画像をクリックすると以下を実施。
  • インデックスから対応する中サイズの画像の src 属性を取得して、現在表示されている中サイズの画像の src 属性にして、フェードインで表示する。
  • 中サイズの画像のパーマリンクの値（href）とそのtitle 属性をクリックされた画像に対応するものに入れ替える。
  • h3 要素（タイトル）も同様に入れ替える。
  • 「return false;」でサムネイルをクリックしても、パーマリンク先へ飛ばないようにする。
jQuery(function($){
  var thumbnails$ = $('div.works_thumbnails ul li a');
  var thubnails_counts = thumbnails$.length;  
  var works_data_inner$ = $('#works_data div.works_data_inner');
    
  thumbnails$.click(function() {
    var that = $(this);
    var target = $(works_data_inner$.get(thumbnails$.index(this)));
    $('div.works_individual div.works_photo p a img').css('display', 'none').attr('src', target.find('img').attr('src')).fadeIn(700);
    $('div.works_individual div.works_photo p a').attr({href: target.find('div.link_data:first').text(), title: target.find('div.title_data:first').text()});
    $('div.works_individual div.works_photo h3').html(target.find('div.h3_data').html());
    return false;
  });
});