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

長いエントリーをページ分割する方法とページネーションの実装(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_numbernumberページ番号を使用するか。
他には、’next’がある
separator(スペース)ページ番号の間のテキスト
nextpagelinkNext page
(JP:前のページへ:)
次のページへのリンクのテキスト
next_or_number が’next’の場合に有効
previouspagelinkPrevious page
(JP:次ページへ:)
前のページへのリンクのテキスト
next_or_number が’next’の場合に有効
pagelink%ページ番号のフォーマット
%は数字に置き換えられる
echo1(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()カスタム例1
<?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