Lightningでページ分割した時のページネイションを装飾する

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

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

Lightningで長い記事を書いたときにページを分割するには、Automatically Paginate Postsを使うのですが、そのまま使ったらダサいし、気づかれないこともあるということでちょっと装飾してみようと思います。
今回は、スタイルシートだけでなくPHPファイルもイジるので子テーマを使っていることが前提です。
 

 目 次 

Automatically Paginate Posts

Automatically Pagenate Posts
長い記事を数ページに分割できるプラグインです。
プラグイン→新規追加で「Automatically Paginate Posts」を検索したらすぐに出てきますよ。上記のようにテストされていませんと出てきますが、WordPress5.0.3 Lightning6.6.6で問題なく動作しております。
Automatically Paginate Posts
検索したら上記のプラグインがすぐ出てきます。今すぐインストール→有効化ですぐに使用可能になります。
使い方は、任意のところで改ページボタンをクリックしてもOKです。
自動の場合は、設定してください。
設定は、下記のページで
Automatically Paginate Posts設定
ページネイション
上記のようなページネーションが初期設定になります。
これは、さすがにダサくて気づかれにくいということでカスタマイズしてみました。

PHPの改造

改造するPHPは、single.phpです。Lightningの親テーマから子テーマフォルダにコピーして貼り付けます。

元のPHPソース
single.php 27行目~34行目
<?php
$args = array(
‘before’ => ‘<nav class=”page-link”><dl><dt>Pages :</dt><dd>’,
‘after’ => ‘</dd></dl></nav>’,
‘link_before’ => ‘<span class=”page-numbers”>’,
‘link_after’ => ‘</span>’,
‘echo’ => 1 );
wp_link_pages( $args ); ?>

上記のソースを削除して下記のソースへ書き換えします。

カスタマイズPHPソース
single.php
<?php
$args = array(
‘before’ => ‘<div class=”next-page-link”>’,
‘after’ => ‘</div>’,
‘next_or_number’ => ‘next’,
‘nextpagelink’ => __( ‘次のページを読む >>’ ),
‘previouspagelink’ => __( ” ),
);
wp_link_pages($args); ?><?php
$args = array(
‘before’ => ‘<div class=”page-link”>’,
‘after’ => ‘</div>’,
‘link_before’ => ‘<span>’,
‘link_after’ => ‘</span>’,
);
wp_link_pages($args); ?>

編集時に文字コードがちゃんとUTF-8になっているか確認してください。
Windowssの場合によくShift-JISになっていることが多いのでその場合は、文字化けします。

スタイルシートを装飾

PHPだけでは、よろしくないのでスタイルシートもカスタマイズします。
色の部分だけ自分のサイトに合うようにカスタマイズしてください。

スタイルシートソース
style.css
/* 分割後のページネイション */
/* 上段部分 */
.next-page-link {
width:100%;
margin: 40px 0 10px 0;
text-align:center;
border-radius:30px;
background: #191970;
}
.next-page-link a {
display:block;
margin:5px 0;
color: #fff;
text-decoration:none;
}
.next-page-link:hover {
background: #555;
}/* 下段部分 */
.page-link{
margin: 10px 0 40px 0;
text-align:center;
}
.comment-page-link{
margin: 1em 1em 3em;
text-align: center;
}
.page-link span,
.comment-page-link span,
.comment-page-link a{
margin-right: 3px;
padding: 5px 8px;
border: 1px solid #000;
background: #191970;
border-radius:5px;
color: #fff;
}
.page-link a span,
.comment-page-link a{
background: #0000ff;
color:#fff;
}
.page-link a{
border-bottom: none;
color: #fff;
text-decoration:none;
}.page-link a span:hover,
.comment-page-link a:hover{
background: #191970;
color: #fff;
}

スタイルシートもコピペでOKになっていますが、赤字のところは色に関係するところです。その部分の修正できたらstyle.cssの末尾にコピペして次の作業に移ります。
色コードは、下記を参考にしてください。
→ WEBカラー見本

FTPソフトでアップロード

FFFTP
FTPソフトでカスタマイズしたファイルを子テーマフォルダにアップロードします。
アップロードするフォルダ
/wp-content/themes/子テーマ名/
FTPの使い方
FTPでアップロードできたら作業終了です。
早速、カスタマイズされたページを確認しましょう。

 

できあがり

ページネーション
どうでしょう、できました?
スタイルシートの色の変更は、1つに対して2箇所です。通常時とマウスが乗った時の2つあると覚えておいてください。

 


 

チャンネル登録

 

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

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

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