サイト制作に関するメモ書き

HOME > CMS > WP-PageNaviを使ってみる

WP-PageNaviを使ってみる

2017.04.16

CMS

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

インストール

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

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

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

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

　

エラーが出る場合

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

使い方

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

PHP

1
2
3
if( function_exists('wp_pagenavi') ):
    wp_pagenavi();
endif;

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

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

HTML

1
2
3
4
5
6
7
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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

1
2
3
4
5
6
7
8
if( function_exists('wp_pagenavi') ):
    wp_pagenavi(array(
        'before' => '<div class="pager">',
        'after' => '</div>',
        'wrapper_tag' => 'span',
        'wrapper_class' => 'pager-inner'
    ));
endif;

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

HTML

1
2
3
4
5
6
7
8
9
<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

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

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

HTML

1
2
3
4
5
6
<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

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

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

HTML

1
2
3
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名を変更するために、以下のようなフィルタが用意されています。

wp_pagenavi_class_pages 数字のリンクに付与されるclassを指定。
wp_pagenavi_class_smaller 数字のリンクで、現在ページより小さい数字のリンクに付与されるclassを指定。
wp_pagenavi_class_larger 数字のリンクで、現在ページより大きい数字のリンクに付与されるclassを指定。
wp_pagenavi_class_previouspostslink 一つ前へのリンクに付与されるclassを指定。
wp_pagenavi_class_nextpostslink 一つ先へのリンクに付与されるclassを指定。
wp_pagenavi_class_first 先頭へのリンクに付与されるclassを指定。
wp_pagenavi_class_last 最後へのリンクに付与されるclassを指定。
wp_pagenavi_class_current 現在位置の数字に付与されるclassを指定。
wp_pagenavi_class_page 現在のページ数部分に付与されるclassを指定。
wp_pagenavi_class_extend 数字の省略部分に付与されるclassを指定。

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

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// 現在のページ数部分に付与される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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

　

【参考サイト】

　

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP