WordPressで投稿記事に前の記事および次の記事へのリンクを自動表示する方法

Keisuke Ota

こんにちは、けいすけです。

当サイトでは、投稿ページ間のナビゲーションを設置できてなかったんですが、記事が増えてきたこともあり、前の記事および次の記事へのリンクを新たに設置しました。

今回は、WordPressで投稿記事に前の記事および次の記事へのリンクを自動表示する方法について解説しています。

目次 [表示する]

  1. 前の記事および次の記事へのリンクを自動表示する方法
    1. リンクの表示
    2. 記事タイトルの表示
    3. 記事が存在しない場合
    4. アイキャッチ画像の表示

前の記事および次の記事へのリンクを自動表示する方法

リンクの表示

前の記事および次の記事へのリンクは、以下のように記述することで、自動的に表示させることができます。

PHP

                            
<ul>
<?php
$next_post = get_next_post();
$prev_post = get_previous_post();
?>
    <li><a href="<?php echo get_permalink($next_post->ID); ?>">NEXT</a></li>
    <li><a href="<?php echo get_permalink($prev_post->ID); ?>">PREV</a></li>
</ul>

記事タイトルの表示

記事タイトルを表示させたいときは以下のようにして表示させます。

PHP

                            
<ul>
<?php
$next_post = get_next_post();
$prev_post = get_previous_post();
?>
    <li><a href="<?php echo get_permalink($next_post->ID); ?>"><?php echo $next_post->post_title; ?></a></li>
    <li><a href="<?php echo get_permalink($prev_post->ID); ?>"><?php echo $prev_post->post_title; ?></a></li>
</ul>

記事が存在しない場合

次のページ（あるいは前のページ）がないときは、条件分岐により表示する内容を変えることが可能です。

PHP

                            
<ul>
<?php
$next_post = get_next_post();
$prev_post = get_previous_post();
if ($next_post):
?>
    <li><a href="<?php echo get_permalink($next_post->ID); ?>"><?php echo $next_post->post_title; ?></a></li>
<?php else: ?>
    <li><a href="<?php bloginfo('url'); ?>">TOPへ戻る</a></li>
<?php
endif;
if ($prev_post):
?>
    <li><a href="<?php echo get_permalink($prev_post->ID); ?>"><?php echo $prev_post->post_title; ?></a></li>
<?php else: ?>
    <li><a href="<?php bloginfo('url'); ?>">TOPへ戻る</a></li>
<?php endif; ?>
</ul>

アイキャッチ画像の表示

アイキャッチ画像を表示させたいときは、以下のようにすると表示されます。

PHP

                            
<ul>
<?php
$next_post = get_next_post();
$prev_post = get_previous_post();
if ($next_post):
?>
    <li>
        <a href="<?php echo get_permalink($next_post->ID); ?>">
<?php 
    echo get_the_post_thumbnail($next_post->ID, 'thumbnail');
    echo $next_post->post_title; 
?>
        </a>
    </li>
<?php else: ?>
    <li><a href="<?php bloginfo('url'); ?>">TOPへ戻る</a></li>
<?php
endif;
if ($prev_post):
?>
    <li>
        <a href="<?php echo get_permalink($prev_post->ID); ?>">
<?php 
    echo get_the_post_thumbnail($prev_post->ID, 'thumbnail');
    echo $prev_post->post_title; 
?>
        </a>
    </li>
<?php else: ?>
    <li><a href="<?php bloginfo('url'); ?>">TOPへ戻る</a></li>
<?php endif; ?>
</ul>

出力されるHTMLにCSSでスタイルを適用すれば完成です。

Related