WordPressで「前のページへ」「次のページへ」のリンクを作る
WordPressで、前後のページへのリンクを設置する方法です。
投稿記事ページとアーカイブ系のページ（カテゴリーページ、タグページなど）で表記が少々異なります。
この記事で分かること
- アーカイブページに前後ページへのリンクを設置する方法
- 投稿記事ページに前後ページへのリンクを設置する方法
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
アーカイブページに前後のページへのリンクを表示する
カテゴリー一覧やタグ一覧等、アーカイブページで前後のリンクを表示するためのテンプレートタグは、previous_posts_link()とnext_posts_link()です。
// 前のページへのリンク
<?php previous_posts_link(); ?>
// 次のページへのリンク
<?php next_posts_link(); ?>
実装すると、このように表示されます。
« 前ページへ
次ページへ »previous_posts_link()とnext_posts_link()、それぞれの出力結果をカスタマイズしたい時には、パラメータを使います。
previous_posts_link()のカスタマイズ
previous_posts_link()には、リンクの文言を変える事のできるlabelパラメータが用意されています。
<?php previous_posts_link($label); ?>
| パラメータ | 目的 | デフォルト値 | $label | リンクテキストの設定 | « 前ページへ |
|---|
以下は、リンクのテキストを「前のページへ」に設定する例です。
// リンクのテキストを「前のページへ」に
<?php previous_posts_link('前のページへ'); ?>next_posts_link()のカスタマイズ
next_posts_link()では、labelとmax_pages、2つのパラメータが用意されています。
<?php next_posts_link($label, $max_pages); ?>
| パラメータ | 目的 | デフォルト値 |
|---|---|---|
| $label | リンクのテキスト 使い方はprevious_posts_link()と同じ。 |
次ページへ » |
| $max_pages | 何ページまでページ送りさせるか。 例えば10ページある状態でもmax_pagesの値を5にすると、ページネーションは5ページまでしか展開されなくなります。 何に使うんだろう…。 |
0（全ページを表示） |
以下はリンク文言を「次のページへ」にした例です。
// リンクのテキストを「次のページへ」に
<?php next_posts_link('次のページへ'); ?>
こちらはさらに、max_pagesを3にした例です。
// リンクのテキストを「次のページへ」に
// リンクは3ページまでに制限
<?php next_posts_link('次のページへ', 3); ?>
投稿記事ページに前後のページへのリンクを表示する
記事ページに前後のリンクを表示するためのテンプレートタグは、previous_post_link()とnext_post_link()です。
「posts」ではなくて「post」であることに注意。
単一のページに飛ばすリンクなので、単数系になるわけですね。
// 前のページへのリンク
<?php previous_post_link(); ?>
// 次のページへのリンク
<?php next_post_link(); ?>
実装すると、このように表示されます。
« 前記事のタイトル
次記事のタイトル »こちらもそれぞれ、パラメータを使ってカスタマイズする事ができます。
previous_post_link()とnext_post_link()のカスタマイズ
パラメータは、previous_post_link()とnext_post_link()で共通です。
ここではそのうちの一部を紹介しますが、全パラメータはそれぞれ、WordPress公式リファレンスで確認する事ができます。
・previous_post_link()の全パラメータ（WordPress公式リファレンス）
・next_post_link()の全パラメータ（WordPress公式リファレンス）
// previous_post_linkのパラメータ表記
<?php previous_post_link($format, $link, $in_same_term, $excluded_terms); ?>
// next_post_linkのパラメータ表記
<?php next_post_link($format, $link, $in_same_term, $excluded_terms); ?>
| パラメータ | 目的 | デフォルト値 |
|---|---|---|
| $format | リンクのスタイル | « %link （「« $linkの値」という意味） |
| $link | リンクのテキスト | %title 記事のタイトル名 |
| $in_same_term | カテゴリー等、同属の記事のみをリンクの対象にするか | false |
| $excluded_terms | リンクの対象にしたくない記事のID | なし |
$formatパラメータ
リンクのスタイルを決める事ができます。
後述する$linkとの違いが分かりにくいですが、リンクの文言自体は$linkで設定し、それに矢印やポイントなどをつけたい場合はこちらを利用します。
例えば「< 前のページへ移動」と表示させたい場合、文言を「前のページへ移動」にするのは$link、それに「<」をつけるのは$formatでそれぞれ設定します。
$formatパラメータに%linkと記述することで、$linkの値を使用する事ができます。
以下は「← 記事タイトル」「記事タイトル →」と表示させる例です。
// %link：$linkで設定した値（デフォルトは記事のタイトル）が代入されます
// 「← %link」であれば「← 記事タイトル」と出力されます
<?php previous_post_link('← %link'); ?>
// 「%link →」であれば「記事タイトル →」と出力されます
<?php next_post_link('%link →'); ?>$linkパラメータ
リンクの文言を決める事ができます。
矢印やポイント等の装飾をつけない場合も、一度$formatパラメータを経由しなくてはいけないのが注意点。
// リンク文言を「前の記事へ」にした例
// $linkの値：「前の記事へ」
// $formatの値：%link（$linkの値）
<?php previous_post_link('%link', '前の記事へ'); ?>
// リンク文言を「次の記事へ」にした例
<?php next_post_link('%link', '次の記事へ'); ?>
$in_same_term
trueにすると、同じカテゴリーに属する記事のみがリンク対象になります。
// 同カテゴリーの記事のみをリンクの対象に
<?php previous_post_link('%link', '前の記事へ', true); ?>
// 同カテゴリーの記事のみをリンクの対象に
<?php next_post_link('%link', '次の記事へ', true); ?>$excluded_terms
リンクの対象にしたくない記事のIDをセットして除外する事ができます。
// 記事IDが23番の記事はリンクの対象外に
<?php previous_post_link('%link', '前の記事へ', TRUE, '23'); ?>
// 記事IDが23番の記事はリンクの対象外に
<?php next_post_link('%link', '次の記事へ', TRUE, '23'); ?>まとめ
スムーズな内部リンクはPVアップには必須。
こうした前後のページへの誘導も、有効に設置しておきたいですね。
また、WordPressではこのようにページネーションをつけるためのテンプレートタグもあります。
« 前へ 1 … 3 4 5 6 7 … 10 次へ »
ページがたくさんある場合は、こちらもオススメです。
