はじめに

HP制作をしている駆け出しエンジニアです。

ブログの記事ページに見られる、「前の記事」「次の記事」に遷移するリンクを作成する方法をまとめました。

リンクを表示するコード

下記のコードをHTMLファイルに記載することで、「前の記事」「次の記事」に遷移するaタグを実装できます。

HTML

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

実際のHTMLは下記のようになります。

HTML

<a href="前の記事のリンク" rel="prev">前の記事のタイトル</a>
<a href="次の記事のリンク" rel="next">次の記事のタイトル</a>

表示したいテキストを指定する場合

下記のように、第2引数に表示したいテキストを渡すことで実装できます。

HTML

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

同じカテゴリーの前後の記事を表示する場合

下記のように、第3引数に「TURE」を渡すことで実装できます。

HTML

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

前後の記事が無い場合にボタンのCSSを無効化にする場合

前後の記事がない場合に、クラスにhiddenを追加することで実現可能になります。
今回は、前後の記事がない時は、ボタンを見えなくする仕様にするため、visibility: hidden;をCSSで指定します。

HTML

<button class="button-before <?php echo get_previous_post() ? '' : 'hidden'; ?>">
    <?php previous_post_link('%link', '前のページへ'); ?>
</button>

CSS

/* ボタン */
.button-before {
  border-radius: 40px;
  border: solid 1px #757575;
  color: #757575;
  font-size: 15px;
  height: 62px;
}

/* ボタンが非表示でもスペースを保持 */
.button-before.hidden {
  visibility: hidden;
}

以上、参考になれば幸いです!