29：投稿詳細に前後記事リンクを表示

投稿詳細ページに前後の投稿へのリンクを表示させます。

前の投稿へのリンクを表示

<?php
if(get_previous_post()) {
  previous_post_link();
} else {
  echo '前の記事なし';
}
?>

HTML出力結果

« <a href="http://localhost/WordPressフォルダ名/投稿スラッグ/" rel="prev">投稿名</a>

次の投稿へのリンクを表示

<?php
if(get_next_post()) {
  next_post_link();
} else {
  echo '次の記事なし';
}
?>

HTML出力結果

<a href="http://localhost/WordPressフォルダ名/投稿スラッグ/" rel="next">投稿名</a> »

投稿詳細テンプレートに追加

single.php

コピペ用

    <div class="post-nav">
      <div class="previous_link">
<?php
if(get_previous_post()) {
  previous_post_link();
} else {
  echo '前の記事なし';
}
?>
      </div>
      <div class="next_link">
<?php
if(get_next_post()) {
  next_post_link();
} else {
  echo '次の記事なし';
}
?>
      </div>
    </div>

変更前

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>

    <h2 class="title"><?php the_title(); ?></h2>
    <div class="category"><?php the_category(); ?></div>
    <div class="tag">
<?php
if (has_tag()) {
  the_tags('<ul class="tags"><li>', '</li><li>', '</li></ul>');
}
?>
    </div>
    <div class="date"><?php the_time('Y年m月d日'); ?></div>

<?php if (has_post_thumbnail()) : ?>
    <div class="eyecatch">
      <?php the_post_thumbnail('img_960_200'); ?>
    </div>
<?php endif; ?>

    <div class="article">
      <?php the_content(); ?>
    </div>

    <div class="category-org">
      <ul class="post-categories">
<?php
$category_list = get_the_category();
for ($i=0; $i < count($category_list); $i++) :
  $catID = $category_list[$i]->term_id;
  $catName = $category_list[$i]->name;
  $catSlug = $category_list[$i]->slug;
?>
        <li class="cat-<?php echo $catSlug; ?>">
          <a href="<?php echo get_category_link($catID); ?>">
            <?php echo $catName; ?>
          </a>
        </li>
<?php endfor; ?>
      </ul>
    </div>

    <div class="category-org">
      <ul class="post-categories">
<?php
$category_list = get_the_category();
for ($i=0; $i < count($category_list); $i++) :
    $catID = $category_list[$i]->term_id;
    $catName = $category_list[$i]->name;
    $catSlug = $category_list[$i]->slug;
    if($category_list[$i]->category_parent === 1) :
?>
        <li class="cat-<?php echo $catSlug; ?>">
          <a href="<?php echo get_category_link($catID); ?>">
            <?php echo $catName; ?>
          </a>
        </li>
<?php endif; ?>
<?php endfor; ?>
      </ul>
    </div>

<?php if (has_tag()) : ?>
    <div class="tag">
      <ul class="tags">

<?php
$tagList = get_the_tags();
for ($i=0; $i < count($tagList); $i++) :
  $tagID = $tagList[$i]->term_id;
  $tagName = $tagList[$i]->name;
?>
        <li>
          <a href="<?php echo get_tag_link($tagID); ?>">
            <?php echo $tagName; ?>
          </a>
        </li>
<?php endfor; ?>

      </ul>
    </div>
<?php endif; ?>


<?php endwhile; ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

変更後

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>

    <h2 class="title"><?php the_title(); ?></h2>
    <div class="category"><?php the_category(); ?></div>
    <div class="tag">
<?php
if (has_tag()) {
  the_tags('<ul class="tags"><li>', '</li><li>', '</li></ul>');
}
?>
    </div>
    <div class="date"><?php the_time('Y年m月d日'); ?></div>

<?php if (has_post_thumbnail()) : ?>
    <div class="eyecatch">
      <?php the_post_thumbnail('img_960_200'); ?>
    </div>
<?php endif; ?>

    <div class="article">
      <?php the_content(); ?>
    </div>

    <div class="category-org">
      <ul class="post-categories">
<?php
$category_list = get_the_category();
for ($i=0; $i < count($category_list); $i++) :
  $catID = $category_list[$i]->term_id;
  $catName = $category_list[$i]->name;
  $catSlug = $category_list[$i]->slug;
?>
        <li class="cat-<?php echo $catSlug; ?>">
          <a href="<?php echo get_category_link($catID); ?>">
            <?php echo $catName; ?>
          </a>
        </li>
<?php endfor; ?>
      </ul>
    </div>

    <div class="category-org">
      <ul class="post-categories">
<?php
$category_list = get_the_category();
for ($i=0; $i < count($category_list); $i++) :
    $catID = $category_list[$i]->term_id;
    $catName = $category_list[$i]->name;
    $catSlug = $category_list[$i]->slug;
    if($category_list[$i]->category_parent === 1) :
?>
        <li class="cat-<?php echo $catSlug; ?>">
          <a href="<?php echo get_category_link($catID); ?>">
            <?php echo $catName; ?>
          </a>
        </li>
<?php endif; ?>
<?php endfor; ?>
      </ul>
    </div>

<?php if (has_tag()) : ?>
    <div class="tag">
      <ul class="tags">

<?php
$tagList = get_the_tags();
for ($i=0; $i < count($tagList); $i++) :
  $tagID = $tagList[$i]->term_id;
  $tagName = $tagList[$i]->name;
?>
        <li>
          <a href="<?php echo get_tag_link($tagID); ?>">
            <?php echo $tagName; ?>
          </a>
        </li>
<?php endfor; ?>

      </ul>
    </div>
<?php endif; ?>

    <div class="post-nav">
      <div class="previous_link">
<?php
if(get_previous_post()) {
  previous_post_link();
} else {
  echo '前の記事なし';
}
?>
      </div>
      <div class="next_link">
<?php
if(get_next_post()) {
  next_post_link();
} else {
  echo '次の記事なし';
}
?>
      </div>
    </div>

<?php endwhile; ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

style.css

追加

.wp-content .post-nav {
  display: flex;
  justify-content: space-between;
}

表示結果

調べてみよう

previous_post_link関数とnext_post_link関数の引数を調べてみよう。

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

get_previous_post()

previous_post_link()

get_next_post()

next_post_link()

※欠席者対応：lesson20 – lesson21