今まであまり使われていなかった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

<?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の場合

<?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をつける。

<?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で囲う / 区切り文字を|にする / ページ+数字にする

‘ | ‘と前後に半角スペースでもいいですが、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>