先日、仕事のタスクで実装したコードを備忘録として残そうと思います。
内容としては、
WordPressで記事取得後、２記事だけ表示させて
残りの記事は非表示にしてボタンをクリックするとアコーディオンメニューの様に表示されるというものです。
よくコーポレートサイトなどでNews一覧とかである様な感じですね！
では早速
PHP▼
<section>
<div class="wrapper">
<ul class="post__list">
<?php
$args = array( 'posts_per_page' => 10, 'offset'=> 0, 'category_name' => 'code' );
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post );
?>
<li class="post__item">
<a href="<?php the_permalink(); ?>">
<span class="post__date"><?php the_time('Y年m月d日'); ?></span>
<span class="post__title"><?php the_title(); ?></span>
</a>
</li>
<?php endforeach; wp_reset_postdata();?>
</ul>
<a class="btn" href="">お知らせをもっと見る</a>
</div>
</section>Jquery▼
<script>
$(function(){
var hideList = '.post__item:nth-of-type(n+3)';
$(hideList).hide();
$('.btn').click(function(){
$(hideList).toggle();
if($(hideList).css('display') == 'none') {
$('.btn').text('お知らせをもっと見る');
} else {
$('.btn').text('閉じる');
}
return false;
});
var num = $('.post__item').length;
if(num < 3) {
$('.btn').hide();
};
});
</script>