WordPress

【WordPressワードプレス】投稿ページに、前後の投稿へのリンクを設置する方法

 

こんにちは、イケゾーです。

記事詳細ページに「前の記事へ」「次の記事へ」と前後の投稿へのリンクを設置する方法を解説します。

この記事はこんな人におすすめ!

  • WordPressで作成したサイトのアクセス数を増やしたい
  • WordPressで作成したサイトの直帰率を下げたい
  • WordPressで作成した記事詳細ページに、前後の記事へのリンクを貼りたい
前後の投稿へのリンクを用意すると、アクセス回数が増やせるよ
イケゾー

 

【WordPressワードプレス】投稿ページに、前後の投稿へのリンクを設置する方法

この記事では、ソースコードを実際に掲載して解説していきます。

 

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

いま閲覧している記事の前後の記事のリンクは
WordPressが自動で作成してくれる

WordPressが自動でリンクを作成してくれるから簡単なコードで実現できますよ。

 

この記事を読んでできること

いま閲覧している記事に、前後の記事があればリンクを表示します。

 

前後の記事へ「previous_post_link」と「next_post_link」でリンク作成

front-single.php

前の記事へのリンクはprevious_post_link、次の記事へのリンクはnext_post_linkを使用します。

<?php previous_post_link(); ?><!-- 前の記事へのリンク -->
<?php next_post_link(); ?><!-- 次の記事へのリンク -->

 

 

front-single.php

引数を指定すれば表示方法を変更できます。

<!-- 引数を用いた書き方 -->
<?php previous_post_link('« %link', '%title', TRUE, '1,2'); ?>
<?php next_post_link('%link »', '%title', TRUE, '1,2'); ?>

第一引数:リンク表示の形式を指定します。リンク自体は「%link」で第二引数で指定します。

第二引数:リンク自体のテキストを指定します。「%title」は記事のタイトルです。

第三引数:同じカテゴリーに属するものに限定するかどうか指定します。 限定する「TRUE」/ 限定しない「FALSE」

第四引数:除外したいカテゴリーIDを指定します。複数ある場合は半角カンマ「,」で記述します。

 

これで前後の記事のリンクを表示できました。ただしこのままでは、前後の記事がなくてもリンクが表示されてしまい、ユーザが混乱してしまいます。これを次章では直していきましょう。

前後の記事のリンクを表示できたけど、前後の記事がないときはリンクを非表示にしたいな
イケゾー

 

 

前後の記事が存在しない場合は、リンクを非表示にする

前後の記事が存在しない場合は、リンク自体を非表示にしたほうが良いです。その場合は、if文で条件分岐して非表示にすると良いでしょう。

front-single.php

前後の記事が存在するかどうかを確認します。前の記事はget_previous_post、次の記事はget_next_postで確認します。

<?php
if (get_next_post()):// 次の記事がある場合
?>
  <div class="next"><?php next_post_link('%link','%title',TRUE); ?></div>
<?php endif; ?>
<?php
if (get_previous_post()):// 前の記事がある場合
?>
  <div class="prev"><?php previous_post_link('%link','%title',TRUE); ?></div>
<?php endif; ?>

前後の記事がないときに、リンクを非表示にできました
イケゾー

 

<a>タグのhref属性にリンク先を取得する場合

リンク先を取得したい場合は、<a>タグのhref属性に記事のリンクを出力します。

次の記事のリンク先は、get_next_postで取得した情報を$next_postに格納し、$next_post->IDで出力します。

<?php
$next_post = get_next_post();
$prev_post = get_previous_post();
if ( $next_post):// 次の記事がある場合
?>
<div class="next">
  <a href="<?php echo get_permalink( $next_post->ID); ?>">NEXT</a>
</div>
<?php
endif;
if ( $prev_post):// 前の記事がある場合
?>
<div class="prev">
  <a  href="<?php echo get_permalink( $prev_post->ID); ?>">PREV</a>
</div>
<?php endif; ?>

 

<a>タグのhref属性にリンク先を出力できました
イケゾー

 

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

 

まとめ

以上で、前後の記事のリンクを表示できました。

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-WordPress