こんにちわ。TAKA(@web_creativelab)です。
本日は、Wordpressでブログを作るときに、各記事の下の方に前後の記事へのリンク(前の記事へ、次の記事へ)を画像付きで表示する方法をご紹介します。
本サイトにも実装済みの機能です。
前後の記事を表示するコード
基本的に下記のPHPとCSSをコピペするだけで大丈夫です。
なお、前後の記事が存在しない場合、トップページへのリンクを表示する仕様です。
また、アイキャッチが登録されていないと何も表示されない仕様です。
PHPと少しHTML
<div class="singlePager clearfix"> <?php $prevpost = get_adjacent_post(false, '', true); $nextpost = get_adjacent_post(false, '', false); if( $prevpost or $nextpost ){ ?> <?php if ( $prevpost ) { echo '<a href="' . get_permalink($prevpost->ID) . '" title="' . get_the_title($prevpost->ID) . '" class="clearfix singlePagerLeft"><p class="singlePagerName">前の記事へ</p>' . get_the_post_thumbnail($prevpost->ID, array(156,90)) . '<p class="singlePagerTitle">' . get_the_title($prevpost->ID) . '</p></a>'; } else { echo '<p class="goHomeLeft"><a href="' . esc_url( home_url( '/' ) . '" class="goHome">トップページへ</a></p>'; } if ( $nextpost ) { echo '<a href="' . get_permalink($nextpost->ID) . '" title="'. get_the_title($nextpost->ID) . '" class="clearfix singlePagerRight"><p class="singlePagerName">次の記事へ</p>' . get_the_post_thumbnail($nextpost->ID, array(156,90)) . '<p class="singlePagerTitle">'. get_the_title($nextpost->ID) . '</p></a>'; } else { echo '<p class="goHomeRight"><a href="' . esc_url( home_url( '/' ) . '" class="goHome">トップページへ</a></p>'; } ?> <?php } ?> </div>
CSS
以下のCSSは僕が分かりやすいように書いてあるので最適化されていません。
希望のデザインに応じてCSSを修正してください。
<style> div.singlePager { padding: 16px 0; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; margin: 24px 0 0 0; } div.singlePager a:hover { opacity: 0.8; } div.singlePager a.singlePagerLeft { display: block; width: 323px; padding: 0 16px 0 0; border-right: solid 1px #ddd; float: left; } div.singlePager a.singlePagerRight { display: block; width: 323px; padding: 0 0 0 16px; float: right; } div.singlePager p.singlePagerName { height: 20px; margin: 0 0 8px 0; font-size: 11px; } div.singlePager a.singlePagerLeft p.singlePagerName { text-align: left; } div.singlePager a.singlePagerRight p.singlePagerName { text-align: right; } div.singlePager a.singlePagerLeft img { width: 156px; height: 90px; float: left; } div.singlePager a.singlePagerRight img { width: 156px; height: 90px; float: right; } div.singlePager a.singlePagerLeft p.singlePagerTitle { display: block; width: 156px; float: right; letter-spacing: 0.1em; line-height: 18px; font-size: 12px; } div.singlePager a.singlePagerRight p.singlePagerTitle { display: block; width: 156px; float: left; letter-spacing: 0.1em; line-height: 18px; font-size: 12px; } div.singlePager p.goHomeLeft { display: block; width: 323px; padding: 0 16px 0 0; border-right: solid 1px #ddd; float: left; } div.singlePager p.goHomeRight { display: block; width: 323px; padding: 0 0 0 16px; float: right; } div.singlePager a.goHome { display: block; width: 118px; height: 118px; -webkit-border-radius: 59px; -moz-border-radius: 59px; border-radius: 59px; margin: 0 auto; background: #ddd; line-height: 118px; text-align: center; } </style>
さいごに
以上、サイトの滞在時間を簡単に増やせる可能性があるので、是非ブログに実装してみてはいかがでしょうか。