WordPressでホームページ制作をしている時に、
カテゴリー別に投稿をタブ切り替えで実装し、その中にページネーションを設置したいときありますよね。

通常の1ページ内に1つの投稿のページネーションを設置する場合では以下のコードが代表的だと思います。

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$the_query = new WP_Query( array(
    'post_status' => 'publish',
    'paged' => $paged,
    'posts_per_page' => 5, // 表示件数
    'orderby'     => 'date',
    'order' => 'DESC'
) );
 
 
if ($the_query->have_posts()) :?><?php
   while ($the_query->have_posts()) : $the_query->the_post();?>
//コンテンツ
<?php　endwhile;?><?php endif; ?>
<!-- pagenation -->
<div class="pagenation">
<?php 
if ($the_query->max_num_pages > 1) {
   echo paginate_links(array(
       'base' => get_pagenum_link(1) . '%_%',
       'format' => 'page/%#%/',
       'current' => max(1, $paged),
       'mid_size' => 1,
       'total' => $the_query->max_num_pages
   ));
}
wp_reset_postdata();?>
</div><!-- /pagenation -->

しかし、これでは２ページ３ページとそれぞれ違うURLに飛ぶ形になってしまいます。
これの何がいけないかというと違うタブの投稿も一緒に２ページ３ページと移動していますのです。

理想としては、2ページ目に行きたいタブ内だけで切り替えが出来ることですよね。

それを実現してくれるのが今回紹介するプラグインです。

jQuery TabPager

制作者さんのサイトはこちら

プラグインのダウンロードはこちら

使い方

HTML

    <!-- #tab -->
    <ul id="tab">
        <li>TAB1</li>
        <li>TAB2</li>
        <li>TAB3</li>
        <li>TAB4</li>
    </ul>
    <!-- /#tab -->
    
    <!-- #wrapper -->
    <div id="wrapper">
    
        <!-- .contents -->
        <div class="contents">
            <div>contents1-1</div> 
            <div>contents1-2</div> 
            <div>contents1-3</div> 
            <div>contents1-4</div>
            <div>contents1-5</div> 
            <div>contents1-6</div> 
            <div>contents1-7</div> 
            <div>contents1-8</div> 
            <div>contents1-9</div> 
            <div>contents1-10</div> 
            <div>contents1-11</div> 
        </div>
        <!-- /.contents -->
        
        <!-- .contents -->
        <div class="contents">
            <div>contents2-1</div> 
            <div>contents2-2</div> 
            <div>contents2-3</div> 
            <div>contents2-4</div>
            <div>contents2-5</div> 
            <div>contents2-6</div> 
            <div>contents2-7</div> 
            <div>contents2-8</div> 
            <div>contents2-9</div> 
            <div>contents2-10</div> 
            <div>contents2-11</div> 
        </div>
        <!-- /.contents -->
        
        <!-- .contents -->
        <div class="contents">
            <div>contents3-1</div> 
            <div>contents3-2</div> 
            <div>contents3-3</div> 
            <div>contents3-4</div>
            <div>contents3-5</div> 
            <div>contents3-6</div> 
            <div>contents3-7</div> 
            <div>contents3-8</div> 
            <div>contents3-9</div>
        </div>
        <!-- /.contents -->

JS

 <script>
    $(document).ready(function() 
    {
        $("#tab").tabpager({
            items: 5,
            contents: 'contents',
            //time: 300,
            previous: '&laquo;前へ',
            next: '次へ&raquo;',
            //start: 1,
            position: 'top',
            //scroll: true
        });
    });

    </script>

それぞれを設置するだけで使うことが出来ます。
このプラグインの良い所は、ページネーションだけでなくタブ機能も一緒に作ってくれるところです。
JS部分のitemsの数を変えることで1ページに表示させる最大の数を指定することが出来ます。

もちろんページネーションのデザインもCSSを上書きして変更することが可能です。

少し残念なところなど

これは私の調べ不足かもしれませんが、
ページネーションの数が多くなった際に省略できる機能がない(?)点が少し残念かなと思いました。
「1.2.3.....8.9.10」 こんな感じのやつです。
それ以外は非常に使いやすく分かりやすいので今後も重宝していくと思います。


―――――――――


Quality Web Studioでは、Web制作以外にも技術的指導(メンター)等も行っています。
学習に行き詰ったり、分からない時に相談できる人が欲しい方は是非ご連絡いただけたらと思います。
詳しくはこちらのサイトからご確認ください↓
https://quality-web.jp/mentor