wordpressで最も簡単にページネーションを実装する方法

WEB制作, wordpress

wordpressでサイト制作した時に、ページネーションなどの実装をする時によく【ページネーションが正常に動作しない】って話しを聞きます。
テーマのfunctions.phpに書かれている関数を使っていたり、plugin等を使っていたりと、色々と環境は違うのでしょうが、今回はあまり環境に依存せずに簡単にページネーションを実装できる方法のご紹介です。

スポンサーリンク

ページネーション実装コード

ページネーションを実装したいファイルに以下を記述する。
※ループ外に記載する

<div class="pagination">
	<?php
	global $wp_query;
	$big = 999999999;
	echo paginate_links( array(
		'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
		'format' => '?paged=%#%',
		'current' => max( 1, get_query_var('paged') ),
		'total' => $wp_query->max_num_pages
	) );
	?>
</div>

たったこれだけの記述で、ページネーションを実装できます。

出力されるHTMLはこんな感じ。

<div class="pagination">
	<span class="page-numbers current">1</span>
	<a class="page-numbers" href="http://wordpress/page/2/">2</a>
	<a class="page-numbers" href="http://wordpress/page/3/">3</a>
	<span class="page-numbers dots">…</span>
	<a class="page-numbers" href="http://wordpress/page/54/">54</a>
	<a class="next page-numbers" href="http://wordpress/page/2/">次へ »</a>
</div>

自由な形式で出力する

ページネーションを自由にデザインしたい時に、HTML構造も変えて出力したい場合の方法。

function wp_pagination() {
	global $wp_query;
	$big = 99999999;
	$page_format = paginate_links( array(
		'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
		'format' => '?paged=%#%',
		'current' => max( 1, get_query_var('paged') ),
		'total' => $wp_query->max_num_pages,
		'type'  => 'array'
	) );
	if( is_array($page_format) ) {
		$paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
		echo '<div><ul>';
		echo '<li><span>'. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>';
		foreach ( $page_format as $page ) {
    		echo "<li>$page</li>";
		}
			echo '</ul></div>';
	}
	wp_reset_query();
}
?>
<div class="pagination"><?php wp_pagination(); ?></div>

そのまま直で書いてもいいですが、wp_paginationの関数部分だけ、functions.phpに移しても問題ありません。

出力されるHTMLはこんな感じ。

<div class="pagination">
	<div>
		<ul>
			<li><span>1 of 54</span></li>
			<li><span class="page-numbers current">1</span></li>
			<li><a class="page-numbers" href="http://wordpress/page/2/">2</a></li>
			<li><a class="page-numbers" href="http://wordpress/page/3/">3</a></li>
			<li><span class="page-numbers dots">…</span></li><li><a class="page-numbers" href="http://wordpress/page/54/">54</a></li>
			<li><a class="next page-numbers" href="http://wordpress/page/2/">次へ »</a></li>
		</ul>
	</div>
</div>

echo の部分を任意のHTMLに書き換えればOK。

他にもパラメータを変えてあげればいろいろな形で出力することが出来ます。
例えば、【前へ、次へ】の文言を変えたいときは、’prev_next’のパラメータを設定して、’prev_text’、’next_text’で指定してあげれば出来ます。

$page_format = paginate_links( array(
		'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
		'format' => '?paged=%#%',
		'current' => max( 1, get_query_var('paged') ),
		'total' => $wp_query->max_num_pages,
		'prev_next'    => True,
		'prev_text'    => __('« 前のページ'),
		'next_text'    => __('次のページ »'),
		'type'  => 'array'
	) );

パラメータ一覧表

配列で指定するパラメータの早見表です。

関数リファレンス/paginate links – WordPress Codex 日本語版より引用

パラメータ デフォルト値 概要
base %_% URLを参照し、ページ番号付きのリンクを生成するために使われます。’format’ という引数 (下記参照)によって置き換えられます。
format ?page=%#% ページネーションの構造を指定するのに使います。 初期値は’?page=%#%’で、プリティパーマリンク(「?」などの記号を含まないURL)を使いたい場合は、’/page/%#%’のように書けば、’%#%’の部分がページ番号に置き換わります。
total 1 全体のページ数
current 0 現在のページ番号
show_all False Trueの場合、現在ページ付近のページ番号の短いリストではなくすべてのページ番号が表示されます。初期値では’show_all’はfalseになっていますので、’end_size’と’mid_size’の引数でコントロールします。
end_size 1 ページ番号のリストの両端(最初と最後)にいくつの数字を表示するか。
mid_size 2 現在のページの両側にいくつの数字を表示するか。ただし現在のページは含みません。
prev_next True リストの中に「前へ」「次へ」のリンクを含むかどうか。
prev_text __(‘« Previous’) 前のページへ送る時のリンクの文言。’prev_next’ という引数を正しく設定しなければ動きません。
next_text __(‘Next »’) 次のページへ送る時のリンクの文言。’prev_next’という引数を正しく設定しなければ動きません。
type plain 戻り値をコントロールします。可能な値は
‘plain’ – 改行文字によって区切られたリンクの文字列を返します。
‘array’ – 表示を完全にコントロールできるようにページ送りのリンクを配列に入れて返します。
‘list’ – ulのHTMLのリストを返します。
add_args False 追加のクエリ引数の配列。
add_fragment それぞれのリンクに付け加える文字列。

この記事が気に入ったら
『いいね』しよう!