デザログ

WordPressで「前のページへ」「次のページへ」のリンクを作る

WordPressで「前のページへ」「次のページへ」のリンクを作る

WordPressで、前後のページへのリンクを設置する方法です。
投稿記事ページとアーカイブ系のページ（カテゴリーページ、タグページなど）で表記が少々異なります。

この記事で分かること

  • アーカイブページに前後ページへのリンクを設置する方法
  • 投稿記事ページに前後ページへのリンクを設置する方法

    この記事の著者

    • フリーランス
    • Webデザイナー兼UI/UXデザイナー

    アーカイブページに前後のページへのリンクを表示する

    カテゴリー一覧やタグ一覧等、アーカイブページで前後のリンクを表示するためのテンプレートタグは、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 リンクのスタイル &laquo; %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 次へ »

    ページがたくさんある場合は、こちらもオススメです。

    1. Home
    2. WordPressで「前のページへ」「次のページへ」のリンクを作る

    Related Posts