レンちゃんとペンタ

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

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

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

この記事で分かること

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

    Webデザインとブログで豊かに引きこもる。

    レンちゃんとペンタ

    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 リンクのスタイル &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