Mill's Note
  1. HOME
  2. Wordpress関数
  3. 固定ページに関わるWP関数
  4. wp_link_pages()

【Wordpress関数】wp_link_pages()

分割した固定ページのページリンクを表示するWordpressテンプレートタグ。
数字リンクだけではなくテキストリンクにしたり、htmlタグまでパラメータで簡単に設定できます。

結構忘れがちなのですが、固定ページを分割する可能性がある案件には必須ですね。

wp_link_pages() 呼び出しコード

呼び出しコード説明
<?php wp_link_pages(); ?>「ページ: 」という前置き文字 + ページ番号 を<p>タグで囲って出力
<?php wp_link_pages($args); ?>パラメータの指定次第で様々な出力方法が可能

wp_link_pages() パラメータ

パラメータ初期値設定できる値説明
before<p>ページ'', HTMLタグ、前置きテキスト 等リスト全体の前
after</p>'', HTML閉タグ 等リスト全体の後
link_before''文字列 等各リンク文字の直前
タグ等を含めて囲うものではない
link_after''文字列 等各リンク文字の直後
閉じタグ等を含めて囲うものではない
next_or_numbernumber'', number数字表記。number以外は、nextpagelink, previouspagelinkが有効になる
pagelink%テキスト等next_or_number用フォーマット
% (必須) → %がページ番号に置き換わる
出力結果はlink_before,link_afterと同じ
nextpagelink次のページ文字列next_or_numberがnumber以外の場合
previouspagelink前のページ文字列next_or_numberがnumber以外の場合
separator''区切り文字使い方次第でリストタイプにもできます
echo11(表示)、0(値を返す)文字列として取得する場合は 0
aria_currentpagepage, step, date,
time, true, false,
location,		スクリーンリーダー用
いずれか１個を指定して現在のページを示す
主要なパラメータを記載 / 他のパラメータはGoogle様でm(__)m

wp_link_pages() の使用例

wp_link_pages() は、パラメータ指定に合わせ自動的に成形された状態で出力されます。

実際は１行につながって出力されますが、見やすいように改行とインデントを入れています。

パラメータなし

「ページ: 」という前置き文字 + ページ番号 を<p>タグで囲って出力します。

PHP
<?php wp_link_pages(); ?>

/* 出力結果 */
<p class="post-nav-links">ページ: 
  <span class="post-page-numbers current" aria-current="page">1</span>
  <a href="https://〇〇/〇〇〇/2/" class="post-page-numbers">2</a>
  <a href="https://〇〇/〇〇〇/3/" class="post-page-numbers">3</a>
</p>
/* ページ表示 */
ページ: 1 2 3

テキストリンクに変更

「 ページ: 」というテキストは不要なので、それも無くしたシンプル設定。

PHP
<?php wp_link_pages('before=<p class="page-link">&next_or_number='); ?>

/* 出力結果 */
<p class="page-link"> 
  <a href="https://〇〇/〇〇〇/" class="post-page-numbers">前のページ</a>
  <a href="https://〇〇/〇〇〇/3/" class="post-page-numbers">次のページ</a>
</p>
/* ページ表示 */
前のページ 次のページ

リストタイプのテキストリンクに変更

セパレータを上手く使うと、簡単にリストタイプにもできます。
'next_or_number' => '' を指定しなければ、数字のリストタイプに^^

PHP
<?php 
  wp_link_pages(array(
    'before' => '<ul class="page-link"><li>',
    'after'  => '</li></ul>',
    'separator' => '</li><li>',
    'next_or_number' => ''
  ));
?>

/* 出力結果 */
<ul class="page-link">
  <li><a href="https://〇〇/〇〇〇/" class="post-page-numbers">前のページ</a></li>
  <li><a href="https://〇〇/〇〇〇/3/" class="post-page-numbers">次のページ</a></li>
</ul>
/* ページ表示 */
前のページ
次のページ