カスタム投稿タイプのページャー

ワードプレスのメモ

2020/09/19 現在のソースと大分違っていたので全文書き換え。

タイトルは「カスタム投稿タイプの」となっていますが、標準投稿(post)も含んでいます。

  • シングル、アーカイブを一緒に記述。
  • シングルのページ送りを同じタームに限定する/しないを分岐する。
    この場合は最初に定義したタクソノミーに従います。
  • シングルのページ送りに投稿タイトルを表示する/しないを分岐する。

ソース

if( is_single() ){
	/* ---------- シングルのページャー ---------- */
	$taxonomies = get_post_taxonomies();
	foreach( $taxonomies as $tax ){
		$tax1 = $tax;
		break;
	}
	if( get_post_type() == 'news' ){
		$next_post = get_next_post();
		$previous_post = get_previous_post();
	}else{
		$next_post = get_next_post( 'in_same_term', '', $tax1 );
		$previous_post = get_previous_post( 'in_same_term', '', $tax1 );
	}
	if( !empty( $previous_post ) || !empty( $next_post ) ){/* 前後の投稿有無判定 */
		if( get_post_type() == 'post' ){/* ページタイトルを表示 */
			echo '<div class="pager-wrap"><div class="pager pager-single pager-have-title">';
			if( !empty( $previous_post ) ){
				echo '<a class="pager-single-prev" href="' . get_permalink( $previous_post->ID ) . '">' . $previous_post->post_title . '</a>';
			}
			if( !empty( $next_post ) ){
				echo '<a class="pager-single-next" href="' . get_permalink( $next_post->ID ) . '">' . $next_post->post_title . '</a>';
			}
			echo '</div></div>';
		}else{/* 「前へ/次へ」を表示 */
			echo '<div class="pager-wrap"><div class="pager pager-single pager-no-title">';
			if( !empty( $previous_post ) ){
				echo '<a class="pager-single-prev" href="' . get_permalink( $previous_post->ID ) . '">前の記事</a>';
			}
			if( !empty( $next_post ) ){
				echo '<a class="pager-single-next" href="' . get_permalink( $next_post->ID ) . '">次の記事</a>';
			}
			echo '</div></div>';
		}
	}
}else{
	/* ---------- アーカイブのページャー ---------- */
	the_posts_pagination(
		array(
			'end_size'	=> 1,
			'mid_size' => 1,
			'prev_text' => __( '<', 'textdomain' ),
			'next_text' => __( '>', 'textdomain' )
		)
	);
}

補足

3行目~:どのタクソノミによって絞り込むか

「重要な分類ほど先に書くでしょ」と決め込んで、最初に定義された(= functions.phpに最初に書かれた)タクソノミーを選んでいます。

投稿タイプごとに変える場合は、こんな感じでそれぞれ指定します。

if( get_post_type() == 'post' ){
	$tax1 = 'post_tag';
}elseif( get_post_type() == 'news' ){
	$tax1 = 'news_cat';
}

8行目:タームで絞り込むかどうか

例では、「news」投稿タイプはタームに限定せず、すべての投稿がページ送りされます。それ以外は3行目で抽出されたタクソノミーの同一ターム内でページ送りされます。

16行目:ページ送りの表記

標準投稿タイプ(post)では、「前へ/次へ」の代わりにページタイトルを表示します。そのほかの投稿タイプでは「前へ/次へ」を表示します。

38行目:アーカイブ用のページャー

以前は「paginate_links()」を使って書いていましたが、「the_posts_pagination()」を使うと非常にシンプルです。

ページングが発生すると「nav class=”navigation paginationrole=”navigation” ~」というラッパーで包んで表示してくれるのでCSSが素直に書けます。

nav.pagination	{
	text-align: center;
	margin-top: 2em;
}
.nav-links > * + *	{
	margin-left: 0.25em;
}
.nav-links span, .nav-links a	{
	display: inline-flex;
	line-height: 1;
	padding: 0.25em 0.5em;
	background-color: #EEE;
	border-radius: 0.2em;
}
.nav-links .current	{
	color: #FFF;
	background-color: #CCC;
}

41行目:現在のページ前後の表示数

「’mid_size’ => 1」だと、こんな感じ。
< 1 … 4 5 6 … 16 >
随分少ない気もしますが、、

「’mid_size’ => 2」だと、こう。
< 1 … 3 4 5 6 7 … 16 >
スマートフォンだと、多分1行に収まらない。