5分で実装！WordPressでページネーションを作成する方法（プラグインor自作）

みなさんこんにちは！エンジニアの高澤です。

今回はメディアサイトやブログサイトなど、多くの記事を扱うWebサイトには欠かせない「ページネーション」について解説したいと思います。

多くの記事を提供するサイトでは必ずというぐらいページネーションが使われており、ユーザーにとってはサイトの使い勝手がよくなり、各々の記事への回遊率が上がる可能性が十分に考えられます。

当記事ではそんなページネーションについて、制作に携わるエンジニアや Webデザイナーの方はもちろん、Webディレクターやブロガーの方などプログラミングの知識がない中でページネーションの実装をしなければならないけど自信がない…とお困りの方にもぜひ活用していただきたい内容となっております。

この記事を読み終わる頃にはページネーションを難なく実装できるスキルが身についていることでしょう。

これから解説する実装の仕方の内容などは、全て実際のWebサイト制作で活かせる内容となっておりますので、ご参考にしていただければ幸いです。

ページネーションとは

ページネーションとは、ページ送りのことをいいます。

ページネーションは下記の2種類があります。

個別記事ページのページネーション
一覧ページのページネーション

ページネーションの役割

役割としては、例えば全部で100件もある記事の一覧ページがあったとして、区切りの良い10件まで表示して残りの90件は他のページで続けて10件ずつ表示されたほうがページが過剰に縦に長くなったりせず、ユーザーにとって使いやすくしてくれるといったことがあります。そうした機能を実現してくれるのがページネーションです。
個別記事ページにおいても、よくあるパターンが記事ページの下あたりに前後の記事のリンクがあれば前後の記事へ遷移することができます。

ページネーションのメリット

ページネーションは、ページが無駄に縦に長くならなくなったり、すぐに隣のページに遷移できるため、ユーザーにとって使い勝手がよくなり回遊率が上がり直帰率が低くなる可能性や、使いやすさが上がる可能性が高くなるなどのメリットがあります。

そういったメリットから、サイト制作においてページネーションを実装することが非常に多いです。

ページネーションを設置する方法

WordPressでページネーションを設置する方法は大きく以下の2つがあります。１、自分でPHPを書いて自作する２、プラグインを使用する

実際にWebサイト制作の現場では、自分でPHPを書いて自作するパターンが非常に多いです。
その理由は、エンジニアからしたらできるだけプラグインを使いたくないという暗黙の了解があるのと、プラグインを使うことでサイトが重くなるのを避けたいという共通した方針があるためです。

また、実際は導入するだけなら簡単なコピペで済んでしまうので、実務でも自作する方法が多い傾向があるかと思います。

エンジニア目線からみた２つの実装方法のメリット、デメリット

①自分でPHPを書いて自作する

メリット：自由に機能やデザインをカスタマイズすることができる。また余分なプログラムがない分サイトが重くなる確率が低い。
デメリット：プログラミングの知識が必要。ページによってプログラムの実装の仕方が変わってくる。しかし当記事では知識がなくても実装できる方法を解説します。

②プラグインを使用する

メリット：ほんの数分で簡単に導入できる。自動で設定するための管理画面が生成されるため使いやすい。
デメリット：プラグインの独自の仕様があるため自由の幅が制限されてしまう。余分なプログラムが追加されるためサイトが重くなる可能性がある。

上記のようなメリット・デメリットがみられますが、実際の Webサイト制作ではページネーションの実装に関してはPHPを書いて自作するやり方が多いです。

現に筆者は一度もページネーションをプラグインで実装したことがありません。

しかし、ケースバイケースな部分はあるかと思うので、工数をかけずに本当に手っ取り早くページネーションを実装する必要性があるとすればプラグインを使った方がいい場合があります。

サイトの方向性や運用状況によって使い分けましょう。

PHPを書いて自作する方法

それでは、実際にPHP言語でページネーションを自作する方法を解説します。内容としては大きく2種類「個別記事ページの前後のページネーション」と「一覧ページのページネーション」の自作方法をご紹介します。

下記の通り進めていただければプログラミングの知識がない方でも実装が可能となっています。ぜひ、解説に沿って進めてみてください。

一覧ページでページネーションを実装する方法

トップページ・カテゴリー・タグページ・カスタム投稿タイプ・検索結果ページの場合

まずは一覧ページとして機能させている5種類のテンプレートにページネーションを設置する方法をご紹介します。ここで扱うテンプレートとしては下記になります。

自作で実装するテンプレート
トップページ用テンプレート：index.php、home.php、front-page.php
カテゴリー用テンプレート：category.php
タグ用テンプレート：tag.php
カスタム投稿タイプ用テンプレート：single-〇〇.php（〇〇はカスタム投稿タイプ名）
検索結果ページ用テンプレート：search.php まず結論として下記のコードをテンプレートにコピペすれば実装ができます。
コピペする最適な位置は、WordPressループのプログラムの下あたりが良いかと思います。

<?php
$args = array(
    'mid_size' => 1,
    'prev_text' => '&lt;&lt;前へ',
    'next_text' => '次へ&gt;&gt;',
    'screen_reader_text' => ' ',
);
the_posts_pagination($args);
?>

<?php

$args = array(

'mid_size' => 1,

'prev_text' => '<<前へ',

'next_text' => '次へ>>',

'screen_reader_text' => ' ',

);

the_posts_pagination($args);

上記のコードはWordPress関数の１つであるthe_posts_pagination()関数を使って表示させています。こちらのコードはシンプルでプログラミング知識がない方でも扱いやすいのではないかなと思います。

それでは早速画面を確認していただくと下図のようにページネーションが表示されているはずです。

CSSでデザインする

上図のままだとデザイン的に質素な印象になってしまうので、下記のCSSをさらに先ほどコピペしたコードのすぐ下にコピペしましょう。テンプレートであるPHPファイルにコピペする場合は、下記コードの上に「<style>」、下に「</style>」を追記してください（※CSSファイルにコピペする場合は不要です）。

.pagination{
   margin:40px 0 0;
}
.nav-links{
   display:flex;
}
.pagination .page-numbers{
   display:inline-block;
   margin-right:20px;
   padding:20px 25px;
   color:#333;
   border-radius:3px;
   box-shadow:0 3px 3px #999;
   background:#fff;
}
.pagination .current{
   padding:20px 25px;
   background:#69a4db;
   color:#fff;
}
.pagination .prev,
.pagination .next{
   background:transparent;
   box-shadow:none;
   color:#69a4db;
}
.pagination .dots{
   background:transparent;
   box-shadow:none;
}

.pagination{

margin:40px 0 0;

}

.nav-links{

display:flex;

}

.pagination .page-numbers{

display:inline-block;

margin-right:20px;

padding:20px 25px;

color:#333;

border-radius:3px;

box-shadow:0 3px 3px #999;

background:#fff;

}

.pagination .current{

padding:20px 25px;

background:#69a4db;

color:#fff;

}

.pagination .prev,

.pagination .next{

background:transparent;

box-shadow:none;

color:#69a4db;

}

.pagination .dots{

background:transparent;

box-shadow:none;

}

コピペしていただいた後に画面を確認すると、下図のようにページネーションがデザインされたと思います。

固定ページの場合

次に固定ページでの一覧ページでページネーションを実装する方法を解説します。
固定ページとは下記のテンプレートのことをいいます。

自作で実装するテンプレート（固定ページの場合）
固定ページ用テンプレート：page.php

ちなみになぜ固定ページのみ分けて説明しているのかというと、固定ページでは先ほど解説したthe_posts_pagination()関数ではページネーションを実装することができないからです。

なので、下記のプログラムをコピペします。

<div class="pagination">
   <div class="list-box">
       <ul>
       <?php
       $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
       $the_query = new WP_Query( array(
           'post_status' => 'publish',
           'post_type' => 'post', //　ページの種類（例、page、post、カスタム投稿タイプ名）
           'paged' => $paged,
           'posts_per_page' => 5, // 表示件数
           'orderby'     => 'date',
           'order' => 'DESC'
       ) );
       if ($the_query->have_posts()) :
           while ($the_query->have_posts()) : $the_query->the_post();
           ?>
               <?php
               /*　ここにループさせるコンテンツを入れます　*/
               ?>
           <?php
           endwhile;
       else:
           echo '<div><p>ありません。</p></div>';
       endif;
       ?>
       </ul>
   </div>
 
   <div class="pnavi">
       <?php //ページリスト表示処理
       global $wp_rewrite;
       $paginate_base = get_pagenum_link(1);
       if(strpos($paginate_base, '?') || !$wp_rewrite->using_permalinks()){
           $paginate_format = '';
           $paginate_base = add_query_arg('paged','%#%');
       }else{
           $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
           user_trailingslashit('page/%#%/','paged');
           $paginate_base .= '%_%';
       }
       echo paginate_links(array(
           'base' => $paginate_base,
           'format' => $paginate_format,
           'total' => $the_query->max_num_pages,
           'mid_size' => 1,
           'current' => ($paged ? $paged : 1),
           'prev_text' => '< 前へ',
           'next_text' => '次へ >',
       ));
       ?>
   </div>
