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

公開日:2014年2月11日
最終更新日: 2016年2月5日

wordpress_link_photo_01

こんにちは!

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

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

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

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

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

wordpress_link_photo_02

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

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

wordpress_link_photo_03

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

手順!

以下のコードをコピペ!

以下のコードを「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) . '">&#60;&#60;&nbsp;前の記事</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) . '">次の記事&nbsp;&#62;&#62;</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_link_photo_04

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

こんな感じです。

wordpress_link_photo_05

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

最後に!

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

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

それではまた。

下記は参考にさせて頂いた記事になります。有難うございました。

公開日:2014/02/11
最終更新日: 2016年2月5日
カテゴリー:WordPress

関連記事

新着記事

コメント/トラックバック

トラックバック用URL:

この投稿のコメント・トラックバックRSS




管理人にのみ公開されます

正しい数値を入力して下さい *
Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly