カスタム投稿の記事ページにおいて次へ・前へリンクを設置する

ワードプレスの記事ページ(カスタム投稿)で「次のページ」「前のページ」のリンクを設置する方法を紹介します。

ワードプレスの記事ページ下に「次の記事へ」や「前の記事へ」を入れるブログカスタマイズ方法です。

コピペでできる方法

まずはコピペだけで表示できる方法です。

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

または

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

好きなテキストにする場合

さっきのは指定されたテキストが表示されます。
次のは好きなテキストで表示させることができます。

<?php previous_post_link('&amp;laquo; %link', '前の記事へ'); ?>
<?php next_post_link('%link &amp;raquo;', '次の記事へ'); ?>

imgタグなどで好きな矢印を表示する

phpタグの中にimgタグなどを入れデザインを綺麗にする方法。

<?php previous_post_link('%link', '<img src="'. get_template_directory_uri().
'/img/icon-prev.svg(画像のパス)" alt="前の記事へ" width="7"/>前の記事へ'); ?>
<?php next_post_link('%link', '<img src="'. get_template_directory_uri().'
/img/icon-next.svg(画像のパス)" alt="次の記事へ" width="7"/>次の記事へ'); ?>

同じカテゴリーページで表示する場合

今までは記事ページ内全ての説明をしました。
今回は、同じカテゴリーページで「前の記事へ」「次の記事へ」とリンクさせることができます。

引数に「ture」を追加することで、記事と同じカテゴリーページ内で前の記事、次の記事へのリンクとなります。

<?php previous_post_link('%link', '前の記事へ', ture); ?>
<?php next_post_link('%link', '次の記事へ', ture); ?>

除外する記事を設定する場合

ページ送りの中に入れたくないページを指定することができます。

4つ目の引数にコンマをつけて記事IDをつけていきます。

<?php previous_post_link('%link', '前の記事へ', ture, '13,15'); ?>
<?php next_post_link('%link', '次の記事へ', ture, '13,15'); ?>

最後のページで記事がない場合

現在見ているページの前後にページがない場合に非表示にする方法です。

phpでもおなじみのIFを使った方法です。

<?php if (get_previous_post()):?>
<?php previous_post_link('&laquo; %link', '前の記事へ'); ?>
<?php endif; ?>

<?php if (get_next_post()):?>
<?php next_post_link('%link &raquo;', '次の記事へ'); ?>
<?php endif; ?>

その記事のサムネイルの表示させる場合

次の記事のサムネイルや前の記事のサムネイルを表示させることができます。

次見る記事のイメージが付きサイト離脱がへりSEOにも効果的です。

<?php
$prevpost = get_adjacent_post(true, '', true); //前の記事
$nextpost = get_adjacent_post(true, '', false); //次の記事
if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<ul>
<?php
if ( $prevpost ) { //前の記事が存在しているとき
echo '<li><div>' . get_the_post_thumbnail($prevpost->ID, 'thumbnail') . '</div><a href="' . get_permalink($prevpost->ID) . '">' . get_the_title($prevpost->ID) . '</a></li>';
} else { //前の記事が存在しないとき
echo '<div><a href="' . network_site_url('/') . '">TOPへ戻る</a></div>';
}
if ( $nextpost ) { //次の記事が存在しているとき
echo '<li><div>' . get_the_post_thumbnail($nextpost->ID, 'thumbnail') . '</div><a href="' . get_permalink($nextpost->ID) . '">' . get_the_title($nextpost->ID) . '</a></li>';

} else { //次の記事が存在しないとき
echo '<div><a href="' . network_site_url('/') . '">TOPへ戻る</a></div>';
}
?>
</ul>
<?php } ?>

制作させていだいたサイトの例

	<div class="single_bottom_nav">			
<p class="<?php if (get_previous_post()):?>single_bottom_nav_prev<?php endif;?>"><?php previous_post_link('%link', '前へ'); ?></p>
<p class="single_bottom_nav_back"><a href="<?php echo get_post_type_archive_link( get_post_type() ); ?>">一覧に戻る</a></p>

<p class="<?php if (get_next_post()):?>single_bottom_nav_next<?php endif;?>"><?php next_post_link('%link', '次へ'); ?></p>
</div>

このように記述した場合下記のようになります。