2012年11月19日 category : WordPress tags :

WordPressで前の記事、次の記事を表示するテンプレートタグ

このエントリーをはてなブックマークに追加

pre-next

ワードプレスで前の記事(previous)、次の記事(next)へのリンクを設置しカスタマイズします。

検索から訪問したブログに興味がわいた場合、記事を順に遡って読んでみたくなります。そんなときに前の記事へのリンクがあると便利です。設置側としてもPV数が増える可能性がありますので前の記事、次の記事へのリンクを追加してみます。

ワードプレスでは前の記事、次の記事を表示するテンプレートタグが用意されていますので簡単に追加することができます。ワードプレス便利:)

01 . テンプレートタグ

前の記事を表示するテンプレートタグ:<?php previous_post_link() ?>
次の記事を表示するテンプレートタグ:<?php next_post_link() ?>

これらを追加するだけで「« 記事のタイトル」とアンギュラークウォート(«)+記事タイトルの形で表示されます。

pre-next-01

簡単に設置することが出来ますが、これらのタグはループ内で使用する必要がありますのでsingle.phpなどのメインループ内に記述してください。ちなみにHTMLタグはこんな感じです。クラス名は適当に変更してください。

<div class="navi-pre-next">
<div><?php previous_post_link() ?></div>
<div><?php next_post_link() ?></div>
</div>

02 . 任意の文字列でリンクする

引数(パラメータ)を渡すことで記事タイトルではなく任意の文字列でリンクを貼ることができます。第1引数には%link、第2引数に表示したい文字列を入れます。

pre-next-02

<div class="navi-pre-next">
<div><?php previous_post_link('%link','前の記事') ?></div>
<div><?php next_post_link('%link','次の記事') ?></div>
</div>

03 . 同一カテゴリの前後の記事

ワードプレスの特徴として記事をカテゴリー分けにすることができます。前の記事をクリックした際に日付での前の記事ではなく、同一カテゴリー内の前の記事、次の記事へのリンクにしたい場合は、第3引数にtrueを渡します。

<div class="navi-pre-next">
<div><?php previous_post_link('%link','前の記事',true) ?></div>
<div><?php next_post_link('%link','次の記事',true) ?></div>
</div>

カテゴリーごとでの前後記事へのナビゲーションリンクはテンプレートタグならではですね。プラグインを使うでもなく引数を変更するだけで簡単に設置できます。日記系のブログなどに重宝できそうな前の記事、次の記事の設置方法でした:)

HOME >>  WordPress > WordPressで前の記事、次の記事を表示するテンプレートタグ