nextpageの見た目を変えてみる
WrodPressの機能で、文章中に「<!--nextpage-->」を入れると、記事がページ分割されるのがあるんだよ。でも、デフォルトだとかなりショボイ感じになってしまうんだ。今回、自分のホームページの「<!--nextpage-->」の見た目を変えてみたので、そのやり方を上げてみるよ。
関数を追加する
参考サイトによると、「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」ってファイルが準備されているから、このファイルを編集してね。