</div>

<ul>

<?php

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$the_query = new WP_Query( array(

'post_status' => 'publish',

'post_type' => 'post', //　ページの種類（例、page、post、カスタム投稿タイプ名）

'paged' => $paged,

'posts_per_page' => 5, // 表示件数

'orderby' => 'date',

'order' => 'DESC'

) );

if ($the_query->have_posts()) :

while ($the_query->have_posts()) : $the_query->the_post();

<?php

/*　ここにループさせるコンテンツを入れます　*/

<?php

endwhile;

else:

echo '<div><p>ありません。</p></div>';

endif;

</ul>

</div>

<?php //ページリスト表示処理

global $wp_rewrite;

$paginate_base = get_pagenum_link(1);

if(strpos($paginate_base, '?') || !$wp_rewrite->using_permalinks()){

$paginate_format = '';

$paginate_base = add_query_arg('paged','%#%');

}else{

$paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .

user_trailingslashit('page/%#%/','paged');

$paginate_base .= '%_%';

}

echo paginate_links(array(

'base' => $paginate_base,

'format' => $paginate_format,

'total' => $the_query->max_num_pages,

'mid_size' => 1,

'current' => ($paged ? $paged : 1),

'prev_text' => '< 前へ',

'next_text' => '次へ >',

));

</div>

上記のコードをpage.phpの表示させたい任意の場所にコピペします。

確認して見てください。下図のようにページネーションが表示されていれば実装できています。

CSSでデザインする

固定ページのナビゲーションにおいてもCSSでデザインさせましょう。
といっても実は先述した固定ページ以外のCSSと全く同じです。
なので、記事の順番通りに進めている方は固定ページのページネーションがすでにデザインされていることと思います。
されていない方は、下記のCSSを追記しましょう。

.pagination{
   margin:40px 0 0;
}
.nav-links{
   display:flex;
}
.pagination .page-numbers{
   display:inline-block;
   margin-right:20px;
   padding:20px 25px;
   color:#333;
   border-radius:3px;
   box-shadow:0 3px 3px #999;
   background:#fff;
}
.pagination .current{
   padding:20px 25px;
   background:#69a4db;
   color:#fff;
}
.pagination .prev,
.pagination .next{
   background:transparent;
   box-shadow:none;
   color:#69a4db;
}
.pagination .dots{
   background:transparent;
   box-shadow:none;
}

.pagination{

margin:40px 0 0;

}

.nav-links{

display:flex;

}

.pagination .page-numbers{

display:inline-block;

margin-right:20px;

padding:20px 25px;

color:#333;

border-radius:3px;

box-shadow:0 3px 3px #999;

background:#fff;

}

.pagination .current{

padding:20px 25px;

background:#69a4db;

color:#fff;

}

.pagination .prev,

.pagination .next{

background:transparent;

box-shadow:none;

color:#69a4db;

}

.pagination .dots{

background:transparent;

box-shadow:none;

}

コピペした後に画面を確認すると下図のように整っているかと思います。
これで、ページネーションを自作する方法はマスターできました。

個別記事ページで前後のページネーションを実装する方法

次は個別記事でよくある前後の記事ページに飛べるページネーションの実装のやり方を解説したいと思います。

個別記事ページ

まずはよくあるパターンとして、個別記事ページの本文のしたにある前後のページへのページネーションの作り方を解説します。

個別記事ページのテンプレートとはsingle.phpのことをさしています。コードは下記になります。single.phpにコピペしていただければ実装されます。

