KUSANAGI MAGAZINEで「きもおたわーどぷれす。」が紹介されました! クリックで公式サイトが開きます。

nextpageで分割したときのページナビをCSSで装飾する ~Lightningカスタマイズ第3回

この記事は約2分で読めます。
記事内に広告が含まれています。

記事をページ分割したら、ページナビがどこにあるか見つけられない……

スポンサーリンク

はじめに

子テーマ を前もって用意してください。
子テーマの重要性については、こちらの記事を御参照ください。

WordPressでカスタマイズするなら、子テーマは重要だよ
カスタマイズに失敗してファイルめちゃめちゃになって映らなくなっちゃった! あらあら……カスタマイズするなら「子テーマ」を使わないと 子テーマとは? テーマをカス...

その上でsingle.php(投稿ページのテンプレートファイル)などをフォルダ直下にコピーしておいてください。
特に記載なき場合は「子テーマの」single.phpのソースを変更します。

スポンサーリンク

Lightningのページナビ

テーマ標準のページナビはこちら。

 

わかるか!

なので、こちらの記事で紹介されていた素晴らしいページナビと変えちゃいます。

【Simplicity】nextpageで記事を分割した際の改ページボタンをカスタマイズ!
WordPressで「nextpage」タグを入れると記事を簡単に分割することができます。その際に表示される改ページボタンを記事内でもう少し目立たせたかったので...
スポンサーリンク

変更後のページナビ

一気に見やすく、操作しやすくなります。

 

スポンサーリンク

カスタマイズ

1 single.phpから以下のコードを探して削除する

	<?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 ); ?>

2 参考ページのhtmlをsingle.phpに、CSSをstyle.cssにコピペする

ページナビの配置は同じ場所(記事直下)がベストと考えます

ナビに気づかないと記事が終わりと思って離脱する可能性があります
もしアドセンスをナビより先に配置する場合は、記事が続くことを明示した方がいいでしょう

スポンサーリンク

まとめ

元あったコードを削除して、新しいコードを貼り付けるだけでOK
この調子でどんどん行きましょう!

サイトを始めたい・引っ越したい方へ

おすすめレンタルサーバー「ConoHa WING」
Webサーバー処理速度 国内最速!
サイト管理・カスタマイズのタイパも抜群!
自動化AIのWEXALによって他社より負担を減らせます
各種キャンペーン施策によりコスパも抜群!
ConoHaに初めて入会かつ12か月以上のWINGパックなら
下のボタン経由で契約すると最大5000円の割引が受けられます

この記事を書いた人

素人の備忘録です。
素人がゆえにトラブルにぶつかりまくってきたので、同じように困った方の役に立てたらいいなと思ってます。
8年来のKUSANAGI推し。

元公安調査庁職員、発達障害(ADHD)

天満川 鈴をフォローする
Lightning
タイトルとURLをコピーしました