今村さんありがとうございます！
またひとつ夢が叶いました。
これ、結構やりたい方多いんじゃないかと思ったので書きました / 【WordPressで「前の記事」「次の記事」にサムネイルを付けたり、記事が存在しない時の空欄を有効活用しよう】 http://t.co/e0d22Cwt5l
— bouya Imamura (@s56bouya) June 22, 2013
うぉおおおーーーっ！これ、やりたかったヤツです！！ / 【WordPressで「前の記事」「次の記事」にサムネイルを付けたり、記事が存在しない時の空欄を有効活用しよう】｜今村だけがよくわかるブログ – http://t.co/Wr0ylu3AJn
— 星影 (@unsoluble_sugar) June 22, 2013
同じカテゴリー内の前後の記事を表示するってやつは、僕もやっていたんですけどね。
でもやっぱりサムネイル表示したいなぁ…get_the_post_thumbnail()使えばできるかなぁ…とは思っていたところ、今村さんがやってくれました！ヽ(=´▽`=)ﾉ
さっそく実装！
さっそく今村さんのコードを拝借して、CSSを当ブログ仕様に適用。
前後の記事がサムネイル付きで表示
前後の記事がサムネイル付きで表示されました！すげぇーーー！！
次の記事がない場合はホームへのリンクを表示
次の記事がない場合は、ホームへのリンクが表示されます！
前の記事がない場合も同様です。前後の記事どちらもない場合は、このブロックは表示されません。
サムネイル画像のサイズを調整
今村さんのコードを見ると、get_the_post_thumbnail() の第２引数に「thumbnail」を指定されていました。
get_the_post_thumbnail($prevpost->ID, 'thumbnail')
get_the_post_thumbnail() の第２引数に「thumbnail」を指定した場合、メディア設定の「サムネイルのサイズ」で設定したサイズで画像が表示されます。
サムネイルのサイズ
これは記事中に複数の画像を「ギャラリー」表示する際の画像サイズとなります。当ブログでは記事エリアの幅を広めにしているため、以下の記事のようにサムネイルのサイズを「230×230」とやや大きめに設定しています。
[WordPress] WP jQuery Lightboxでギャラリーの画像にもlightboxを適用させる方法 | Time to live forever
「次の記事」「前の記事」のエリアにこのサイズの画像が出力されてしまうと、記事タイトルの文字がキツキツに詰められてしまうため、画像の表示サイズを小さくすることにしました。
get_the_post_thumbnail() の第２引数で出力される画像のサイズを指定
get_the_post_thumbnail() の第２引数には「thumbnail」や「medium」、「large」といった引数を指定できます。「medium」、「large」を指定した場合は、「thumbnail」と同様にメディア設定の「中サイズ」「大サイズ」で設定された画像サイズが適用されます。
また、この他に任意のサイズを指定することもできます。
今回は表示される画像を小さめにして、タイトル文字を表示するスペースを確保したいので、表示されるサムネイル画像のサイズを100pxに指定してみました。
変更前
get_the_post_thumbnail($prevpost->ID, 'thumbnail')
変更後
get_the_post_thumbnail($prevpost->ID, array(100,100))
当ブログではこれで良い感じに収まりました。
ギャラリー表示の際の画像サイズを変更したくないという場合は、get_the_post_thumbnail() で出力する画像のサイズを指定するのが良さそうです。
最終的に実装したコードは以下のとおりです。
<!--▼前の記事、次の記事▼-->
<div class="navigation clearfix">
<?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>« 前の記事</dt><dd><a href="' . get_permalink($prevpost->ID) . '"><span class="thumb">' . get_the_post_thumbnail($prevpost->ID, array(100,100)) . '</span><span class="title">' . get_the_title($prevpost->ID) . '</span></a></dd></dl>';
} else { //前の記事が存在しないとき
echo '<div class="alignleft nopost"><a href="' . home_url() . '">HOME</a></div>';
}
if ( $nextpost ) { //次の記事が存在しているとき
echo '<dl class="alignright"><dt>次の記事 »</dt><dd><a href="' . get_permalink($nextpost->ID) . '"><span class="thumb">' . get_the_post_thumbnail($nextpost->ID, array(100,100)) . '</span><span class="title">' . get_the_title($nextpost->ID) . '</span></a></dd></dl>';
} else { //次の記事が存在しないとき
echo '<div class="alignright nopost"><a href="' . home_url() . '">HOME</a></div>';
}
?>
</div>
<?php } ?>
</div>
<!--▲前の記事、次の記事▲-->
コメント