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–> での表示をカスタマイズ