記事一覧下にページネーションをつける方法（WP-PageNaviプラグイン）

Wordpressで投稿記事のページネーションを実現するには「WP-PageNavi」プラグインが便利です。

固定ページと記事詳細ページで記事一覧＋ページネーションを表示するには、WP_Queryを使ったコードが必要です。

TOPページ専用固定ページには微調整が必要で、single.phpで記事一覧＋ページネーションを追加するには、専用の別テーマファイルと、リダイレクト防止記述が必要です。

投稿記事を件数で区切ってページリンクをつける

今回はWordpress記事一覧の下に、任意の件数でページリンクをつける方法をご紹介します。

ページリンクとは、次の10件・前の10件の様なリンクの事で「ページネーション」とも言いますね。

Wordpressの場合「WP-PageNavi」というプラグインで、簡単にこの機能を実装できます。

導入時の注意

今回はWordpressに初めから導入されているテーマではなく、自作オリジナルテーマへ導入する事が前提です。

既存テーマの導入時とは少し違いますので注意しましょう。

テーマファイルのpage.phpやarchive.phpに対し、このプラグインを使うための修正が必要になります。

プラグインのインストール・有効化

まずはWP-PageNaviを検索・インストールして、有効化しましょう。

すると、管理画面の「設定」メニューにPageNaviメニューが表示されます。

WP-PageNaviの設定画面

設定欄では、ページネーションに関する様々な設定ができます。

中でも重要なのは以下の項目ではないかと思います。

ページネーション対象のファイルと注意

既存テーマの一覧系ファイルの場合

Wordperssに既存で入っているテーマの一覧出力ファイルなら、プラグインを入れた後ページネーションは上手く働くはずです。

archive.php、taxonomy.php、category.php等がそれにあたりますね。

ファイルのページネーションを表示させたい場所に、以下を記述するだけです。

<?php wp_pagenavi(); ?>

上記を入れる事で表示されるはずです。

改変が必要なテーマファイル

それに対しpage.php（固定ページ）やsingle.php（投稿詳細ページ）では、表示するのに改変が必要です。

自作のオリジナルテーマを使っている場合、archive.phpでも上手く動かない事があります。

その場合、これから紹介する方法でテーマファイルに修正を加えていく事になります。

改変対象となるケース

改変の対象となるのは、以下のケースです。

archive.php

archive.phpは、記事一覧を表示するための専用ファイルですよね。

通常投稿・カスタム投稿の一覧に特化したファイルのため、ページネーションはスムーズにできるはずです。

しかし一部例外もありますので、その場合は固定ページと同様のカスタマイズが必要です。

page.php

固定ページとなるpage.phpでは、改変が2種類に分かれます。

それは「サブページで記事一覧を出す場合」と「TOPページで記事一覧を出す場合」です。

使うコードは同じなのですが、TOPページで記事一覧およびページネーションをする場合、ほんの少しだけ変更が必要になります。

single.php

記事詳細を出すsingle.phpの場合「前の記事」や「次の記事」等のリンクであれば、タグをつけるだけで動くはずです。

問題は、記事の詳細の下に新たに一覧記事およびページネーションをつける場合ですね。

リンクは出るがリダイレクトされる

基本的に固定ページ時の出力コードを使えば、表示はきちんとされます。

しかり各リンクを押しても指定ページに飛びません。。

2ページ目・3ページ目のリンクURLは本来、「page/2/」「page/3/」になるはずです。

しかし実際にはそのページへは飛ばず、強制的に元のページにリダイレクトしてしまうのですね。

このリダイレクトを解除する必要があります。

page.phpのページネーション

まずは基本となる、固定ページ（page.php）向けの改変コードを紹介します。

記事一覧ファイル（archive.php）や記事詳細ページ（single.php）でも基本的に同じコードがそのまま使えます。

今回は1ページに10記事を表示させる事にし、一覧の下にページネーションをつけます。

「WP_Query」を使った記事情報の取得

従来の記事出力コードがそのまま使える事もありますが、コード例をご紹介します。

出力コード

<?php $paged = get_query_var('paged')? get_query_var('paged') : 1; $the_query = new WP_Query( array( 'post_type' => 'post', 'paged' => $paged, 'post_status' => 'publish', 'posts_per_page' => 10, )); if ( $the_query ->have_posts() ) : ?> <!-- ループ --> <?php while ( $the_query -> have_posts() ) : $the_query -> the_post(); ?> <p> タイトルや日付・画像など、各出力HTMLソースが入ります。 </p> <?php endwhile; ?> <?php // サブクエリをリセット wp_reset_postdata(); ?>

各コードの紹介

どのテーマファイルでもきちんと取得表示できる様に、WP_Queryを使います。

