Lightningでページ分割した時のページネイションを装飾する
この記事を読むのに必要な時間は約 8 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
Lightningで長い記事を書いたときにページを分割するには、Automatically Paginate Postsを使うのですが、そのまま使ったらダサいし、気づかれないこともあるということでちょっと装飾してみようと思います。
今回は、スタイルシートだけでなくPHPファイルもイジるので子テーマを使っていることが前提です。
Automatically Paginate Posts
長い記事を数ページに分割できるプラグインです。
プラグイン→新規追加で「Automatically Paginate Posts」を検索したらすぐに出てきますよ。上記のようにテストされていませんと出てきますが、WordPress5.0.3 Lightning6.6.6で問題なく動作しております。
検索したら上記のプラグインがすぐ出てきます。今すぐインストール→有効化ですぐに使用可能になります。
使い方は、任意のところで改ページボタンをクリックしてもOKです。
自動の場合は、設定してください。
設定は、下記のページで
Automatically Paginate Posts設定
上記のようなページネーションが初期設定になります。
これは、さすがにダサくて気づかれにくいということでカスタマイズしてみました。
PHPの改造
改造するPHPは、single.phpです。Lightningの親テーマから子テーマフォルダにコピーして貼り付けます。
<?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
$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だけでは、よろしくないのでスタイルシートもカスタマイズします。
色の部分だけ自分のサイトに合うようにカスタマイズしてください。
/* 分割後のページネイション */
/* 上段部分 */
.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ソフトでアップロード
できあがり
どうでしょう、できました？
スタイルシートの色の変更は、1つに対して2箇所です。通常時とマウスが乗った時の２つあると覚えておいてください。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存