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

by
Lightning
（更新: 2024年10月7日）

Lightningの記事送り、デザインが……

天満川鈴 WRITTEN BY 天満川鈴
スポンサーリンク

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

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

Lightningのデフォルト

シンプルですよね……。

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

カスタマイズ後

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

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

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

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

参考記事

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

意識低い系主婦がシンプルライフを目指すブログ
http://shufulife.com

１　子テーマの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>

２　子テーマの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>

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

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

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

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

まとめ

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

スポンサーリンク
天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

X CodePen Amazon
RECOMMENDED INFRASTRUCTURE
ConoHa 公式サイトへ

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る
× 閉じる