Web

WordPressでブログを作るときに前後の記事（前の記事へ、次の記事へ）を画像付きで表示する方法

  /

こんにちわ。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>

さいごに

以上、サイトの滞在時間を簡単に増やせる可能性があるので、是非ブログに実装してみてはいかがでしょうか。

RELATED POST