小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

前後記事送りをサムネイル付にして、同一カテゴリ内で移動できるようにする ~Lightningカスタマイズ第7回

Lightning
この記事は約4分で読めます。

質問者の写真

Lightningの記事送り、デザインが……
 
スポンサーリンク
この記事を読む方へのオススメ

今回で記事下のカスタマイズは終わりです

そしてコピペで終わります。
記念すべき最後の記事は、恐らく誰もが一番下に置くであろう「記事の前後送り」です。

Lightningのデフォルト

シンプルですよね……。

これでは見落とす、あるいは「次を読む!」って意欲も湧かなさそう。

カスタマイズ後

というわけで、こんな感じにします。

アイキャッチが同じことからお気づきかもですが、本サイトは「同一カテゴリ内の記事送り」にしています。(小説サイトなので、そうしないと不都合が生じる)

なお、次の記事がない場合はこうなります。

スポンサーリンク

「前のページ・後のページ」のカスタマイズ

参考記事

以下の記事を参考にさせていただきました。

【WordPress】前の記事・次の記事にサムネイル画像を表示する | ShufuLife
画像のように前の記事と次の記事のナビゲーションにサムネイル画像を表示する方法のご紹介です。最新の記事と最古の記事には【ホームへ戻る】のボタンを設置しています。少しでもサイトを訪れてくださった方の滞在時間を延ばすのが目的で

1 子テーマのsingle.phpから次のコードを削除する

  <ul class="pager">
    <li class="previous"><?php previous_post_link( '%link', '%title' ); ?></li>
    <li class="next"><?php next_post_link( '%link', '%title' ); ?></li>
  </ul>

2 子テーマのsingle.phpに次のコードを貼り付ける

<div id="prev_next" class="clearfix">  
<?php
$prevpost = get_adjacent_post(true, '', true); //前の記事
$nextpost = get_adjacent_post(true, '', false); //次の記事
if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<?php
if ( $prevpost ) { //前の記事が存在しているとき
echo '<a href="' . get_permalink($prevpost->ID) . '" title="' . get_the_title($prevpost->ID) . '" id="prev" class="clearfix">
<div id="prev_title">PREV</div>
' . get_the_post_thumbnail($prevpost->ID, array(100,100)) . '
<p>' . get_the_title($prevpost->ID) . '</p></a>';
} else { //前の記事が存在しないとき
echo  '<div id="prev_no"><a href="' .home_url('/'). '"><div id="prev_next_home"><i class="fa fa-home"></i>
</div></a></div>';
}
if ( $nextpost ) { //次の記事が存在しているとき
echo '<a href="' . get_permalink($nextpost->ID) . '" title="'. get_the_title($nextpost->ID) . '" id="next" class="clearfix">  
<div id="next_title">NEXT</div>
' . get_the_post_thumbnail($nextpost->ID, array(100,100)) . '
<p>'. get_the_title($nextpost->ID) . '</p></a>';
} else { //次の記事が存在しないとき
echo '<div id="next_no"><a href="' .home_url('/'). '"><div id="prev_next_home"><i class="fa fa-home"></i>
</div></a></div>';
}
?>
<?php } ?>
</div>

同一カテゴリでなく、全ての記事送りにしたい場合は3~4行目を次の記述に変えて下さい。

$prevpost = get_adjacent_post(false, '', true); //前の記事
$nextpost = get_adjacent_post(false, '', false); //次の記事

3 子テーマのstyle.cssにコードを貼り付ける

参考サイト様のそのままですので、そちらを御覧下さい。

スポンサーリンク

まとめ

解答者の写真
今回で記事下のカスタマイズは終わります
 
アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Lightning
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました