シングルページで「前の記事へ」「次の記事へ」のリンクを表示する

目次非表示

基本のページネーション
リンクがなくても文字を表示したい時
この前ハマった沼

基本のページネーション

PHP

	<?php
	the_post_navigation(array(
		'prev_text' => '前へ',
		'next_text' => '次へ',
	));
	?>

リンクがなくても文字を表示したい時

こんな感じで前の記事や次の記事がなくてもテキストを表示したい時は、分岐を使って表示します。

PHP

    <div class="c-pagination">
      <div class="c-pagination__btn c-pagination__btn--prev">
        <?php
        $previous_post = get_previous_post(); // 前の投稿を取得

        if ($previous_post) {
          previous_post_link('%link', '前へ'); // 前の投稿へのリンクを表示
        } else {
          echo '<span>前へ</span>'; // 前へがない場合はスパンを表示
        }
        ?>
      </div>
      <div class="c-pagination__btn c-pagination__btn--next">
        <?php
        $next_post = get_next_post(); // 次の投稿を取得

        if ($next_post) {
          next_post_link('%link', '次へ'); // 次の投稿へのリンクを表示
        } else {
          echo '<span>次へ</span>'; // 次へがない場合はスパンを表示
        }
        ?>
      </div>
    </div>

SCSS

.c-pagination {
  display: flex;
  width: 100%;
  justify-content: space-between;

  @include mq("md") {
    gap: 44px;
    width: fit-content;
  }
}

.c-pagination__btn>* {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-pagination__btn--prev>*::before {
  content: "<";
}


.c-pagination__btn--next>*::after {
  content: ">";
}


.c-pagination__btn span {
  color: $grey;
}

.c-pagination__btn a {
  color: $black;
}