YAM!

jQuery

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>
 

バナー広告の参考にも! 寄り道で一息。

もっと広告を見てみる!
TOP