<div class="post__pagination">
    <?php $nextpost = get_adjacent_post(false, '', false); if ($nextpost) : ?>
    <div class="post__pagination__left">
        <a href="<?php echo get_permalink($nextpost->ID); ?>">
            <span class="post__pagination__left__img"><?php echo get_the_post_thumbnail($nextpost->ID); ?></span>
            <span class="post__pagination__left__text">«<?php echo esc_attr($nextpost->post_title); ?></span>
        </a>
    </div>
    <?php endif; ?>
    <?php $prevpost = get_adjacent_post(false, '', true); if ($prevpost) : ?>
    <div class="post__pagination__right">
        <a href="<?php echo get_permalink($prevpost->ID); ?>">
            <span class="post__pagination__right__img"><?php echo get_the_post_thumbnail($prevpost->ID); ?></span>
            <span class="post__pagination__right__text"><?php echo esc_attr($prevpost->post_title); ?>»</span>
        </a>
    </div>
    <?php endif; ?>
</div>

<?php $nextpost = get_adjacent_post(false, '', false); if ($nextpost) : ?>

<span class="post__pagination__left__text">«<?php echo esc_attr($nextpost->post_title); ?></span>

</a>

</div>

<?php endif; ?>

<?php $prevpost = get_adjacent_post(false, '', true); if ($prevpost) : ?>

<span class="post__pagination__right__text"><?php echo esc_attr($prevpost->post_title); ?>»</span>

</a>

</div>

<?php endif; ?>

</div>

CSSでデザインする

このままではいい加減な印象を与えかねないので、CSSでデザインをしましょう。
下記のCSSコードをコピペして追加してください。

.post__pagination{
    margin-bottom:50px;
    overflow:hidden;
}
.post__pagination__left,
.post__pagination__right{
    width:330px;
}
.post__pagination__left{
    float:left;
}
.post__pagination__right{
    float:right;
}
.post__pagination__left > a,
.post__pagination__right > a{
    display:block;
    position:relative;
}
.post__pagination__left__img,
.post__pagination__right__img{
    display:block;
    background:#000;
}
.post__pagination__left__img > img,
.post__pagination__right__img > img{
    width:100%;
    height:100px;
    object-fit:cover;
    opacity:0.3;
}
.post__pagination__left__text,
.post__pagination__right__text{
    position: absolute;
    top: 44px;
    z-index: 999:;
    color: #fff;
    font-size:14px;
}
.post__pagination__left__text{
    left:50px;
}
.post__pagination__right__text{
    right: 50px;
}

.post__pagination{

margin-bottom:50px;

overflow:hidden;

}

.post__pagination__left,

.post__pagination__right{

width:330px;

}

.post__pagination__left{

float:left;

}

.post__pagination__right{

float:right;

}

.post__pagination__left > a,

.post__pagination__right > a{

display:block;

position:relative;

}

.post__pagination__left__img,

.post__pagination__right__img{

display:block;

background:#000;

}

.post__pagination__left__img > img,

.post__pagination__right__img > img{

width:100%;

height:100px;

object-fit:cover;

opacity:0.3;

}

.post__pagination__left__text,

.post__pagination__right__text{

position: absolute;

top: 44px;

z-index: 999:;

color: #fff;

font-size:14px;

}

.post__pagination__left__text{

left:50px;

}

.post__pagination__right__text{

right: 50px;

}

上記のCSSを合わせてコピペしていただければ下図通りのページネーションが表示されます。

では固定ページはまた別の実装をしなければいけないのか？というとそうではありません。
前後のページのページネーションの実装に関しては記事個別ページと全く同じ上記のコードをコピペすれば同じものを実装することができます。

プラグインで実装する方法

続いてプラグインを使ってページネーションを実装する方法をご紹介します。
使うプラグインはWP-PageNaviプラグインを使っていきたいと思います。

WP-PageNaviを選んだ理由

数あるプラグインの中からWP-PageNaviプラグインを選んだ理由は、数あるプラグインの中でも評価が高く、沢山インストールされている実績があるためです。

また、ネットで検索すれば多くの情報が出てくるので、信頼がある上に扱いやすいという大変優秀なプラグインであることから、今回ご紹介させていただいております。

また、実際のWebサイト制作でも使われたりするので、WP-PageNaviプラグインを扱うスキルはあって損はありません。
それでは、使い方を解説していきます。

WP-PageNaviプラグインのインストール方法

①WordPress管理画面メニューの「プラグイン」をクリック

↓ ②「新規追加」をクリック

↓
③「WP-PageNavi」で検索

↓
④「今すぐインストール」をクリック

↓
⑤「有効化」をクリック

まとめると、
WordPress管理画面のメニューの「プラグイン」→「新規追加」→「WP-PageNavi」で検索→「今すぐインストール」をクリック→「有効化」をクリック
この流れで進めていただけると、インストールできるかと思います。
インストールが完了したら、下記の方法でページネーションを設定しましょう。

