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

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 9 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

ページの中でフッターの手前に表示されるLightningのページナビって正直、ダサい
PreviousとNEXTって感じで上下にリンクだけ?
アイキャッチ画像も表示されない状態
コレは、何とかせなアカンって思って今回のカスタマイズになりました。
まぁ、正直ここまでLightningだけに嵌るとは思いませんでしたが・・・
カスタマイズするには、PHPファイルとスタイルシートファイルを改造します。
コピペだけですが、やり方を間違えると記事の表示ができなくなります。
また、テーマの編集からやるのではなくローカルでテキストエディターでの編集をオススメします。となると当然、FTPソフトでのアップロードが必要になります。もちろん、編集するテーマファイルは、子テーマのファイルですよ。Lightningは、頻繁にアップデートあるのでテーマファイル編集するとアップデートの度に編集することになりますので・・・
またこのカスタマイズについてはLightningだけでなくStinger8でも使うことができました。
 

 目 次 

アイキャッチ画像とは?

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

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

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