wordpressで構築したサイトに、5件ごとに記事リストを表示してmoreボタンを押したら次の5件を表示したいという要望があったので対応したときの備忘録

<script>
$(function(){
$('.more').nextAll('li').hide();//more以下のli非表示
$('.more').on('click', function() {
$(this).hide();//押したボタンを非表示
$(this).nextUntil('.more','li').slideDown('fast'); //次のボタンまで表示
$(this).nextAll('.more:first').show(); //次のボタンを表示
});
});
</script>
<?php while (have_posts()) : the_post(); ?>
<?php if ( $post_count % 5 == 1 && $post_count != 1 ) { echo '<li class="more"><i class="fas fa-angle-down"></i> MORE</li>' . "\n"; } ?>
<li class="<?php echo esc_html( $post->reports); ?>"><a href="<?php the_permalink(); ?>"><span><?php the_time('Y.m.d'); ?></span><<php the_title(); ?></a></li>
<?php $post_count++; // カウンターを+1 ?>
<?php endwhile; ?>
<?php echo '<li class="more"><i class="fas fa-angle-down"></i> MORE</li>' .'</ul>' . "\n"; // 最後に ul を閉じる ?>
<?php else : ?>
<?php endif; ?>

記事リスト5件、moreリンク、記事リスト5件、moreリンクを繰り返す感じ。とりあえずこれでよさそう。