WordPressでこんなページを作りました。
例えば、areaというタクソノミーのタームに「東京都」「千葉県」「神奈川県」があって、それぞれに紐付いている投稿の一覧を表示させます。
表示させる記事はそれぞれ3件で、各一覧に「もっと見る」ボタンを付けて、ボタンを押すと6件ずつさらに表示されます。
<?php $terms = get_terms('area')); foreach($terms as $term){ $args = array( 'post_type' => 'post', 'posts_per_page' => -1, 'orderby' => 'date', 'order' => 'DESC', 'tax_query' => array( array( 'taxonomy' => 'movie_category', 'field' => 'slug', 'terms' => $term->slug, ), ), ); $the_query = new WP_Query($args); if($the_query->have_posts()){ ?> <section> <?php $current_no++; //投稿が何件目かカウント ?> <h2><?php echo $term->name; ?></h2> <ul class="loop-more"> <?php while($the_query->have_posts()){ $the_query->the_post();?> <li> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail("medium"); ?> <?php the_title(); ?> <?php the_content(); ?> </a> </li> <?php } ?> </ul> <?php if($the_query->found_posts > 2 ){ //投稿3目以上の場合はもっと見るボタンを表示 ?> <button type=button class="more_btn">もっと見る</button> <?php } ?> </section> <?php } wp_reset_postdata();?> <?php } ?>
フッターwp_footer();部分にjQueryが読み込まれてるので、その下にJavaScriptを書きます。
直接書いても、別ファイルにして読み込ませてもOK。
<script> jQuery(function($) { var $numberListLen = $(".loop-more li").length; //全体の投稿数を取得 var defaultNum = 3; //最初に表示されている投稿数 var addNum = 6; //もっと見るボタンでさらに表示される投稿数 var currentNum = 0; //今表示されている投稿数 $(".loop-more").each(function() { $(this).find("li:not(:lt("+defaultNum+"))").hide(); currentNum = defaultNum; $(".more_btn").click(function() { //もっと見るボタンを押したときの動作 currentNum += addNum; $(this).parent().find("li:lt("+currentNum+")").slideDown(); if($numberListLen <= currentNum) { currentNum = defaultNum; indexNum = currentNum - 1; $(this).hide(); //全件表示したらもっと見るボタンを非表示にする } }); }); }); </script>
こちらの投稿を参考にさせていただきました。
上記サイトから変更した点は、閉じるボタンは設置しなかったのと、1ページ内に「もっと見る」ボタンを複数設置する必要があったので一部書き換えました。
もっと見るボタンの表示非表示がうまくいかなかったので、むりやりループの中でカウントしてphpで表示非表示をコントロールするという、、
参考にしていただけることがあればうれしいです^^