一定数以上の記事は非表示にしてアコーディオンで表示させる方法【WordPress】

  • LINEで送る

先日、仕事のタスクで実装したコードを備忘録として残そうと思います。

内容としては、

WordPressで記事取得後、2記事だけ表示させて

残りの記事は非表示にしてボタンをクリックするとアコーディオンメニューの様に表示されるというものです。

よくコーポレートサイトなどで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>
 

記事の表示・非表示についてはこちらを参考

  • LINEで送る

SNSでもご購読できます。

コメントを残す

*