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>

こちらの投稿を参考にさせていただきました。

【jQuery】「もっと見る」ボタンの実装

上記サイトから変更した点は、閉じるボタンは設置しなかったのと、1ページ内に「もっと見る」ボタンを複数設置する必要があったので一部書き換えました。

もっと見るボタンの表示非表示がうまくいかなかったので、むりやりループの中でカウントしてphpで表示非表示をコントロールするという、、

参考にしていただけることがあればうれしいです＾＾

• CODING
• jQuery
• PHP
• Wordpress