WP-PageNaviプラグインの使い方

一覧ページでページネーションを実装する方法

プラグインをインストールしていただきましたら、まずは5種類のテンプレートのページネーション実装方法をご紹介します。
ここで扱うテンプレートとしては下記になります。

プラグインで実装するテンプレート
トップページ用テンプレート：index.php、home.php、front-page.php
カテゴリー用テンプレート：category.php
タグ用テンプレート：tag.php
カスタム投稿タイプ用テンプレート：single-〇〇.php（〇〇はカスタム投稿タイプ名）
検索結果ページ用テンプレート：search.php 上記のテンプレートに下記のコードをコピペしましょう。
ページネーションが設置されたのが確認できるかと思います。

<?php wp_pagenavi(); ?>

1	<?php wp_pagenavi(); ?>

固定ページの場合

次に固定ページの一覧ページでページネーションを実装する方法を解説します。
固定ページとは下記のテンプレートのことをいいます。
プラグインで実装するテンプレート（固定ページの場合）
固定ページテンプレート：page.php
なぜ固定ページのみ分けて説明しているのかというと、先ほど解説したthe_posts_pagination()関数ではページネーションを実装できないという問題と同じパターンで、固定ページではただwp_paginavi()関数を記述しただけではページネーションが機能せず何も表示されないからです。

固定ページでWP-PageNaviプラグインを使用する場合はWP_Queryクラスのループ使用する

固定ページでは必ず、
・WP_Queryクラスを使う（WP_QueryクラスのWordPressループを使う）
・現在開いているページが何ページ目かの情報を取得させる
の2点が必要になります。

実際には下記のコードをコピペしていただければ実装できます。

<div class="pagination">
   <div class="list-box">
       <ul>
        <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $the_query = new WP_Query( array(
            'post_status' => 'publish',
            'post_type' => 'post', //ページの種類（例、page、post、カスタム投稿タイプ）
            'paged' => $paged,
            'posts_per_page' => 5, // 表示件数
            'orderby'     => 'date',
            'order' => 'DESC'
        ) );
        if ($the_query->have_posts()) :
            while ($the_query->have_posts()) : $the_query->the_post();
            ?>
                <?php
                /*　ここにループさせるコンテンツを入れます　*/
                ?>
            <?php
            endwhile;
        else:
            echo '<div><p>ありません。</p></div>';
        endif;
        ?>
        </ul>
    </div>
    <?php wp_pagenavi(array('query' => $the_query)); ?>
</div>

<ul>

<?php

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$the_query = new WP_Query( array(

'post_status' => 'publish',

'post_type' => 'post', //ページの種類（例、page、post、カスタム投稿タイプ）

'paged' => $paged,

'posts_per_page' => 5, // 表示件数

'orderby' => 'date',

'order' => 'DESC'

) );

if ($the_query->have_posts()) :

while ($the_query->have_posts()) : $the_query->the_post();

<?php

/*　ここにループさせるコンテンツを入れます　*/

<?php

endwhile;

else:

echo '<div><p>ありません。</p></div>';

endif;

</ul>

</div>

<?php wp_pagenavi(array('query' => $the_query)); ?>

</div>

上記のwp_pagenavi()関数では、WP_Queryクラスで条件を指定した$the_query変数から情報を取得し、ページネーションを表示させています。

<?php wp_pagenavi(array('query' => $the_query)); ?>

1	<?php wp_pagenavi(array('query' => $the_query)); ?>

このように、WP-PageNaviプラグインを使えば、インストールして有効化→コードをコピペ、の２ステップで終わるので一瞬で実装が可能です。

まとめ

以上がWordPressにてページネーションを実装する方法を解説いたしました。
ページネーションにはユーザーにとってはサイトの閲覧のしやすさが高まるなどメリットがあり、また、WordPressであれば導入もほんの数分でできてしまうのでとても便利です。
当記事の内容は実際の Webサイト制作のお仕事に活かせる内容となっておりますので、ぜひご参考にしていただければと思います。

また、当サイトDIGITORでは、他の記事でWordPressのテーマ作成において欠かせない重要な技術を多数解説しております。 テーマ作成において必要になる技術を全部で12記事ご用意しており、テーマ作成の記事と合わせてご活用していただけると内容の理解が深まります。

知識がなくても無理なく実力が伸ばせる内容となっておりますのでぜひご活用ください。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。