Lightningでページ分割した時のページネイションを装飾する
この記事を読むのに必要な時間は約 8 分です。
目 次
Automatically Paginate Posts
長い記事を数ページに分割できるプラグインです。
プラグイン→新規追加で「Automatically Paginate Posts」を検索したらすぐに出てきますよ。上記のようにテストされていませんと出てきますが、WordPress5.0.3 Lightning6.6.6で問題なく動作しております。
検索したら上記のプラグインがすぐ出てきます。今すぐインストール→有効化ですぐに使用可能になります。
使い方は、任意のところで改ページボタンをクリックしても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になっているか確認してください。
Windowsの場合によく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ソフトでアップロード
[wc_row] [wc_column size=”one-half” position=”first”]
[/wc_column]
[wc_column size=”one-half” position=”last”]
FTPソフトでカスタマイズしたファイルを子テーマフォルダにアップロードします。
アップロードするフォルダ
/wp-content/themes/子テーマ名/
FTPの使い方
FTPでアップロードできたら作業終了です。
早速、カスタマイズされたページを確認しましょう。
[/wc_column]
[/wc_row]
できあがり
どうでしょう、できました？
スタイルシートの色の変更は、1つに対して2箇所です。通常時とマウスが乗った時の２つあると覚えておいてください。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
Evernoteに保存