前までは、本当に質素に実装していたのですが、最近ある方の実装がとても素敵だったので、早速このブログにも実装してみました。
参考ブログは、こちら
今までは、こんな感じで、
次の記事、前の記事がどういうものなのかという説明もなく、次の記事へ・前の記事へを設置していました。
現在はこんな感じです。
実装
参考サイトでは、同じカテゴリ内の『前の記事』『次の記事』を表示させていますが、このブログでは、カテゴリ関係なく表示させたかったので、少し変更しました。
変更箇所は2点
- 2､3行目・・カテゴリではなく全部の記事を対象
- 12､21行目・・サムネイル指定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php $prevpost = get_adjacent_post(false, '', true); //前の記事 $nextpost = get_adjacent_post(false, '', false); //次の記事 if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき ?> <div class="cat_paging"> <?php if ( $prevpost ) { //前の記事が存在しているとき echo '<dl class="alignleft"> <dt>前の記事(Previous)</dt> <dd><a href="' . get_permalink($prevpost->ID) . '"> <span class="thumb">' . get_the_post_thumbnail($prevpost->ID, 'mini-image') . '</span> <span class="title">' . get_the_title($prevpost->ID) . '</span></a></dd></dl>'; } else { //前の記事が存在しないとき echo '<div class="alignleft nopost"><a href="' . network_site_url('/') . '">HOMEへ戻る</a></div>'; } if ( $nextpost ) { //次の記事が存在しているとき echo '<dl class="alignright"> <dt>次の記事(Next)</dt> <dd><a href="' . get_permalink($nextpost->ID) . '"> <span class="thumb">' . get_the_post_thumbnail($nextpost->ID, 'mini-image') . '</span> <span class="title">' . get_the_title($nextpost->ID) . '</span></a></dd></dl>'; } else { //次の記事が存在しないとき echo '<div class="alignright nopost"><a href="' . network_site_url('/') . '">HOMEへ戻る</a></div>'; } ?> </div> <?php } ?> |
サムネイルを指定しなくてもいい場合（デフォルト）は、12､21行目のところのmini-imageをthumbnailにすればOKです。
あとは、CSSで装飾をしてオシマイです。
さいごに
そんなに重要視していなかった「前の記事」「次の記事」のリンク部分ですが、記事が存在しない時の空欄を有効活用しようのくだりをみて、あぁ！！それいいね！！（イイネボタン連打）と思ったのが、今回実装したきっかけです。
実装してみて、これはカスタマイズの仕方によっては、かなり面白くなるなぁと感じております。
とてもいいきっかけを頂けたことに感謝です！
