WordPressでのページャー(ページネーション)の作り方(WP-PageNavi)

この記事は約10分で読めます。

  • LINEで送る

WP-PageNaviの導入

WordPressでページャー(ページネーション・ページナビ)を導入する方法を説明します。
賢威でも、初期設定は「新しい記事へ・以前の記事へ」と表示されますが、
これをページナンバーで表示することで、より使いやすさ(ユーザビリティ)が向上します。

プラグインを利用する簡単導入バージョンとプラグインを使わず独自実装する
オリジナルカスタマイズバージョンがあります。今回は簡単導入バージョンです。
プラグインを利用しても、ある程度はデザインを変更できますので、
プログラムに自信のない人は、今回の記事を参考にしてください。

オリジナルカスタマイズバージョンは以下の記事をどうぞ。
WordPressでページナビ(ページネーション)をプラグインなしで表示する

WP-PageNaviを導入して簡単にページャーを実装

「WP-PageNavi」というプラグインを利用します。
PHPを修正する必要があるので、慎重に実施しましょう。

インストール

WP-PageNaviの導入

「プラグイン > 新規追加」から「WP-PageNavi」を検索します。
直接ダウンロードは以下のページから可能です。
WordPress › WP-PageNavi « WordPress Plugins

WP-PageNaviの導入

WP-PageNaviの導入

「WP-PageNavi」を今すぐインストールし、
インストール完了後にプラグインを有効化します。

これで、「WP-PageNavi」のインストールは完了です。

PHPの編集

WP-PageNaviの設定

次に、ページャーを表示するためにPHPを編集します。
「外観 > テーマ編集」から「functions.php」を選択します。
その中に、以下のようにページャーを表示している関数があるので探します。

//---------------------------------------------------------------------------
//	ページャーを表示する
//---------------------------------------------------------------------------
function pager_keni() {

	$pager = "";

	global $wp_query;
	$max_page = $wp_query->max_num_pages;
	$now_page = get_query_var('paged');
	if ($now_page == 0) {
		$now_page =1;
	}
	if ($max_page > $now_page) {
		$pager .= "<li class=\"nav-prev\">". get_next_posts_link('以前の記事へ') ."</li>\n";
	}

	if (is_paged()) {
		$pager .= "<li class=\"nav-next\">". get_previous_posts_link('新しい記事へ')."</li>\n";
	}

	if ($pager != "") {
		echo "<div class=\"cont-menu-wp\">\n<ul>\n".$pager."</ul>\n</div>\n";
	}
}

