プラグインWP Page Numbersでページナビゲーションを設置する

WordPressでページ送りをするプラグイン「WP Page Numbers」の使い方を解説します。
ページナビゲーションのプラグインとしては、WP-PageNaviが有名ですが、WP Page Numbersも簡単な設定でページネーション機能を実現できます。

WP Page Numbersでページナビゲーションを設置するには、テーマファイル内にコードを1行追加するだけです。

ナビゲーションデザインテーマはデフォルトで5つ用意されていますが、デフォルトテーマをコピーし、自分独自のデザインを作成することも可能です。

なお、投稿データを取得する際には、get_postsではなくquery_postsを使ってください。

【コンテンツ】

  1. WP Page Numbersのインストールと有効化
  2. WP Page Numbersの設定
  3. テーマファイルへコードを追加する
  4. テーマをカスタマイズする
  5. うまく動作しない時の対処法

【記事執筆時の環境】
WordPress 3.8.2
WP Page Numbers 0.5

WP Page Numbersのインストールと有効化

プラグインのインストール画面で、「WP Page Numbers」で検索してプラグインをインストールします。

プラグインを有効化すると、[設定]メニューに、[Page Numbers]が表示されます。

Page Numbersメニュー

WP Page Numbersの設定

メニューの[設定]-[Page Numbers]を選択します。

Page Number Themes

適用するテーマを5つあるうちから選択します。
これらのテーマはカスタマイズできますが、やり方は後で説明します。

テーマの選択画面

Settings - Text

ここに設定することで、表示する文字を変更できます。
どの部分が変更されるかは、上の[Page Number Themes]に表示されているデザインを見てください。

テキスト設定画面

Settings - show / hide

ここでは、ページナビゲーションに表示する要素を選択します。
デフォルトではすべてにチェックが入っていますが、そのままでも構わないでしょう。

表示要素の設定画面

Settings - Misc

ここでは、何ページまで表示するか設定します。

最大ページ番号の設定画面

デフォルトでは10ページまでになっていますので、下記のように1~10までのページ番号と最終ページ番号が表示されます。

デフォルトでのページ番号表示

15を設定すると、下記のようになります。

15を設定した場合の表示

ここまでの設定を終えたら、[Update Settings]ボタンをクリックして設定を保存します。

テーマファイルへコードを追加する

テーマファイル内にある、「前の記事へ」「次の記事へ」などのリンクを出力しているテンプレートタグを探します。
テーマによって使っているテンプレートタグは異なりますが、「next_posts_link」「get_next_posts_link」などを探します。
その部分を以下のコードで置き換えます。

もし、テーマファイル内に上記のようなテンプレートタグがない場合は、
WordPressループ内のendwhile;とendif;の間に以下のコードを挿入します。

【補足】
ページナビゲーションはul/liのリストで出力されます。
リストはデフォルトで、<div id=”wp_page_numbers”></div>でラップされます。

ラップするタグを変えたい場合は、以下のように開始タグと終了タグを指定してファンクションを呼び出します。

テーマをカスタマイズする

「wp-content\plugins\wp-page-numbers」の中にある、5つのいずれかのテーマフォルダを同じ場所にコピーして、フォルダ名をリネームします。

テーマフォルダ

リネームして作成したフォルダの中にあるCSSファイル「wp-page-numbers.css」を編集します。

Page Number Themesの設定画面で、作成したフォルダ名を入力します。

フォルダ名の入力画面 width=

[Update Settings]ボタンをクリックして設定を保存します。

うまく動作しない時の対処法

2ページ目以降が正しく表示されないなど、ページナビゲーションのプラグインが動作しない場合は、以下の確認と対策をとってみてください。

query_postsのpagedパラメータ指定

query_postsを使う時、以下のようにpagedパラメータを指定してください。

カスタム投稿タイプ名と固定ページスラッグが同じでないか

カスタム投稿タイプのページングを固定ページで行う場合、カスタム投稿タイプ名と固定ページスラッグが同じだとページナビゲーションは動作しません。

どちらかの名前を変えるか、カスタム投稿タイプのカスタムリライトスラッグを設定してみてください。

あるいは、カスタム投稿タイプの一覧を表示するページを、固定ページでなくアーカイブページにできないか検討してください。
archive-[カスタム投稿タイプ名].phpがアーカイブページとなります。
このようにすると、「アーカイブページ→個別記事ページ」とパーマリンク構造も階層的にすることができます。

表示設定の[1ページに表示する最大投稿数]を1件にする

表示する最大投稿数をquery_postsで指定している場合、表示設定での最大投稿数の設定値がそれより大きいと不具合が起こるようです。
従って、表示設定のほうの値を1にしておきます。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