テーマ作り

2019.07.28 まろん

長いエントリーをページ分割する方法とページネーションの実装（wp_link_pages）

今まであまり使われていなかったwp_link_pages() 関数は、長いエントリーをページ分割できます。
ブロックエディターの登場で、使う機会も増えてきてる印象です。

説明

機能

長いエントリーをページ分割することができます。
これがないと、テーマチェックプラグインでエラーになります。

使い方

ブロックエディターの場合、レイアウト要素＞改ページ
クラシックエディターの場合、<!–nextpage–>
テーマ作成時には、the_content()とセットで書きます。

<section class="entry-content">
	<?php the_content(); ?>
	<?php wp_link_pages(); ?>
</section>

仕様

<?php wp_link_pages( $args ); ?>

パラメータ	初期値	説明
before	<p class=”post-nav-links”>Pages: （JP:ページ:）	リンクの前のテキスト
after	</p>	リンクの後のテキスト
link_before	（空）	リンクテキストの前のテキスト
link_after	（空）	リンクテキストの後のテキスト
next_or_number	number	ページ番号を使用するか。他には、’next’がある
separator	（スペース）	ページ番号の間のテキスト
nextpagelink	Next page （JP:前のページへ:）	次のページへのリンクのテキスト next_or_number が’next’の場合に有効
previouspagelink	Previous page （JP:次ページへ:）	前のページへのリンクのテキスト next_or_number が’next’の場合に有効
pagelink	%	ページ番号のフォーマット %は数字に置き換えられる
echo	1(true)	HTML 出力する（true）か、変数として返す（false）か

※表示は利用言語によって異なる。日本語は（JP:）の文字列

初期値

<?php
	wp_link_pages( array(
		'before'           => '<p class="post-nav-links">' . __( 'Pages:', 'textdomain' ),
		'after'            => '</p>',
		'link_before'      => '',
		'link_after'       => '',
		'next_or_number'   => 'number',
		'separator'        => ' ',
		'nextpagelink'     => __( 'Next page', 'textdomain' ),
		'previouspagelink' => __( 'Previous page', 'textdomain' ),
		'pagelink'         => '%',
		'echo'             => 1,
	) );
?>

標準のコードと出力されるHTML

wp_link_pages()デフォルトの表示

<?php wp_link_pages(); ?>

<p class="post-nav-links">
	ページ:
	<a href="https://example.com/category_name/slug_name/" class="post-page-numbers">1</a>
	<span class="post-page-numbers current" aria-current="page">2</span>
	<a href="https://example.com/category_name/slug_name/3/" class="post-page-numbers">3</a>
</p>

next_or_numberがnextの場合

wp_link_pages()前後ページ仕様

<?php wp_link_pages( 'next_or_number=next' ); ?>

<p class="post-nav-links">
	ページ:
	<a href="https://example.com/category_name/slug_name/" class="post-page-numbers">前のページへ</a>
	<a href="https://example.com/category_name/slug_name/3/" class="post-page-numbers">次ページへ</a>
</p>

装飾用CSSクラス

.post-nav-links {}
.post-nav-links .post-page-numbers {}
.post-nav-links .post-page-numbers:hover {}
.post-nav-links .post-page-numbers.current {}

カスタム例と出力内容

※翻訳関数は省略しています・・・

サンプルで使っているCSS

.post-nav-links {
	margin-bottom: 56px;
	padding: 2px 16px;
	background: #efefef;
}
.post-nav-links .post-page-numbers {
	display: inline-block;
	padding: 4px;
}

文字を太字して、それぞれの数字にspanをつける。

wp_link_pages()カスタム例１

<?php
	wp_link_pages( array(
		'before'           => '<p class="post-nav-links"><strong>ページ：</strong>',
		'after'            => '</p>',
		'link_before'      => '<span class="number">',
		'link_after'       => '</span>'
	) );
?>

<p class="post-nav-links">
	<strong>ページ：</strong>
	<a href="https://example.com/category_name/slug_name/" class="post-page-numbers"><span class="number">1</span></a>
	<span class="post-page-numbers current" aria-current="page"><span class="number">2</span></span>
	<a href="https://example.com/category_name/slug_name/3/" class="post-page-numbers"><span class="number">3</span></a>
</p>

DIVで囲う / 区切り文字を|にする / ページ+数字にする

wp_link_pages()カスタム例2

‘ | ‘と前後に半角スペースでもいいですが、separatorにクラスをつけると、CSSで余白の調整がしやすくなります。

<?php
	wp_link_pages( array(
		'before'           => '<div class="post-nav-links">',
		'after'            => '</div>',
		'separator'        => '<span class="separator">|</span>',
		'pagelink'         => 'ページ %',
	) );
?>

<div class="post-nav-links">
	<a href="https://example.com/category_name/slug_name/" class="post-page-numbers">ページ 1</a>
	<span class="separator">|</span>
	<span class="post-page-numbers current" aria-current="page">ページ 2</span>
	<span class="separator">|</span>
	<a href="https://example.com/category_name/slug_name/3/" class="post-page-numbers">ページ 3</a>
</div>

Codex

wp_link_pages()