記事をページ分けするときのソースタグ＆表示カスタマイズ

2014年9月7日2015年1月29日

表示カスタマイズ

下記ブログ記事を参考にコピペさせていただきました。
記事の分割<!–nextpage–> での表示をカスタマイズ　｜　Yoshihara.LaB

下記ソースをfunctions.phpに追記します。

function custom_wp_link_pages() {
 
$defaults = array(
 'before' => '<div class="pagesprit"><div class="page-numbers">',
 'after' => '</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');

下記ソースを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;
}

ここまでで、無事カスタマイズが成功。

左端に寄るのを中央にしたくて、下記をstyle.cssに追記。

.page-numbers {
	text-align: center;
}

真ん中に寄りました。