Travelogue

WordPressで前後の記事へのテキストリンク表示するタグとCSSの参考例

公開日：

WordPressで前の記事と次の記事へのテキストリンクを表示するときはprevious_post_link()とnext_post_link()を使います。
これらのタグはループ内で使用する必要があります。

codexに書いてある通りどちらのタグにも引数は4種類あります。

  • リンクの文字列と一緒に表示する文言（記号など）
  • リンク自体の文言（デフォルトは記事のタイトル）
  • 同じカテゴリに絞るかどうか
  • 除外カテゴリ（カテゴリIDで指定）

デフォルトではカテゴリに関係なく表示されますが、同じカテゴリ内の前後へのリンクに絞ることも可能です。
以下のように3番目の引数にTRUEを指定します。

<?php previous_post_link('&laquo; %link','%title',TRUE); ?>

CSSの参考例

前の記事へのリンクは左、次の記事へのリンクは右に配置

上の画像のように、前の記事へのリンクは左、次の記事へのリンクは右に配置するためのCSSの一例を参考までに紹介します。

<ul id="prevnext" class="cf">
<li class="prev"><?php previous_post_link('&laquo; %link','%title',TRUE); ?></li>
<li class="next"><?php next_post_link('%link &raquo;','%title',TRUE); ?></li>
</ul>

.cf:before,
.cf:after {
	content:"";
	display:table;
}
.cf:after {
	clear:both;
}
.cf {
	zoom:1;
}
#prevnext {
	font-size:14px;
	line-height:1.8;
	margin:20px 0px;
	padding: 0px;
	list-style: none;
}
#prevnext .prev {
	float:left;
}
#prevnext .next {
	float:right;
}

ulタグのliでそれぞれのリンクをマークアップして、それぞれを左および右にフロートさせています。
フロートを解除するためにclearfixというテクニックを用いています。cssの定番テクニックですが、よくわからなければ以下のエントリーが参考になります。

Pagetop