ホーム
＞ WordPress
＞ WordPressでnextpageを使って分割した記事のページネーションのカスタマイズ法

WordPress

2016.12.24. 2019.04.09.

WordPressでnextpageを使って分割した記事のページネーションのカスタマイズ法

WordPressでは一つの記事を途中で分割して複数に分ける機能があり、分割した記事の下に表示するページネーションにはwp_link_pages()タグを使うのが普通というか楽ちんです。

ところがこのwp_link_pages()はアーカイブの分割ページでつかうpaginate_links()とちがって前へ・次へリンクが表示されません。下図のようにシンプルに数字だけのページネーションになってしまいます。

pagenation

まぁ、あってもなくても困らないと思うのですが、「前へ次へリンクがどうしても欲しい」という方がいたのでやり方を考えてみました。最終的に欲しいのはこんな感じのページネーションです。

pagenation-2

かなりゴージャスな仕上がりですね。では行ってみましょう。

paginate_links()を使う

最初に書いた通り記事の分割ではwp_link_pages()を使うのが基本です。しかし、前へ次へリンクは表示されないので自作する必要があります。

考え方としては現在のページが何ページ目かを取得して前後のページへのリンクを作り、表示させればれよさそうです。そんなに面倒な作業でもなさそうだったのですが、paginate_link()を使うと何もしなくても前へ次へリンクを表示してくれます。これが使えたたら便利そうですよね。実際、codexをみても

アーカイブされた投稿ページのページ番号付きのリンクを取得します。この関数は（技術的には）任意のページへ飛ぶためのページ番号付きリンクを生成できます。

と書いてあるのでパラメータを適切にできれば記事分割にも対応できそうな気がしますね。
というか実際にできました。まずはそのコードがこちら。

function page_nav_singular(){
global $pages, $page, $numpages;
// ページ分割されていなければ処理を抜ける
if( $numpages == 1 )
return;

// 現在何ページ目かを取得
$paged = (get_query_var('page')) ? get_query_var('page') : 1;

// パーマリンクがデフォルトかどうか調べる。それによってformatを返る必要がある
if ( get_option('permalink_structure') == '' ) {
$format = '&page=%#%';
}else{
$format = '/%#%/';
}

// paginate_linksでつかうパラメータを設定
$arg = array(
'base' => rtrim(get_permalink(),'/').'%_%',
'format' =>$format,
'total' => $numpages,
'current' => $paged,
'show_all' => true,
);

//最初と最後の記事では前後の記事へのリンクの片方が表示されないが、それを表示させるための処理
$prev_tag = '';
$next_tag = '';
if( $paged == 1 ){
$prev_tag = '<span class="disable_nav page-numbers">≪ 前へ</span>'.PHP_EOL;
}
if( $paged == $numpages ){
$next_tag = PHP_EOL.'<span class="disable_nav page-numbers">次へ »</span>';
}
?>

<div class="tablenav_singular">
<?php echo $prev_tag.paginate_links( $arg ).$next_tag; ?>

<div class="tablenav_counter"><?php echo $paged ?><span> / <?php echo $numpages;?> ページ</span></div>

</div>

<?php
}

CSSはこんな感じ

[css]
[/css]

コードの解説

paginate_linksの動作について

ページネーションのリンクを取得する仕組みですが、まず’base’で分割されたページのURLのひな形を決め、ページ毎に変わる部分を%_%と書いておき、
その中身の構造をformatで指定します。あとはページの分割数（total）と現在何ページ目か（current）という情報を使って各ページのリンクを作っていきます。
他のパラメータは主に外観に関するもので、正しいリンクを出力できるかどうかのキモはこの4つのパラメーターで決まります。

分割された記事のパーマリンク

‘base’と’format’を決めるには分割された記事がどんなURLになるかを調べる必要があります。
1種類だけなら楽なのですがパーマリンクの指定の仕方によって次の3パターンになります。

デフォルトのパーマリンクの例

1ページ目　http://example.com/?p=123
2ページ目　http://example.com/?p=123&page=2

1ページ目のURL末尾に/がつかない（数字ベースなど）

1ページ目　http://example.com/123
2ページ目　http://example.com/123/2/

1ページ目のURL末尾に/がつく（投稿名ベースなど）

1ページ目　http://example.com/sample-post/
2ページ目　http://example.com/sample-post/2/

どうやらデフォルト以外はURLの末尾に「/ページ番号/」が追加されるようです。デフォルトの場合は「&page=ページ番号」ですね。ここがいわゆるformatに相当します。

デフォルトか否かでかなり構造が変わってくるので、そこで処理を分けます。それが10行目から。
get_option(permalink_structure)で現在のパーマリンク構造を取得できるのでこれが空白ならデフォルトと判断します。
%#%の部分にページ番号が入るので、あとはその前後に必要な文字を加えています。

baseの方は「1ページ目のパーマリンク＋format」という構造としたいところですが、URLの最後に/が入る場合と入らない場合があります。
ここでは全て/無しに統一するためにrtrim関数を使って一番末尾の/を取り除いています（19行目）

ちなみに1ページ目のパーマリンクは、何ページ目を表示していてもget_permalink()で取得できます。逆にページ毎に自動でかわってくれるならめんどくさい処理は不要なんですけどね･･･

その他の処理

全ページ数は$numpagesというグローバル変数に入っておりそのまま使えますし、現在のページが何ページ目かはget_query_var(‘page’）で取得できます。
あとは見た目をどうするかを決めてパラメータ指定すればOKです。

ただ、pagenate_link()は1ページ目のときに「前へ」、最終ページのときに「次へ」が表示されません。
必要ないといえばないのですが見た目としては表示されていたほうがバランスがよいように感じます。そこで1ページと最終ページの時だけダミーの前へ・次へボタンを表示させています。