WordPressの記事一覧に使える!タブ内でページネーションを実現する方法
皆さんこんにちは。
同じページ内でカテゴリ別にタブを実装してWordpressの記事を表示したい!でもページネーションで生成されたページリンクって別ページに移動しちゃう・・・そんな時はjQueryプラグイン「jQuery TabPager」で解決です!
jQuery TabPagerを実装する
まず以下のサイトさんからダウンロード!
動作に必要なもの
WordPressのページネーションではなく、liの数からページネーションを生成してくれます。助かる・・・!
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/jquery.tabpager.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="<?php bloginfo('template_url'); ?>/js/jquery.tabpager.js"></script> <ul id="tab"> <li class="tab-label nopscr" href="#tab1"> <p>aaa</p> </li> <li class="tab-label nopscr" href="#tab2"> <p>bbb</p> </li> </ul> <div class="tab_contents"> <div class="tab_area" id="tab1"> <ul class="article_list"> <li>aaa</li> </ul> </div> <div class="tab_area" id="tab3"> <ul class="article_list"> <li>bbb</li> </ul> </div> </div>
<script> jQuery(document).ready(function () { jQuery("#tab").tabpager({ items: 4, contents: 'article_list', previous: '<', next: '>', position: 'bottom', }); jQuery('.tab li').click(function () { $('.tab li').removeClass('active'); $(this).addClass('active'); $('.tab_area').hide(); $(jQuery(this).find('a').attr('href')).fadeIn(); return false; }); }); </script>