WordPressの投稿ページで「前の記事」「次の記事」のリンクテキストを表示する方法です。
一番単純な方法
一番単純な方法は次のコードを記載。
<?php previous_post_link(); ?>
<?php next_post_link(); ?>
<?php next_post_link(); ?>
前後記事のタイトルと矢印が自動で表示されます。
以下も同じように表示されます。
<?php previous_post_link(‘« %link’, ‘%title’); ?>
<?php next_post_link(‘%link »’, ‘%title’); ?>
<?php next_post_link(‘%link »’, ‘%title’); ?>
前後に記事がないときは非表示にする
一番古い記事にはそれよりも前の記事がありませんし、最新の記事には次の記事がありません。
その場合の条件判定を加えておくといいと思います。
<?php
if(get_previous_post()) {
previous_post_link(‘« %link’, ‘前の記事のタイトル’);
} else {
echo 前の記事はありません;
}
?>
if(get_previous_post()) {
previous_post_link(‘« %link’, ‘前の記事のタイトル’);
} else {
echo 前の記事はありません;
}
?>
<?php
if(get_next_post()) {
next_post_link(‘%link »’, ‘次の記事のタイトル’);
} else {
echo 次の記事はありません;
}
?>
前の記事がないときは「前の記事はありません」、次の記事がないときは「次の記事はありません」と表示するようにしています。
リンクのテキストを変更する
「%title」に任意のテキストを入れることで、リンクのテキストを記事タイトル以外に変更することも可能です。
<?php previous_post_link(‘%link’, ‘PREV’); ?>
<?php next_post_link(‘%link’, ‘NEXT’); ?>
<?php next_post_link(‘%link’, ‘NEXT’); ?>
アイコンに画像を使う
矢印などのアイコンに画像を使うこともできます。
<?php previous_post_link(‘%link’, ‘<img src=”‘.home_url().’/img/prev.png”>BACK’); ?>
<?php next_post_link(‘%link’, ‘NEXT<img src=”‘.home_url().’/img/next.png” class=”prev-next-img next-img”>’); ?>
<?php next_post_link(‘%link’, ‘NEXT<img src=”‘.home_url().’/img/next.png” class=”prev-next-img next-img”>’); ?>
「.home_url().」や「.get_template_directory_uri().」を使ってパスを記述する際は、書き方に注意してください。
前後記事があるときに区切り文字を表示
前後記事のリンクの間に区切り文字を表示する場合、前後の記事がないときに「前の記事はありません」や「次の記事はありません」のようなテキストを表示するならいいですが、何も表示しないときは、区切り文字も非表示になるようにしておいた方がいいと思いますので、次のような条件判定を使います。
<?php
$previous_post = get_previous_post();
$next_post = get_next_post();
if (!empty( $previous_post ) && !empty( $next_post )): ?>
<span>|</span>
<?php endif;?>
$previous_post = get_previous_post();
$next_post = get_next_post();
if (!empty( $previous_post ) && !empty( $next_post )): ?>
<span>|</span>
<?php endif;?>
Leave a Comment