WP-PageNaviを使ってみる

WordPressでページネーションを簡単に設置できるプラグイン「WP-PageNavi」を使ってみます。

インストール

プラグイン > 新規追加 を選択して、右上の検索ボックスで「WP-PageNavi」と検索します。
一覧に表示されるので、今すぐインストールをクリックします。

インストール後、有効化をクリックします。

設定 > PageNavi からページネーション内のテキストや表示数の設定などを変更できます。

プラグイン側で用意されているCSSを適用したくない場合、「pagenavi-css.css を使用」の項目をいいえにします。

エラーが出る場合

readme.txtに記載がありましたが、「Parse error: syntax error, unexpected…」のようなエラーが表示される場合、PHPのバージョンが古い可能性があります。
PHP 5以上でないと正常に動作しないようです。
　

使い方

ページネーションを表示したい部分で以下を記述します。

PHP

if( function_exists('wp_pagenavi') ):
	wp_pagenavi();
endif;

if文はプラグインが有効化されていない場合にエラーが出ないようにしています。

設定を変更していない場合、以下のような形で出力されます。
(見やすいように改行を入れています。)

HTML

<div class='wp-pagenavi'>
<span class='pages'>1 / 3</span>
<span class='current'>1</span>
<a class="page larger" href="http://XXXXX/page/2/">2</a>
<a class="page larger" href="http://XXXXX/page/3/">3</a>
<a class="nextpostslink" rel="next" href="http://XXXXX/page/2/">&raquo;</a>
</div>

引数の設定

wp_pagenavi()の引数として、以下のような値を指定できます。

PHP

wp_pagenavi(array(
	'before' => '', // ページネーションの前に含める文字列やタグ
	'after' => '', // ページネーションの後に含める文字列やタグ
	'wrapper_tag' => 'div', // ラッパー(デフォルトだと.wp-pagenaviのところ)で使用するタグ
	'wrapper_class' => 'wp-pagenavi', // ラッパーのクラス名
	'options' => array( // 管理画面で設定したオプションの上書き
		'pages_text' => "%CURRENT_PAGE% / %TOTAL_PAGES%",
		'current_text' => "%PAGE_NUMBER%",
		'page_text' => "%PAGE_NUMBER%",
		'first_text' => "« 先頭",
		'last_text' => "最後 »",
		'prev_text' => "«",
		'next_text' => "»",
		'dotleft_text' => "...",
		'dotright_text' => "...",
		'num_pages' => 5,
		'num_larger_page_numbers' => 3,
		'larger_page_numbers_multiple' => 10,
		'always_show' => 0,
		'use_pagenavi_css' => 1,
		'style' => 1
	),
	'query' => $GLOBALS['wp_query'], // クエリの指定
	'type' => 'posts', // multipart, users など
	'echo' => true // 出力するかどうか
));

タグのclass名などを一部変更してみます。

PHP

if( function_exists('wp_pagenavi') ):
	wp_pagenavi(array(
		'before' => '<div class="pager">',
		'after' => '</div>',
		'wrapper_tag' => 'span',
		'wrapper_class' => 'pager-inner'
	));
endif;

以下のような形で出力されました。

HTML

<div class="pager">
<span class='pager-inner'>
<span class='pages'>1 / 3</span>
<span class='current'>1</span>
<a class="page larger" href="http://XXXXX/page/2/">2</a>
<a class="page larger" href="http://XXXXX/page/3/">3</a>
<a class="nextpostslink" rel="next" href="http://XXXXX/page/2/">»</a>
</span>
</div>

オプションの上書きを行ってみます。

PHP

if( function_exists('wp_pagenavi') ):
	wp_pagenavi(array(
		'options' => array( // 管理画面で設定したオプションの上書き
			'pages_text' => "",
			'prev_text' => "ひとつまえ",
			'next_text' => "ひとつあと"
		)
	));
endif;

以下のような形で出力されました。

HTML

<div class='wp-pagenavi'>
<span class='current'>1</span>
<a class="page larger" href="http://XXXXX/page/2/">2</a>
<a class="page larger" href="http://XXXXX/page/3/">3</a>
<a class="nextpostslink" rel="next" href="http://XXXXX/page/2/">ひとつあと</a>
</div>

ページネーションを出力せずに、タグを取得してからvar_dump()で出力してみます。

PHP

