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

by
Lightning
（更新: 2024年10月7日）

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

天満川鈴 WRITTEN BY 天満川鈴
スポンサーリンク

はじめに

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

WordPressでカスタマイズするなら、子テーマは重要だよ | きもおた・わーどぷれす。
カスタマイズに失敗してファイルめちゃめちゃになって映らなくなっちゃった！ あらあら……カスタマイズするなら「子テーマ」を使わないと 子テーマとは？ テーマをカスタマイズするにはファイルの内容を書き換えます。 親テーマ（素のテーマ）をそのまま…
http://kimoota.net

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

Lightningのページナビ

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

 

わかるか！

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

【Simplicity】nextpageで記事を分割した際の改ページボタンをカスタマイズ！
WordPressで「nextpage」タグを入れると記事を簡単に分割することができます。その際に表示される改ページボタンを記事内でもう少し目立たせたかったので、今回は上段に「次のページを読む」というボタンを追加してみました。
http://rough-log.com

変更後のページナビ

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

 

カスタマイズ

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

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

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

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

まとめ

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

スポンサーリンク
天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

X CodePen Amazon
RECOMMENDED INFRASTRUCTURE
ConoHa 公式サイトへ

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る
× 閉じる