https://qiita.com/noqua/items/a26cfcb378300ba20bb1
上記サイトを参考に、newsカテゴリを年別で表示することはできました。
これを、「2019年」「2018年」「2017年」「2016年」「2015年」「2014年」のタブをそれぞれ選択したときだけ、その年の投稿がページ内に表示されるようにしたいのですが、どうしても方法が分かりません。
archive.phpのコードはこちらです
<?php // 出力する内容を設定 function archiveFunc($year){ query_posts('category_name=news&posts_per_page=-1&year='.$year.'&order=ASC'); // category_name=history などスラッグを記入 //posts_per_page は表示する記事数(-1は無制限) if(have_posts()) : ?> <dl class="news_archive"> <dt><?php echo $year; ?> 年</dt> <?php while(have_posts()) : the_post(); ?> <dd> <div class="date"><?php the_time('Y.m.d'); ?></div> <div class="content"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_content(); ?></a></div> </dd> <?php endwhile; ?> </dl> <?php endif; wp_reset_query(); } $thisyear = date('Y'); // 現在の西暦年を取得 for ($year=$thisyear; $year >= 2000; $year--) { // $year >= で指定した年から現在の年までの記事を出力(例では2000年から現在まで) archiveFunc($year); } ?>
・
・
・
このコードによる結果はこちら(2019年分もちゃんと表示されています)
タブ切り替えのhtmlはこれを使用し、
<ul class="tab_area"> <li id="tab1" class="select">2019</li> <li id="tab2">2018</li> <li id="tab3">2017</li> <li id="tab4">2016</li> <li id="tab5">2015</li> <li id="tab6">2014</li> </ul> <div class="content_area"> 2019の内容 </div> <div class="content_area hide"> 2018の内容 </div> <div class="content_area hide"> 2017の内容 </div> <div class="content_area hide"> 2016の内容 </div> <div class="content_area hide"> 2015の内容 </div> <div class="content_area hide"> 2014の内容 </div>
javascript
jQuery(function($){ //クリックしたときのファンクションをまとめて指定 $('ul.tab_area li').click(function() { //.index()を使いクリックされたタブが何番目かを調べ、 //indexという変数に代入します。 var index = $('ul.tab_area li').index(this); //コンテンツを一度すべて非表示にし、 $('.content_area').css('display','none'); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content_area').eq(index).fadeIn(); //一度タブについているクラスselectを消し、 $('.tab_area li').removeClass('select'); //クリックされたタブのみにクラスselectをつけます。 $(this).addClass('select') }); }); jQuery(function($){ //location.hashで#以下を取得 変数hashに格納 var hash = location.hash; //hashの中に#tab~が存在するか調べる。 hash = (hash.match(/^#tab\d+$/) || [])[0]; //hashに要素が存在する場合、hashで取得した文字列(#tab2,#tab3等)から#より後を取得(tab2,tab3) if($(hash).length){ var tabname = hash.slice(1); } else{ // 要素が存在しなければ初期化 var tabname = "tab1";} //コンテンツを一度すべて非表示にし、 $('.content_area').css('display','none'); //一度タブについているクラスselectを消し、 $('.tab_area li').removeClass('select'); var tabno = $('ul.tab_area li#' + tabname).index(); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content_area').eq(tabno).fadeIn(); //クリックされたタブのみにクラスselectをつけます。 $('ul.tab_area li').eq(tabno).addClass('select') });
CSS
.tab_area{ overflow:hidden; margin:0 auto; width:100%; border-bottom:#ccc solid 1px; text-align:center; } .tab_area li{ color:#000; padding:15px 0; margin:0 5vw; display:inline-block; margin-right:-1px; cursor:pointer; font-size:1rem; } .all_area { overflow: hidden; } .all_area div.content_area{ background:#fff; padding:30px 0 0 0; margin-bottom:30px; border-top:1px solid #1E3784; } .tab_area li.select{ /*アクティブタブの装飾*/ border-bottom:5px solid #000; } .hide{display:none;}
静的には動きました。動的にこれを表示する方法が分かりません。
どなたかご教授いただけないでしょうか。
回答1件
あなたの回答
tips
プレビュー