nextpageの見た目を変えてみる

WrodPressの機能で、文章中に「」を入れると、記事がページ分割されるのがあるんだよ。でも、デフォルトだとかなりショボイ感じになってしまうんだ。今回、自分のホームページの「」の見た目を変えてみたので、そのやり方を上げてみるよ。

関数を追加する

参考サイトによると、「wp_link_pages_args」をフックして関数を呼び出すって書いてあるんだけど…まだ僕には良くわからない…（笑）
正しいかどうか分からないけど…WordPressの「wp_link_pages」関数を呼び出す前に、引数のデフォルト配列を書き換えている感じかな…

WordPressのダッシュボードから、「外観」→「テーマ編集」を選んでね。
画面右側の一覧から「テーマのための関数(functions.php)」を選んでね。

ソースの一番下（「?>」の手前）に以下を追加してね。

function custom_wp_link_pages() {
	$defaults = array(
		'before' => '<div class="pagesprit"><div class="page-numbers">',
		'after' => '</div></div>',
		'link_before' => '',
		'link_after' => '',
		'next_or_number' => 'number',
		'separator' => ' ',
		'nextpagelink' => __( 'Next page' ),
		'previouspagelink' => __( 'Previous page' ),
		'pagelink' => '<span class="numbers">%</span>',
		'echo' => 1
	);
	return $defaults;
}
add_filter( 'wp_link_pages_args', 'custom_wp_link_pages');

（参考サイトのコードを少し修正させていただきました…「'after' => '</div>',」だと画面が崩壊したので…。STINGER3の特性かもしれないです…。）

画面下の「ファイルを更新」ボタンをクリックしてね。

見た目の調整

divタグでclassを追加できたので、これに対してスタイルを指定するよ。

WordPressのダッシュボードから、「外観」→「テーマ編集」を選んでね。
画面右側の一覧から「スタイルシート(style.css)」を選んでね。

ソースの一番下に以下を追加してね。好みに合わせて変更もありだよ。

.pagesprit {
   clear: both;
   color: #27364f;
   line-height:1.714285714;
 
}
.page-numbers a {
    display:inline-block;
    border:solid 1px #ccc;
    border:solid 0.0714285714285714rem #ccc;
    text-decoration:none;
}
.page-numbers a:hover {
    color:white;
    background: #27364f;
}
.numbers {
    margin: 0 8px;
    margin: 0 0.5714285714285714rem;
}

画面下の「ファイルを更新」ボタンをクリックしてね。

補足

cssが分かっている人は不要かもしれないけど…ちょっと補足しておくね。

pagesprit: ページ切り替え部分の全体の見た目を調整する部分だよ。
page-numbers a: リンクが張られるページ番号（現在いるページ以外）の見た目を調整する部分だよ。
page-numbers a：hover: リンクが張られるページ番号（現在いるページ以外）にマウスカーソルを合わせた場合の見た目を調整する部分だよ。
numbers: ページ番号そのものの見た目を調整する部分だよ。

STINGER3のスマホサイトの場合

STINGER3はスマホ用に「smart.css」ってファイルが準備されているから、このファイルを編集してね。

参考サイト

YOSHIHARA.LAB - 記事の分割<!–nextpage–> での表示をカスタマイズ