WordPress 記事の分割をしてみよう


ページ送りのボタンについて

記事を分割したときに作成される、ページ送りのボタンを入れるには、
テンプレート(記事の場合はsingle.php)にコードを追加します。

HTML

<php wp_link_pages();>


<??php the_content(); ?>の下あたりでいいかと思います。

これだと「ページ: 1 2」ととてつもなくシンプルなので、上記のコードを少し変更します。

HTML

<?php
$defaults = array(
 'before' => '<div class="page-links">',
 'after' => '</div>',
 'link_before' => '',
 'link_after' => '',
 'next_or_number' => 'number',
 'separator' => ' ',
 'nextpagelink' => __( 'Next page' ),
 'previouspagelink' => __( 'Previous page' ),
 'pagelink' => '<span>%</span>',
 'echo' => 1
);
wp_link_pages( $defaults );
?>


ちなみに、CSSはこんな感じです。

CSS
.page-links{
	clear:both;
	text-align:center;
	margin:0 0 40px 0;
	padding:10px;
}

.page-links:after{
	content:"";
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
}

.page-links span{
	padding:8px 12px;
	margin:5px;
	border:1px solid #A4D3CD;
	background:#A4D3CD;
	color:#837E76;
}

.page-links a span{
	border:1px solid #837E76;
	color:#837E76;
	background:transparent;
}

.page-links a:hover span{
	border:1px solid #1ebeb4;
	color:#1ebeb4;
}

使用頻度は少ないかもしれませんが、ながーーい記事になってしまいそうなときに便利だと思います。

<php wp_link_pages();>の詳しい使い方については、codexのページをご覧ください。

テンプレートタグ/wp link pages
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_link_pages