$the_query = new WP_Query(…の部分

WP_Queryなら、固定ページ上でも投稿記事などの情報が取得できる訳です。

さらにarray配列を使って、様々な情報を取得しています。

'post_type' => 'post', 'paged' => $paged, 'post_status' => 'publish', 'posts_per_page' => 10,

表示中ページの現状認識

ポイントは、今のページが全体の何ページ目を表示しているか？という情報の認識です。

これが無いと、2ページ目に移動しても「2ページ目」に来ている認識がされないため、ページネーションがうまくできません。

その為に、冒頭1行目の記述があります。

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

これにより、今表示しているページが全体の何ページ目かを判断する事ができます。

ページネーション部分の表示

出力の記述が終わったら、指定箇所にページネーションの表示をするコードを入れていきます。

記事一覧の下部分に設置するのが普通です。

出力コード例

<?php if( function_exists('wp_pagenavi') ) { wp_pagenavi(array('query' => $the_query)); } ?> <?php endif;?>

上記を設置した位置に、ページリンクのHTMLソースが自動出力されます。

TOPページ用page.phpでの調整

TOPページを固定ページで表示している場合、専用のpage-○○○.phpを準備しているはずです。

他のサブページ（page.php）と差別化を図るためですね。

TOPページを固定ページに入れる方法については、以下の記事を参考にして下さい。

この専用page-○○○.phpにも、先程と全く同じ出力コードを入れて構いません。

ただし1か所だけ修正する部分があります。

ページ位置情報の取得部分を変える

変更するのは、先程紹介した「今のページが全体の何ページ目を表示しているか？」の部分です。

このコード部分の単語を1か所ずつ変更するだけです。

'paged'を'page'にしているだけ、末尾の「d」を消しているだけです。

変数である$pagedの部分は変更なしなので、気をつけましょうね。

これでTOPページでも、記事一覧およびページネーションが有効になります。

archive.phpのページネーション

今回紹介したコードは、そのままarchive.phpでも使えます。

archive.phpでページネーションが動かない場合は、先程入れたWP_Queryのコードに変更してみましょう。

その際注意するのは、1ページ当たりの出力数をそれぞれ揃える事です。

WP_Queryの設定数とWP-PageNavi内の設定数を揃える

1ページ当たりに表示する記事数は、arrayのところで10件に設定しています。

'posts_per_page' => 10,

この記事数とWordpress管理画面のWP-PageNavi設定欄の数値は。必ず揃えましょう。

WP-PageNavi内の「表示するページ数」の欄

例えばテーマファイル上で10、WP-PageNavi設定側で「表示するページ数」を30に設定していたとします。

この場合両方の命令がバッティングして、ページネーションが動きません。

どちらかを変更したら、もう一方の数値も同じ数値に変更するようにしましょう。

single.phpのページネーション

次は記事の詳細ページ（single.php）に対してです。

single.phpでは、「次の記事」や「前の記事」のリンクが簡単に出せます。

次の記事・前の記事のリンク表示

その場合は以下のコードを下に設置する事で、自動で表示されます。

記事のタイトルを出すコード

<?php previous_post_link(); ?>…前の記事タイトル <?php next_post_link(); ?>…次の記事タイトル

「前の記事へ」「次の記事へ」とリンクを出すコード

<?php previous_post_link('« %link', '前の記事へ'); ?> <?php next_post_link('%link »', '次の記事へ'); ?>

上記の様なリンクを出すだけなら問題は無いでしょう。

問題となるのは、詳細記事の下に別途、記事の一覧やページネーションをつける場合です。

single.phpに記事一覧・ページネーションをつける

記事の詳細の下に、改めて記事の一覧およびページネーションを表示する場合です。

詳細記事の出力終了後に、page.phpで使った出力コードを別途記述すれば基本はOKです。

ところが先述したように、リンクは表示されてもリダイレクトされて元のページへ強制的に戻ってしまいます。

リダイレクトされずに、page/2/やpage/3/へきちんと飛ばす必要があります。

専用テーマファイルの準備

実現するためには、別途専用の「投稿用ファイル」を使う必要があります。

例えば「single-pagenavi.php」という名前にしましょう。

テーマファイル冒頭のコメントを以下の様に設定します。

Template Name:とTemplate Post Type:

/** * Template Name: 一覧＆ページネーション用 * Template Post Type: post */

まず「Template Name」を宣言すると、固定ページ用のテンプレートになります。

さらに「Template Post Type: post」でファイルの投稿タイプを定義することができます。

今回は投稿記事なので「post」としています。

ファイルができたら、テーマフォルダにアップしておきます。

投稿記事のテンプレート選択を変える

次に一覧記事の表示に採用されるテンプレートファイルを、先程のファイルに変更していきます。

おそらく既に記事はあるはずなので、各記事を1件ずつ開きます。

記事編集の「投稿の属性」のところにテンプレート選択欄があるので、先程作った「一覧＆ページネーション用」を選択します。

リダイレクト防止設定

最後に、テーマのfunctions.phpにリダイレクトを抑える記述をします。

functions.php内コード追記

add_filter('redirect_canonical','kaiza_disable_redirect_canonical'); function kaiza_disable_redirect_canonical( $redirect_url ) { if ( is_page_template( 'single-pagenavi.php' ) ) $redirect_url = false; return $redirect_url; }

上記はテンプレート名（single-pagenavi.php）を指定してリダイレクトを解除しています。

これにより、次のページリンクである/page/2/や/page/3/へ飛んでくれるようになります。

CSSでデザインをカスタマイズする

最後に、ページネーションの表示部分のデザインをカスタマイズする方法を紹介します。

これは専用のCSSを編集する事で、自由に変更できます。

pagenavi-css.cssをカスタマイズ

管理画面WP-PageNaviの設定欄に「pagenavi-css.css を使用」という項目があります。

これを「はい」にした場合、専用cssを使って出力がされます。

ページネーションのデザインを変更する場合、このCSSファイルを編集すれば良いのです。

pagenavi-css.cssのある場所

WP-PageNaviプラグインフォルダ内にCSSファイルがありますので、これをFTPなどでダウンロードします。

WP-PageNaviプラグイン内のcssファイルをFTPで見た状態

CSSファイルを開いて、該当する部分を編集して上書きすれば、デザイン変更できます。

一押し人気コーナー紹介