現在質問中のbootstrapのピルナビゲーションと類似の質問ですが、
内容は別となります。
wordpressにjqueryを使用し、タブメニューを実装しようとしています。
いろいろと調べ、タブメニューを実装することはできたのですが、
タブメニューを選択しても、そのカテゴリーに属する1つの投稿しか表示されず困っています。
利用しているコードは下記のものです。
lang
1<script type="text/javascript"> 2$(document).ready(function() { 3 $('.tab li').click(function() { 4 $('.tab li').removeClass('active'); 5 $(this).addClass('active'); 6 $('.area').hide(); $($(this).find('a').attr('href')).fadeIn(); return false; 7 }); 8}); 9</script>
lang
1 <div id="main" class="col-md-12"> 2 <ul class="tab list-unstyled"> 3 <li><a href="#2">カテゴリー1</a></li> 4 <li><a href="#3">カテゴリー2</a></li> 5 <li><a href="#4">カテゴリー3</a></li> 6 <li><a href="#5">カテゴリー4</a></li> 7 </ul> 8 <?php if (have_posts()) : ?> 9 <?php while (have_posts()) : the_post(); ?> 10 <?php 11 $post_cat=get_the_category(); 12 $cat=$post_cat[0]; 13 ?> 14 15 <div class="col-md-12"> 16 <div class="area" id="<?php echo $cat->cat_ID ?>"> 17 <?php the_title(); ?> 18 </div> 19 </div> 20 21 22 23 24 <?php endwhile; ?> 25 26 <?php else : ?> 27 <?php endif; ?> 28 </div> 29
lang
1.tab, .tab li, .tab li a {/*クリックするタブ部分*/ 2 float: left; 3 padding:5px 10px; 4 margin-right:2px; 5} 6 7.area {/*切り替わる部分はまず全部消しておく*/ 8 display: none; 9} 10.tab li.active {/*選択中のタブ。色を変える等*/ 11 background: #eee; 12} 13 14.tab li.active a{/*選択中のタブのリンクカラー*/ 15 color:red; 16}
したいことは、
それぞれタブメニューを選択すると、
そのカテゴリに属している投稿が
すべて(複数)表示されることです。
その時の投稿の昇順については
できれば任意に変更できることが望ましいです。
勉強中なので、コードの書き方などが稚拙かもしれませんが
ご回答よろしくお願いいたします。
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。