投稿で「改ページ」を使えるようにする ：wp_link_pages

投稿で「改ページ」を使えるようにする ：wp_link_pages

lionmediaではどうやら「改ページ」に対応していないようなので、使えるようにしたい！
ページングはナンバーだけとか、次へ・前へだけのものもあるけど、両方入ってるのをつけたい。

目次

デフォルト表示

改ページのページャーを表示するだけなら、表示したい位置（ループ内）に テンプレートタグを入れればokだけど、カスタマイズしない状態だとこんな感じ。投稿ページなのに固定ページって出てくる。

テンプレートタグ

<?php wp_link_pages(); ?>

出力

カスタマイズ

ページ数も次へ前へも出してデザインを入れる。

preview

prev 1 2 3 4next

function.php

add_filter('wp_link_pages_args','add_next_and_number');
function add_next_and_number($args){
    if($args['next_or_number'] == 'next_and_number'){
        global $page, $numpages, $multipage, $more, $pagenow;
        $args['next_or_number'] = 'number';
        $prev = '';
        $next = '';
        if ( $multipage ) {
            if ( $more ) {
                $i = $page - 1;
                if ( $i && $more ) {
                    $prev .= _wp_link_page($i);
                    $prev .= $args['link_before']. $args['previouspagelink'] . $args['link_after'] . '</a>';
                }
                $i = $page + 1;
                if ( $i <= $numpages && $more ) {
                    $next .= _wp_link_page($i);
                    $next .= $args['link_before']. $args['nextpagelink'] . $args['link_after'] . '</a>';
                }
            }
        }
        $args['before'] = $args['before'].$prev;
        $args['after'] = $next.$args['after'];   
    }
    return $args;
}

single.php：115行目あたり？

wp_link_pages はループ内に入れる。</section>　の上でも下でも大丈夫そう。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <section class="content">
	    	<?php the_content(); ?>
      </section>
		<?php
			wp_link_pages(array(
				'before' => '<div class="link_page_navi">',
				'after' => '</div>',
				'link_before' => '',
				'link_after' => '',
				'next_or_number' => 'next_and_number',
				'nextpagelink' => __('next'),
				'previouspagelink' => __('prev'),
				'pagelink' => '%',
				'echo' => 1)
			);
		?>
<?php endwhile; endif; ?>

SCSS/CSS

.link_page_navi{
	width: 100%;
	margin: 40px auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
}
.post-page-numbers{
	display: inline-block;
	padding: 10px 15px;
	border: 1px solid #ddd;
	margin-left: -1px;
	margin-top: -1px;
	color:  rgba(231, 60, 126, 0.8) !important;
	transition: all 300ms 0s ease;
}
.post-page-numbers.current,
a.post-page-numbers:hover{
        background: rgba(231, 60, 126, 0.8);
        color: #FFF !important;
        border: 1px solid rgba(231, 60, 126, 0.8);
}

参考サイト

https://thewppress.com/libraries/insert-pagebreak-and-display-page-links/

1 2next