if( function_exists('wp_pagenavi') ):
	$pager = wp_pagenavi(array(
		'echo' => true // 出力するかどうか
	));
	var_dump($pager);
endif;

以下のような形で出力されました。

HTML

string(278) "<div class='wp-pagenavi'>
<span class='pages'>1 / 3</span><span class='current'>1</span><a class="page larger" href="http://XXXXX/page/2/">2</a><a class="page larger" href="http://XXXXX/page/3/">3</a><a class="nextpostslink" rel="next" href="http://XXXXX/page/2/">»</a>
</div>"

フィルター

ページナビゲーション要素のclass名を変更するために、以下のようなフィルタが用意されています。

functions.phpに以下のように記述してみます。

functions.php

// 現在のページ数部分に付与されるclass
function wp_pagenavi_class_pages_func( $class_name ) {
	return 'custom-pages';
}
add_filter('wp_pagenavi_class_pages', 'wp_pagenavi_class_pages_func');

// 数字のリンクで、現在ページより小さい数字のリンクに付与されるclass
function wp_pagenavi_class_smaller_func( $class_name ) {
	return 'custom-smaller';
}
add_filter('wp_pagenavi_class_smaller', 'wp_pagenavi_class_smaller_func');

// 数字のリンクで、現在ページより大きい数字のリンクに付与されるclass
function wp_pagenavi_class_larger_func( $class_name ) {
	return 'custom-larger';
}
add_filter('wp_pagenavi_class_larger', 'wp_pagenavi_class_larger_func');

// 一つ前へのリンクに付与されるclass
function wp_pagenavi_class_previouspostslink_func( $class_name ) {
	return 'custom-previouspostslink';
}
add_filter('wp_pagenavi_class_previouspostslink', 'wp_pagenavi_class_previouspostslink_func');

// 一つ先へのリンクに付与されるclass
function wp_pagenavi_class_nextpostslink_func( $class_name ) {
	return 'custom-nextpostslink';
}
add_filter('wp_pagenavi_class_nextpostslink', 'wp_pagenavi_class_nextpostslink_func');

// 先頭へのリンクに付与されるclass
function wp_pagenavi_class_first_func( $class_name ) {
	return 'custom-first';
}
add_filter('wp_pagenavi_class_first', 'wp_pagenavi_class_first_func');

// 最後へのリンクに付与されるclass
function wp_pagenavi_class_last_func( $class_name ) {
	return 'custom-last';
}
add_filter('wp_pagenavi_class_last', 'wp_pagenavi_class_last_func');

// 現在位置の数字に付与されるclass
function wp_pagenavi_class_current_func( $class_name ) {
	return 'custom-current';
}
add_filter('wp_pagenavi_class_current', 'wp_pagenavi_class_current_func');

// 数字のリンクに付与されるclass
function wp_pagenavi_class_page_func( $class_name ) {
	return 'custom-page';
}
add_filter('wp_pagenavi_class_page', 'wp_pagenavi_class_page_func');

// 数字の省略部分に付与されるclass
function wp_pagenavi_class_extend_func( $class_name ) {
	return 'custom-extend';
}
add_filter('wp_pagenavi_class_extend', 'wp_pagenavi_class_extend_func');

以下のように、class名を変更することができました。

HTML

<div class='wp-pagenavi'>
<span class='custom-pages'>4 / 8</span>
<a class="custom-first" href="http://XXXXX/">« 先頭</a>
<a class="custom-previouspostslink" rel="prev" href="http://XXXXX/page/3/">«</a>
<span class='custom-extend'>...</span>
<a class="custom-page custom-smaller" href="http://XXXXX/page/2/">2</a>
<a class="custom-page custom-smaller" href="http://XXXXX/page/3/">3</a>
<span class='custom-current'>4</span>
<a class="custom-page custom-larger" href="http://XXXXX/page/5/">5</a>
<a class="custom-page custom-larger" href="http://XXXXX/page/6/">6</a>
<span class='custom-extend'>...</span>
<a class="custom-nextpostslink" rel="next" href="http://XXXXX/page/5/">»</a>
<a class="custom-last" href="http://XXXXX/page/8/">最後 »</a>
</div>

【参考サイト】

• WP-PageNavi – WordPressプラグイン – ページナビゲーションを作成 – WordPressの使い方と設定 – Webkaru
• WP-PageNaviプラグインによるページネーションのスタイル（リスト or ドロップダウン）をテンプレートごとに変更する方法 | Web制作の現場から