Nextpageの見た目を変えてみる

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

関数を追加する

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

1. WordPressのダッシュボードから、「外観」→「テーマ編集」を選んでね。
2. 画面右側の一覧から「テーマのための関数(functions.php)」を選んでね。
3. ソースの一番下（「?>」の手前）に以下を追加してね。

   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の特性かもしれないです…。）

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

見た目の調整

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

1. WordPressのダッシュボードから、「外観」→「テーマ編集」を選んでね。
2. 画面右側の一覧から「スタイルシート(style.css)」を選んでね。
3. ソースの一番下に以下を追加してね。好みに合わせて変更もありだよ。

   .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;
   }
   

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

補足

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

pagesprit

ページ切り替え部分の全体の見た目を調整する部分だよ。

page-numbers a

リンクが張られるページ番号（現在いるページ以外）の見た目を調整する部分だよ。

page-numbers a：hover

リンクが張られるページ番号（現在いるページ以外）にマウスカーソルを合わせた場合の見た目を調整する部分だよ。

numbers

ページ番号そのものの見た目を調整する部分だよ。

STINGER3のスマホサイトの場合

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

参考サイト

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