[WordPress] 同じカテゴリー内の前後の記事リンクを表示する

同じカテゴリー内の前後の記事リンクを表示する

WordPressのブログ記事内に、前後の記事へのリンクを表示するコードを書いてみました。せっかくなのでホームURLへのリンクも入れることにしました。

この記事で解説するのは、以下３項目についてです。

• 現在のブログのホームURLを取得する
• 前後の記事リンクを取得する
• 表示する記事リンクを同じカテゴリー内に絞る

上記を実現したいという方の参考になれば幸いです。

現在のブログのホームURLを取得する

HOMEに戻るリンクを表示するために、現在のブログのホームURLを home_url() で取得します。

<?php echo home_url(); ?>

前後の記事リンクを取得する

WordPressの前後の記事リンクは、previous_post_link() と next_post_link() で取得できます。

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

表示する記事リンクを同じカテゴリー内に絞る

previous_post_link() と next_post_link() で表示する記事リンクを同じカテゴリー内に絞るには、それぞれの関数の第３引数に「TRUE」を渡します。

<?php previous_post_link('« %link', '%title', TRUE, ''); ?>
<?php next_post_link('« %link', '%title', TRUE, ''); ?>

他にもゴチャゴチャやってますが、詳細はCodexを見てください。

テンプレートタグ/previous post link – WordPress Codex 日本語版

テンプレートタグ/next post link – WordPress Codex 日本語版

表示用のコード

上記の関数を使って、表示用のコードを書きます。

表示用にコードを成形

表示用に成形したコードは以下のとおり。

<div class="navigation clearfix">
    <p class="navileft">
        <?php previous_post_link('« %link', '%title', TRUE, ''); ?>
    </p>
    <p class="navitop">
        │<a href="<?php echo home_url(); ?>">HOME</a>│
    </p>
    <p class="naviright">
        <?php next_post_link('%link »', '%title', TRUE, ''); ?>
    </p>
</div>

スタイルシート

それぞれのスタイルは以下のようにしました。

.navigation {
  text-align: center;
  padding: 1em 0;
  width: 100%;
}
.navitop {
  float:left;
  width:12%;
  text-align:center;
}
.navileft {
  float:left;
  width:44%;
  text-align:left;
  word-break:break-all;
  line-height:1.5em;
}
.naviright {
  float:right;
  width:44%;
  text-align:right;
  word-break:break-all;
  line-height:1.5em;
}

配置してみた

上記コードを、記事ページのファイルに追加します。とりあえず、記事下部のソーシャルボタンとZenbackウィジェットの間に配置してみました。

前後の記事リンク

こんな感じで表示されます。

参考

テンプレートタグ/home url – WordPress Codex 日本語版

テンプレートタグ/previous post link – WordPress Codex 日本語版

テンプレートタグ/next post link – WordPress Codex 日本語版

【WordPress】前後の記事へのリンクを同じカテゴリだけにする | キリンブログ

同じカテゴリ内記事へのリンク（「前の記事へ」「次の記事へ」）をつけたい | WordPress（ワードプレス）とプラグイン