WordPressで前の記事や次の記事へのリンクを作る方法

投稿記事の下に前の記事や次の記事へのリンクがついていないテーマがあります。

その場合にリンクを自作する方法を紹介します。

WordPressで前の記事や次の記事へのリンクを作る方法

リンクの作成では、下記のWordpress関数を使います。

記事の存在確認して、空タグの作成を防いでいます。

記事の存在確認では、戻り値のあるget_previous_postとget_next_postを使います。

前の記事や次の記事へのリンク機能

表示した時のイメージは下記のようになります。

※スマホの場合は上下表示になります。

タイトルが長い場合は、overflowで非表示にしています。

get_previous_postとget_next_postで記事があれば、前へ・次への記事リンクを表示させ、どちらか一方だけの場合はある方だけを表示します。

記事が両方なければタグ自体表示されません。

以下、設定したコードとCSSです。

※サンプルではFontAwesomeを使っているので、プラグインが必要です。

前の記事や次の記事へのリンクコードとCSS

投稿記事のPHPファイル（single.phpなど）の記事下に下記のコードを追加します。

記事の取得範囲は記事と同じカテゴリー内だけにしています。

//記事のありなし確認
$oldpost = get_previous_post(true);
$newpost = get_next_post(true);

if(!empty($newpost) || !empty($oldpost)) {
  echo '<hr class="paging-top"><div class="paging clearfix">';

  //前へ（新しい記事）
  if(!empty($newpost)) {
    $thumb_prev = get_the_post_thumbnail($newpost->ID, array(80,80) );
    next_post_link('<div class="prevbox">%link</div>','<div class="prev"><h6>前の記事</h6><ul><li class="thumbnail">'.$thumb_prev.'</li><li class="title">%title</li></ul></div>',true);
  }

  //次へ（古い記事）
  if(!empty($oldpost)) {
  $thumb_next = get_the_post_thumbnail($oldpost->ID, array(80,80) );
  previous_post_link('<div class="nextbox">%link</div>','<div class="next"><h6>次の記事</h6><ul><li class="title">%title</li><li class="thumbnail">'.$thumb_next.'</li></ul></div>',true);
  }

  echo '</div><hr class="paging-bottom">';
}

CSSは下記のものを追加します。

※テーマによっては、使っているCSSが違うため、表示がおかしい場合は既存CSSをクリアする必要があります。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
hr.paging-top {
  margin-bottom:0;
}
hr.paging-bottom {
  margin-top:0;
}
.paging a {
  display: block;
  transition: all 0.3s ease;
  vertical-align:top;
  color:#2baae1;
  font-weight: bold;
}
.paging a:hover {
  background-color:#efefef;
}
.paging ul {
  width:100%;
  margin: 0;
}
.paging .prev {
  position:relative;
  text-align:left;
  border-right:1px solid #efefef;
}
.paging .prevbox {
  width:50%;
  display: inline-block;
  float:left;
}
.paging .prev::before {
  position:absolute;
  top:40%;
  left:10px;
  content:"\f0a8";
  font-family: FontAwesome;
  color:#2baae1;
  font-size:1.5em;
}
.paging .prev h6 {
  font-size:0.8em;
  padding:10px 0 0 54px;
  margin:0 0 3px 0;
}
.paging .prev ul li {
  vertical-align:top;
  display: inline-block;
  list-style: none;
  list-style-position: inside;
  font-size: 16px;
}
.paging .prev ul li.thumbnail {
  padding:0 10px 10px 40px;
}
.paging .prev ul li.title {
  max-width:60%;
  height:80px;
  overflow:hidden;
}

.paging .next {
  position:relative;
  text-align:right;
  border-left:1px solid #efefef;
}
.paging .nextbox {
  width:50%;
  display: inline-block;
  float:right;
}
.paging .next::before {
  position:absolute;
  top:40%;
  right:10px;
  content:"\f0a9";
  font-family: FontAwesome;
  color:#2baae1;
  font-size:1.5em;
}
.paging .next h6 {
  font-size:0.8em;
  padding:10px 54px 0 0 ;
  margin:0 0 3px 0;
}
.paging .next ul li {
  vertical-align:top;
  display: inline-block;
  list-style: none;
  list-style-position: inside;
  font-size: 16px;
}
.paging .next ul li.thumbnail {
  padding:0 40px 10px 10px ;
}
.paging .next ul li.title {
  max-width:60%;
  height:80px;
  overflow:hidden;
}

@media only screen and (max-width: 768px) {
  .paging .prevbox,
  .paging .nextbox {
    width:100%;
    clear:both;
  }
  .paging .prev {
    border-right:none;
    border-bottom:1px solid #efefef;
  }
  .paging .next {
    border-left:none;
  }
}

画面サイズが340px以下になると表示が崩れる可能性があります。

@mediaで修正はできますが、その画面サイズのスマホはほとんどないと思うので対応していません。

【まとめ】Wordpressで前の記事や次の記事へのリンクを作る方法

前の記事や次の記事へのリンクは、独自の関数などは作らずにWordpressの関数を使って簡単に作成できます。

文字サイズや色などは、適宜CSSを修正してください。