【WordPress】「前の記事」「次の記事」のリンクにサムネイルを付ける

by
このエントリーをはてなブックマークに追加

130715-0001

【WordPressで「前の記事」「次の記事」にサムネイルを付けたり、記事が存在しない時の空欄を有効活用しよう】
http://www.imamura.biz/blog/cms/wordpress/tips/12351

130715-0002

ほとんど、上記参考記事のまんまです。このサイトでは Something Fishy というテーマを使っておりますので、これに併せてカスタマイズしました。

media query を使って、ブラウザの幅が狭い場合は縦に並べています。

<?php
$prev_post = get_adjacent_post(false, '', true); // 前の記事
$next_post = get_adjacent_post(false, '', false); // 次の記事
$thumb_size = array(300, 200);

if ($prev_post or $next_post) :

    if ($prev_post) : ?>
<dl class="alignleft thumb-nav">
    <dt>前の記事(Previous)</dt>
    <dd>
        <a href="<?php echo get_permalink($prev_post->ID); ?>">
            <span class="thumb"><?php echo get_the_post_thumbnail($prev_post->ID, $thumb_size); ?></span>
            <span class="title"><?php echo get_the_title($prev_post->ID); ?></span>
        </a>
    </dd>
</dl>

    <?php else : ?>
<div class="alignleft nopost">
    <a href="<?php echo network_site_url('/entries.html'); ?>">投稿一覧へ戻る</a>
</div>
    <?php endif;

    if ($next_post) : ?>
<dl class="alignright thumb-nav">
    <dt>次の記事(Next)</dt>
    <dd>
        <a href="<?php echo get_permalink($next_post->ID); ?>">
            <span class="thumb"><?php echo get_the_post_thumbnail($next_post->ID, $thumb_size); ?></span>
            <span class="title"><?php echo get_the_title($next_post->ID); ?></span>
        </a>
    </dd>
</dl>

    <?php else : ?>
<div class="alignright nopost">
    <a href="<?php echo network_site_url('/entries.html') ?>">投稿一覧へ戻る</a>
</div>
    <?php endif;

endif; ?>

.thumb-nav {
    width: 45%;
}

.thumb-nav dt {
    background-color: transparent;
    border-bottom: 4px double gray;
    margin-bottom: 1em;
}

.thumb-nav dd {
    margin: 0;
}

.thumb-nav .thumb,
.thumb-nav .title {
    display: block;
}

.thumb-nav .thumb img {
    display: block;
    margin: 0 auto 10px;
}

.nopost {
    padding-top: 10px;
    width: 45%;
}

.nopost a {
    display: block;
    margin: 0 auto;
    width: 135px;
    line-height: 135px;
    height: 135px;
    border-radius: 1000px;
    border: 2px solid #39aca0;
    text-align: center;
    background-color: lightcyan;
}

@media only screen and ( max-width: 700px ) {
    .thumb-nav,
    .nopost {
        width: 100%;
        float: none;
    }

    .thumb-nav .title {
        text-align: center;
    }
}

コメントを残す