WP-PageNaviの使い方とページネーションの実装方法【WordPress】

WordPressでページネーションを実装するには、Wordpress標準機能のものを使用したりfunctions.php等で自身で作成する事も出来ますが、プラグインを使用すると簡単で便利です。
今回はページネーションを実装する事が出来るプラグイン「WP-PageNavi」のインストール方法や設定方法・基本的な使い方まで解説していきます。

WP-PageNaviとは

WP-PageNaviとはページネーションを実装する事ができるWordpressの人気プラグインです。
WordPress標準機能のページネーションよりも使いやすく、ボタンの表示やテキストの変更なども簡単に出来るため、Wordpressユーザーに長年に渡って使用されているプラグインです。

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

最初にWP-PageNaviのインストール方法から解説していきます。
WordPressの管理画面左側メニューから「プラグイン」→「新規プラグインを追加」をクリックします。

次に、右上にある検索フィールドに「WP-PageNavi」と入力し、検索結果で出てくるプラグイン「WP-PageNavi」の「今すぐインストール」ボタンを押してインストールします。

インストールが終わると「有効化」ボタンに変わるので、そのままボタンを押してプラグインを有効化します。

有効化が完了してプラグインが使えるようになると、管理画面右側メニューの「設定」の中に「PageNavi」というメニューが追加されます。WP-PageNaviの設定等はここから行う事ができます。

WP-PageNaviの設定方法

WP-PageNaviの設定は管理画面右側メニューの「設定」→「PageNavi」から行う事ができます。
設定項目は「ページナビゲーションテキスト」と「ページナビゲーション設定」に分かれており、各項目については以下のようになります。

ページナビゲーションテキスト

この項目は以下画像のように、ページネーションとして表示される部分の表示・非表示、表示されるテキストの内容を設定できます。

ページナビゲーション設定

この項目では、ページネーションのデザインに関する設定や、その他表示に関する設定があります。

メインクエリにページネーションを実装する方法

続いて、ページネーションを表示するためにテーマファイルに記述する内容を解説していきます。
以下はメインクエリで表示する記述となります。

<?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            // 投稿内容の表示
        endwhile;
    endif;
    wp_pagenavi(); // WP-PageNaviのページネーションを出力
?>

上記のようにendif;の後(ループの外)に、WP-PageNaviを呼び出す関数であるwp_pagenavi();を追加するだけで記事数に応じて自動的に表示されるので簡単です。

サブクエリにページネーションを実装する方法

続いてサブクエリにページネーションを表示する方法です。
サブクエリではメインクエリとは表示方法が違い、いくつか注意する事があります。

<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // ※1
    $args = array(
        'post_type' => 'post',
        'paged' => $paged, // ※2
        'posts_per_page' => 24, // ※3
    );

    $custom_query = new WP_Query($args);
    if($custom_query->have_post()) :
        while($custom_query->have_posts()) :
            $custom_query->the_post(); // 投稿内容の表示
        endwhile;
    endif;

    if(function_exists('wp_pagenavi')) {
        wp_pagenavi(array('query' => $custom_query)); // ※4
    }

    wp_reset_postdata();
?>

上記のように記述する事でサブクエリでページネーションを表示する事ができます。
注意する項目は以下となります。

※1※2 現在のページが何ページ目かを取得し、クエリに組み込む

サブクエリでは、現在のページが何ページ目か取得しクエリに組み込んであげないとページ送りが出来ません。出来たとしても、404ページが表示されたり、2ページ目以降が正しく表示されなくなります。

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

$args = array(
    'paged' => $paged,
);

上記の内容を組み込む事で、正しくページ送りが出来るようになります。

※3 posts_per_pageの値を管理画面の「1ページに表示する最大投稿数」の値と揃える

WP-PageNaviは管理画面の「設定」→「表示設定」で設定できる「1ページに表示する最大投稿数」の値を元にページ数を計算していますので、この値と「posts_per_page」の値が違うと正しくページ数が計算されません。

$args = array(
    'posts_per_page' => 24,
);

※functions.phpなどで「posts_per_page」の値を定義している場合は、その値と合わせてください。

※4 WP-PageNaviを呼び出す際に引数にサブクエリを渡す

WP-PageNaviを呼び出す際に、引数にサブクエリを渡さないとページネーションが表示されません。

if(function_exists('wp_pagenavi')) {
    wp_pagenavi(array('query' => $custom_query));
}

これらの注意点を正しく記述しないとページネーションが表示されなかったり正しく動作しませんので、上手く動かない場合はこれらを確認してみてください。

さいごに

いかがでしたでしょうか。
今回は、WP-PageNaviの使い方とページネーションの実装方法を解説しました。
WordPress標準機能のページネーションよりも便利でカスタマイズも出来るので使ってみてください。上手く動かない場合は今回の内容も合わせて確認してみてください。