Lightningのページナビをカスタマイズ

この記事を読むのに必要な時間は約 8 分です。

FTPソフトでのアップロードが必要になります。もちろん、編集するテーマファイルは、子テーマのファイルですよ。Lightningは、頻繁にアップデートあるのでテーマファイル編集するとアップデートの度に編集することになりますので・・・  

目 次

アイキャッチ画像とは?

カラー見本 アイキャッチ画像ってご存知ですか? 登録しておくとSNSにシェアしたときやされたときにOGP画像として表示されることもあります。 そうするには、設定も必要ですが・・・ アイキャッチ画像とは、投稿ページの記事タイトル下に表示される画像のことです。 SNSにシェアされることを考えると4:3の画像を使用するまたは、大きさを1280px X 720pxにしておくとFacebookなどでキレイに表示されております。 これは、是非知っておいてください。

PHPのカスタマイズ

標準ページナビ いろいろ機能の多いLightningなのにこんなページナビになっているのです。無料なので仕方ないと言えばそうかもしれませんが・・・ 両サイドにわけて表示した上でアイキャッチ画像も表示したいと思うのです。 というわけでそのプログラムが書かれたPHPを探すことに・・・ それが、single.phpなのです。 single.php 赤枠の部分がページナビの部分なのですが、この部分のPHPは実はWordPressで用意されたコードなのです。 テーマ特有の部分ではありません。 なので、同じようなタイプであればカスタマイズ方法は、同じでOKですよ! 赤枠の部分のソースを改造します。
single.php
<nav> <div class=”post-navi”> <?php $prevpost = get_adjacent_post(false, ”, true); //前の記事 $nextpost = get_adjacent_post(false, ”, false); //次の記事 if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき ?> <?php if ( $prevpost ) { //前の記事が存在しているとき echo ‘<div class=”previous”><a href=”‘ . get_permalink($prevpost->ID) . ‘” title=”‘ . get_the_title($prevpost->ID) . ‘” class=”previous”> <p><i class=”fas fa-angle-double-left”></i>PREV</p> ‘ . get_the_post_thumbnail($prevpost->ID, array(200,150)) . ‘ <p>’ . get_the_title($prevpost->ID) . ‘</p></a></div>’; } else { //前の記事が存在しないとき echo ‘<div class=”previous”><a href=”‘ .home_url(‘/’). ‘”><div id=”prev_next_home”><i class=”fa fa-home”></i> </div></a></div>’; } if ( $nextpost ) { //次の記事が存在しているとき echo ‘<div class=”next”><a href=”‘ . get_permalink($nextpost->ID) . ‘” title=”‘. get_the_title($nextpost->ID) . ‘” class=”next”> <p>NEXT<i class=”fas fa-angle-double-right”></i></p> ‘ . get_the_post_thumbnail($nextpost->ID, array(200,150)) . ‘ <p>’. get_the_title($nextpost->ID) . ‘</p></a></div>’; } 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> </nav>
6行しかなかったのですが、かなり行数増えた感ありますね。 赤枠の部分にコピペします。 Windowsの方は、メモ帳で編集しないでください。 メモ帳で編集したら文字コードがShift-JISになります。 WordPressは、文字コードがUTF-8になってます。上の画像ではTerapadで開いてます。

スタイルシートのカスタマイズ

標準のページナビでは、上下に表示されていましたが前の記事を左に次の記事を右に表示しようと思います。もちろん、アイキャッチ画像付きです。
style.css
/* Page Navi */ .post-navi {overflow: hidden; padding: 12px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;} .previous a {position: relative; float: left; width: 50%;} .next a {position: relative; float: right; width: 50%; text-align: right;}
今回は、ページネイションの時に比べたらスタイルシート少な目ですが・・・ これでちゃんと表示されるはず・・・

FTPソフトでアップロード

FTPアップロード 編集したsingle.phpとstyle.cssを画像のようにドラッグしてアップロードします。 上書きするだけでOKです。 アップロード完了したら表示確認しましょう。

表示状態

ページナビカスタマイズ後カスタマイズ完了したら上記のようになりました。 いかがですか? うまくできました? できなかった場合にコピペしたソースをもう一度見直してみてください。 おかしくない場合は、文字コードをチェックしてみましょう。  

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
]]>

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!