この部分を以下のように修正します。

  1. ハイライトしている6行をコメントアウト(先頭に「//」を付ける)
  2. 元々のページャー用の<div>を追加する
  3. 「WP-PageNavi」を出力する関数を追加する

すると、以下のようになります。
このままコピーして上書きすればOKです。

//---------------------------------------------------------------------------
//	ページャーを表示する
//---------------------------------------------------------------------------
function pager_keni() {

	$pager = "";

	global $wp_query;
	$max_page = $wp_query->max_num_pages;
	$now_page = get_query_var('paged');
	if ($now_page == 0) {
		$now_page =1;
	}
//	if ($max_page > $now_page) {
//		$pager .= "<li class=\"nav-prev\">". get_next_posts_link('以前の記事へ') ."</li>\n";
//	}

//	if (is_paged()) {
//		$pager .= "<li class=\"nav-next\">". get_previous_posts_link('新しい記事へ')."</li>\n";
//	}

//	if ($pager != "") {
//		echo "<div class=\"cont-menu-wp\">\n<ul>\n".$pager."</ul>\n</div>\n";
//	}
	echo "<div class=\"cont-menu-wp\">";
	wp_pagenavi();
	echo "</div>";

}

WP-PageNaviの設定

これでPHPを保存すると、このようにページャーが表示されます。
ただし、まだま表示がダサいのでカスタマイズしていきます。

表示設定

WP-PageNaviの設定

「設定 > PageNavi」を選択して、「PageNavi 設定」を表示します。

WP-PageNaviの設定

ここで、表示する細かな設定をします。
それぞれ説明しますが、どのように表示されるかは試してみてください。
個人的に、ここはこだわりが無い限り変更不要かなと思います。

  • 総ページ数用テキスト:左に表示される総ページ数の文字。「Page %CURRENT_PAGE% of %TOTAL_PAGES%」などに変更する
  • 現在のページ用テキスト:現在のページ数を示す
  • ページ用テキスト:他の表示しているページ数を示す
  • 最初のページ用テキスト:最初のページへ戻るリンクの文字。「最初へ」などに変更する
  • 最後のページ用テキスト:最後のページへ進むリンクの文字。「最後へ」などに変更する
  • 前のページ用テキスト:前のページへ戻るリンクの文字
  • 次のページ用テキスト:次のページへ進むリンクの文字
  • 「前へ…」用テキスト:前に表示されていないページが有る場合の省略記号文字
  • 「次へ…」用テキスト:後に表示されていないページが有る場合の省略記号文字
  • pagenavi-css.css を使用:初期のCSSを使用する
  • Page Navigation スタイル:横並びのリンク(通常)かドロップダウンを選択
  • 常にページナビゲーションを表示:ページが他になくてもナビを表示するかを選択
  • 表示するページ数:何ページ以上存在すると省略するかを入力
  • 省略表示するページ数:省略したページを何ページ表示するか入力
  • 省略ページを以下の倍数で表示:省略したページを何ページごとに表示するか入力

WP PageNavi Styleを導入してさらにデザインカスタマイズ

WP-PageNaviの設定

次に、「WP-PageNavi」専用のデザインプラグイン
「WP PageNavi Style」を導入して、見た目を変更します。

インストール

WP-PageNaviの設定

「プラグイン > 新規追加」から「WP PageNavi Style」を検索します。
直接ダウンロードは以下のページから可能です。
WordPress › WP PageNavi Style « WordPress Plugins

WP-PageNaviの設定

WP-PageNaviの設定

「WP PageNavi Style」を今すぐインストールし、
インストール完了後にプラグインを有効化します。

これで、「WP PageNavi Style」のインストールは完了です。

デザインの変更

WP-PageNaviの設定

メニューに「PageNavi Style」が追加されるので、クリックして「WP PageNavi Style Options」を開きます。

WP-PageNaviの設定

Previewを確認しながらデザインを変更できるので、好きなデザインを選択します。

WP-PageNaviの設定

「Select StyleSheet」で「Custom」を選ぶと、好きな色や文字サイズを指定できます。
用意されているスタイルで合うものがない場合は、こちらを試してください。

「Save Setting」をクリックするとブログに反映されます。

賢威でのページャーカスタマイズ注意点

最後に、賢威で「WP-PageNavi」を使用する場合の注意点を説明します。

スタイルシートで微調整する

賢威でこれまで説明したとおりに設定すると、HTMLは以下のように出力されます。

<div class="cont-menu-wp"><div class='wp-pagenavi'>
 :
</div></div>
</div>

この時、1番外側の「<div class=”cont-menu-wp”>」は賢威のスタイルシートに記述されているので、
以下の2つを追加します。

  • ページャー下の隙間
  • レスポンシブルデザイン用の折り返し

WP-PageNaviの設定

WP-PageNaviの設定

「外観 > テーマ編集」の「design.css」で修正できます。

/*●ページネーション WP用*/
#main-contents .cont-menu-wp{
	position: relative;
	overflow: hidden;
	width: 100%;
	/zoom : 1;
}

このようなスタイルになっているので、「ページャーナビ下の隙間」と
「レスポンシブルデザイン対応の折り返し」を追加してください。

以下のようにmarginとページャーのインライン化を追加すればOKです。

/*●ページネーション WP用*/
#main-contents .cont-menu-wp{
	position: relative;
	overflow: hidden;
	width: 100%;
	/zoom : 1;
	margin-bottom: 1.5em;
}

/*●ページネーション レスポンシブルデザイン用*/
#main-contents .cont-menu-wp a,
#main-contents .cont-menu-wp span {
	display: inline-block;
	margin-bottom: 0.5em;
}

「pager_keni();」を「wp_pagenavi();」に書き換えない

賢威ではページャーを「pager_keni();」関数で表示します。
以下のPHPで呼び出しています。

  • index.php:メインインデックスのテンプレート
  • archive.php:アーカイブ
  • page.php:固定ページテンプレート
  • single.php:単一記事の投稿

この4PHPの「pager_keni();」を「wp_pagenavi();」に書き換えても、
ページャーは表示できます。PC上は…

WP-PageNaviの設定

しかし、レスポンシブルデザインをONにしてスマホで確認すると、
サブコンテンツと丸かぶりしてしまい、デザインが崩れます。

よって、「pager_keni();」を「wp_pagenavi();」に直接書き換える修正はやめて、
上で説明したとおり、「functions.php」内を書き換えるようにしてください。

全く何を言っているのかわからない場合は気にしないでください。
これまで説明したとおりに修正していけば、ページャーが綺麗に表示されます。

  • LINEで送る

“WordPressでのページャー(ページネーション)の作り方(WP-PageNavi)” への2件のフィードバック

  1. […] このカスタマイズについては『賢威カスタマイズ研究所』のこちらの記事を参考にさせていただきました。 […]

  2. […] 今回の記事も、『賢威カスタマイズ研究所』さんのこちらの記事を参考にさせていただきました。ありがとうございます。 […]

コメントを残す

このページの先頭へ