カテゴリー記事一覧ページにて年別のタブを押すと下にその年の記事一覧が出るようにしたいのですが、できずに困っています。
現状は2019、2018、2017のボタンを押すと2019年の記事が一つずつ表示される状況です。
これを2019年のタブを押せば2019年の記事が6件、2018年のタブを押せば2018年の記事が6件というように年別で表示がされるようにするには
どのようにすればよういのでしょうか。
なお、下記ページを参考にコードを書いています。
<タブの切り替えについて>
-jQueryとCSSでシンプルなタブ切り替え
https://qiita.com/Chinats/items/f947ec965175847bb858
<年別のタブ切り替えについて>
-wordpressの年別リストをタブ切り替えで表示したい
https://teratail.com/questions/168839
・category-news.php
<div class="container"> <?php $thisyear = date('Y'); $counter = 1; $list = ''; for ($year = $thisyear; $year >= 2014; $year--) { // リスト部分 $list .= '<button class="ChangeElem_Btn"'; $list .= '>' . $year . '</button>'; } // 出力 echo '<div class="ChangeElem_Btn_Content flex-box mt30">'; echo $list; echo '</div>'; ?> <ul> <?php query_posts("cat=1&showposts=6&year=$thisyear"); ?> <?php if(have_posts()): while(have_posts()): the_post(); ?> <li class="ChangeElem_Panel"> <a href="<?php the_permalink(); ?>" class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s" > <div class="postid" id="post-<?php the_ID(); ?>"> <figure> <?php if( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'full' ); ?> <?php else: ?> <img src="<?php echo get_template_directory_uri(); ?>/img/common/noimage.png" alt=""> <?php endif; ?> </figure> <div class="text"> <time class="date" datetime="<?php the_time(Y-m-d); ?>"> <?php the_time('Y.m.d'); ?></time> <p class="desc"><?php the_title(); ?></p> </div> </div> </a> </li> <?php endwhile; endif; ?> </ul> </div><!-- container -->
・script.js(タブの切り替え)
// タブ切り替え $(function () { /*初期表示*/ $('.ChangeElem_Panel').hide(); $('.ChangeElem_Panel').eq(0).show(); $('.ChangeElem_Btn').eq(0).addClass('is-active'); /*クリックイベント*/ $('.ChangeElem_Btn').each(function () { $(this).on('click', function () { var index = $('.ChangeElem_Btn').index(this); $('.ChangeElem_Btn').removeClass('is-active'); $(this).addClass('is-active'); $('.ChangeElem_Panel').hide(); $('.ChangeElem_Panel').eq(index).show(); }); }); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/12 07:45