WordPressの投稿記事「前の記事へ」「次の記事へ」のリンクにサムネイルを付ける方法!

こんにちは!

久しぶりの投稿です。ここ最近ちょっと更新をサボってしまいました。

年始に毎週火曜日と金曜日に更新すると目標を立てたばかりなのに・・・。早速、その目標を達成できませんでした。反省です。

もう一度、気持ちを切り替えて頑張っていきたいと思います!

本題に戻りまして、今回の内容ですが、前々からWordPressの投稿記事の「前の記事へ」と「次の記事へ」のリンクに物足りなさを感じていました。

↓物足りなさを感じていたリンクはこんな感じです。「前の記事」と「次の記事」のリンクだけでなんか味気ない。

しかも次の記事がない時は、中途半端に空白が空いています。

↓こんな感じで右端にスペースがあります。

出来れば「前の記事へ」「次の記事へ」のリンクと一緒に「記事タイトル」「サムネイル」も表示させたいです。そこでちょっとカスタマイズをしてみました。今回はその方法をご紹介したいと思います。

手順!

以下のコードをコピペ!

↓以下のコードを「single.php」にコピペして下さい。

<?php
  $prevpost = get_adjacent_post(true, '', true); //前の記事
  $nextpost = get_adjacent_post(true, '', false); //次の記事
  if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<?php } ?>

<!--▼ページナビ▼-->
<?php
  $prevpost = get_adjacent_post(true, '', true); //前の記事
  $nextpost = get_adjacent_post(true, '', false); //次の記事
  if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<div class="cat_paging">
  <?php
    if ( $prevpost ) { //前の記事が存在しているとき
      echo '<dl class="alignleft"><dt><a href="' . get_permalink($prevpost->ID) . '"><< 前の記事</a></dt><dd><span class="thumb"><a href="' . get_permalink($prevpost->ID) . '">' . get_the_post_thumbnail($prevpost->ID, 'thumb80') . '</a></span><span class="title"><a href="' . get_permalink($prevpost->ID) . '">' . get_the_title($prevpost->ID) . '</a></span></dd></dl>';
    } else { //前の記事が存在しないとき
      echo '<div class="alignleft nopost"><a href="' . network_site_url('../') . '">トップへ戻る</a></div>';
    }
    if ( $nextpost ) { //次の記事が存在しているとき
      echo '<dl class="alignright"><dt><a href="' . get_permalink($nextpost->ID) . '">次の記事 >></a></dt><dd><span class="thumb"><a href="' . get_permalink($nextpost->ID) . '">' . get_the_post_thumbnail($nextpost->ID, 'thumb80') . '</a></span><span class="title"><a href="' . get_permalink($nextpost->ID) . '">' . get_the_title($nextpost->ID) . '</a></span></dd></dl>';
    } else { //次の記事が存在しないとき
      echo '<div class="alignright nopost"><a href="' . network_site_url('../') . '">トップへ戻る</a></div>';
    }
  ?>
</div>
<?php } ?>
<!--▲ページナビ▲-->

<?php
  $prevpost = get_adjacent_post(true, '', true); //前の記事
  $nextpost = get_adjacent_post(true, '', false); //次の記事
  if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<?php } ?>

実際の画面で確認!

↓こんな感じに格好良くなりました(CSSで調整は必要です)。

以上で、設定完了です!次の記事がない時は「トップへ戻る」のリンクが表示されるようになっています。

↓こんな感じです。

カスタマイズは簡単に出来ますので、ぜひ試してみて下さい。

最後に!

最初より分かりやすいし、格好良くなりましたね。私的には満足できるカスタマイズでした。文字だけでなくサムネイルもあった方がクリックされやすいのではないでしょうか。

以上「WordPressの投稿記事「前の記事へ」「次の記事へ」のリンクにサムネイルを付ける方法!」でした!

それではまた。

コメント