WordPress個別サポート

多くのWordPressテーマではページナビゲーションが組み込まれているので基本的には「ページナビゲーションを組み込みたい!」で大騒ぎすることもありませんが、問題はブログの一覧表示を自作したときです。

固定ページの中でブログ記事などを一覧表示しようと思ってWP_Queryを使ってコードを作成したときに、後から「ページナビゲーションが付いていない」ということはよくあります。

そんなときはWP-PageNaviプラグインが役立ちます。たとえば、次のようなページナビゲーションを表示することができます。

WP-PageNaviによるページナビゲーション

WP-PageNaviによるページナビゲーション

ただし、WP_QueryとWP-PageNaviプラグインの連携方法を理解していないと、単純にプラグインの公式サイトで提示されたコードをテンプレートに入力してもページナビゲーションは表示されません。

ここでは、WP_Queryを使って自力で作成したデータ一覧のコードにページナビゲーションを組み込む方法を紹介します。

スポンサーリンク

ブログ記事を一覧表示するサンプル

すでにブログ記事の一覧表示までは作成済みの方を対象にしますが、これから試す方や、自作のコードではうまくいかないのでゼロから検証したい方のために、WP_Queryを使ってブログ記事を一覧表示するコードを掲載します。固定ページのテンプレート(例:page-test.php)などに組み込んでお使いください。

<?php
/* (ステップ1)データの取得 */
$query = new WP_Query(
    array(
        'posts_per_page' => 4,
        'post_type' => 'post',
    )
);
?>
<?php
/* (ステップ2)データの表示 */
if ( $query->have_posts() ) : ?>
    <ul>
        <?php while ( $query->have_posts() ) : $query->the_post();?>
            <li><a href="<?php the_permalink(); ?>">
                <?php the_title(); ?></a></li>
        <?php endwhile; ?>
    </ul>
<?php endif; wp_reset_postdata(); ?>

表示結果は次のようになります。単純にブログ記事のタイトルを一覧表示しているだけです。

ブログ記事のタイトル一覧

ブログ記事のタイトル一覧

プラグインのインストール

上記のコードにページナビゲーションを組み込むため、2つのプラグイン「WP-PageNavi」と「Wp Pagenavi Style」をインストールします。

WP-PageNaviプラグインはページナビゲーションの表示に使います。

WP-PageNaviプラグインをインストール

WP-PageNaviプラグインをインストール

Wp Pagenavi Styleプラグインはページナビゲーションのスタイルを設定できます。

Wp Pagenavi Styleプラグインをインストール

Wp Pagenavi Styleプラグインをインストール

ナビゲーションの組み込み

冒頭で紹介したコードにページナビゲーションを組み込みます。それには、上記のコードに以下のハイライトした部分を追加します。

<?php
/* (ステップ1)データの取得 */
$paged = get_query_var('paged', 1);
$query = new WP_Query(
    array(
        'paged' => $paged,
        'posts_per_page' => 4,
        'post_type' => 'post',
    )
);
?>
<?php
/* (ステップ2)データの表示 */
if ( $query->have_posts() ) : ?>
    <ul>
        <?php while ( $query->have_posts() ) : $query->the_post();?>
            <li><a href="<?php the_permalink(); ?>">
                <?php the_title(); ?></a></li>
        <?php endwhile; ?>
    </ul>
<?php wp_pagenavi(array('query' => $query)); ?>
<?php endif; wp_reset_postdata(); ?>
自作のコードに組み込むこともできます。3つのパーツの役割を理解して正しい場所に入力してください。

追加したパーツは次の3つです。

  • 3行目:現在のページ番号を取得 --- 何ページ目を表示するのか特定するのに必要です。get_query_varで取得しています。
  • 6行目:ページ番号をWP_Queryに反映 --- 表示するページの番号($paged)をWP_Queryに渡しています。
  • 21行目:ページナビゲーションの表示 --- wp_pagenaviによってページナビゲーションを表示しています。表示対象のデータ(ここでは、$query)を指定することが重要です。

これで、ページナビゲーションがが表示されるようになります。

ページナビゲーションが表示される

ページナビゲーションが表示される

ページナビゲーションのスタイル

スタイルは「PageNavi Style」メニューで選択することができます。

ページナビゲーションのスタイル選択

ページナビゲーションのスタイル選択

表示結果は次のようになります。

ページナビゲーションのスタイル変更例

ページナビゲーションのスタイル変更例

パターンを選ぶだけでなくフォントサイズや色などを細かくカスタマイズすることもできます。

ページナビゲーションのスタイルのカスタマイズ

ページナビゲーションのスタイルのカスタマイズ

ナビゲーションがうまく表示されないとき

対象データの指定を忘れずに

ページナビゲーションを表示する関数「wp_pagenavi」では基本的に、どのデータが対象なのか指定する必要があります(サンプルコードの21行目)。

つまり、
<?php wp_pagenavi(); ?>
ではうまくいかないはずです。

<?php wp_pagenavi(array('query' => $query)); ?>
のように、WP_Queryで取得したデータの格納先(ここでは「$query」)を指定する必要があります。

ページ番号の指定を忘れずに

次の処理を組み込んで、現在は何ページ目なのか指定する必要があります。

  • 現在のページ番号を取得する --- サンプルコードの3行目
  • そのページ番号のデータのみを取得する --- サンプルコードの6行目

たとえば、ページナビゲーションの「2」をクリックしたときは2ページ目の内容を表示します。そのため、現在のページ番号「2」を取得して、そのページのデータのみをWP_Queryで取得する必要があります。

うまくいかない場合、6行目の「get_query_var('paged', 1)」の「paged」を「page」に変更してみてください。

「データがなかったら」のブロックに入れないこと

データの一覧表示で「if~else~endif」というif文が使われている場合、「else~endif」の間にwp_pagenaviを追加してもうまくいきません。このブロックは「データがなかったら~する」の用途で使われているからです。

if文が長くなるとブロックの開始と終了が見づらくなりますが、次のようにwp_pagenaviが「else」と「endif」の間に入っていないか確認しましょう。

<?php
/* (ステップ2)データの表示 */
if ( $query->have_posts() ) : ?>
    <ul>
        <?php while ( $query->have_posts() ) : $query->the_post();?>
            <li><a href="<?php the_permalink(); ?>">
                <?php the_title(); ?></a></li>
        <?php endwhile; ?>
    </ul>
<?php else : ?>
<?php wp_pagenavi(array('query' => $query)); ?>
<?php endif; wp_reset_postdata(); ?>

まとめ

WP-PageNaviプラグインを使うと、このように簡単にページナビゲーションを表示することができます。自作のコードでも役立ちますが、WP_Queryと連携するには wp_pagenaviを呼び出すだけでは不十分です。「現在のページの特定」や「対象データの特定」というコードの意図を理解して、正しくページナビゲーションを表示できるようにしましょう。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート