2021.12.28｜WordPress

WordPress（ワードプレス）でブログ記事に「前の記事」「次の記事」のナビゲーションを設定する方法

WordPress（ワードプレス）でブログ記事に「前の記事」「次の記事」のナビゲーションを設定する方法

WordPress（ワードプレス）のブログ記事に「前の記事」と「次の記事」のナビゲーションを追加することで記事を読み終えた方が次の記事を読む導線が引けます。 Webサイトの訪問者にとっても、別ページも見てもらうきっかけ、道筋を与えることができ、直帰率の低下にも繋がります。
今回は、WordPress（ワードプレス）でブログ記事に「前の記事」「次の記事」のナビゲーションを設定する方法を解説します。

本記事の内容

ブログ記事に「前の記事」「次の記事」のナビゲーションを設定する方法

ブログ記事に「前の記事」「次の記事」のナビゲーションを出力する場合は、「previous_post_link」と「next_post_link」のテンプレートタグを使うことで設置ができます。

ブログ記事に「前の記事」「次の記事」のナビゲーション
htmlファイルに記述
<div class="nav-below">
<div class="nav-previous"><?php previous_post_link(); ?></div>
<div class="nav-next"><?php next_post_link(); ?></div>
</div>

どちらでも出力ができます。

<div class="nav-below">
<div class="nav-previous"><?php previous_post_link('&laquo; %link', '%title'); ?></div>
<div class="nav-next"><?php next_post_link('%link &raquo;', '%title'); ?></div>
</div>
テキストを変更する場合
<div class="nav-below">
<div class="nav-previous"><?php previous_post_link('&amp;laquo; %link', '前の記事へ'); ?></div>
<div class="nav-next"><?php next_post_link('%link &amp;raquo;', '次の記事へ'); ?></div>
</div>
矢印をアイコンにする場合
<div class="nav-below">
<div class="nav-previous"><?php previous_post_link('%link', '<img src="'. get_template_directory_uri().'/img/画像名" alt="前のニュースへ" width="7"/>前の記事へ'); ?></div>
<div class="nav-next"><?php next_post_link('%link', '<img src="'. get_template_directory_uri().'/img/画像名" alt="次のニュースへ" width="7"/>次の記事へ'); ?></div>
</div>
同じカテゴリーで「前の記事」「次の記事」を設置する場合
<div class="nav-below">
<div class="nav-previous"><?php previous_post_link('%link', '前の記事へ', true); ?></div>
<div class="nav-next"><?php next_post_link('%link', '次の記事へ', true); ?></div>
</div>
除外する記事を設定する場合
<div class="nav-below">
<div class="nav-previous"><?php previous_post_link('%link', '前の記事へ', true, '5,8'); ?></div>
<div class="nav-next"><?php next_post_link('%link', '次の記事へ', true, '5,8'); ?></div>
</div>
サムネイル画像を表示させる場合
<div class="nav-below">
<div class="nav-previous"><?php
$prevPost = get_previous_post(true); //「前の記事」データを取得
$prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(120,80) ); //「前の記事」データのサムネイル取得
previous_post_link( '%link',$prevThumbnail.'%title' ); //出力
?></div>
<div class="nav-next"><?php
$nextPost = get_next_post(true); //「次の記事」データを取得
$nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(120,80) ); //「次の記事」データのサムネイル取得
next_post_link( '%link', '%title'.$nextThumbnail); //出力
?></div>
</div>

まとめ

WordPressでブログ記事に「前の記事」「次の記事」のナビゲーションは、訪問者にとって次の記事を探す手間を省けることができます。記事を下まで読み終えて、他の記事を探すのにまた前のページや上部へ移動するのは訪問者にとってストレスです。「前の記事」「次の記事」のナビゲーションは、なるべく設定することをおすすめいたします。

«
»

関連記事