VK Blocks Pro の VK 投稿リストブロック でページ送りを表示する

VK 投稿リスト ブロックでページ送りを表示しようとする前に

投稿リストブロックにページ送りを表示するのは推奨していません。表示する場合は以下の事を理解した上で実施してください。

記事一覧のページは固定ページなどで自作しなくても標準で存在している

WordPressには特定の条件の記事一覧を表示する「アーカイブページ」が最初から存在します。例えば投稿タイプが「投稿」でカテゴリーが「お知らせ」の記事の一覧を表示するページです。カスタム投稿タイプ「event」であれば、{サイトURL}/?post_type=event や {サイトURL}/event/ などにアクセスすれば該当のページを表示できます。

投稿一覧のアーカイブページは自動で作られるので、投稿一覧ページを作るために固定ページに VK 投稿リスト ブロックを配置するという作り方は間違っています。

1ページ内の表示件数が異なる

アーカイブページで１ページに表示する件数と VK 投稿リスト ブロックで表示する投稿の件数は意図的に揃えない場合は異なる件数になる可能性が高いです。例えばアーカイブページでは１ページでの表示件数が10件に設定されているけれども、トップページにブロックで表示している投稿一覧は5件に設定してある場合、トップページでは5件までしか表示していないけれど、アーカイブページの２ページ目の開始記事は11件目になります。トップページにページ送りがあって２ページ目をクリックしても、２ページ名の開始記事が異なるのでユーザーに混乱を招きます。

ページ送りは同一ページ内でページ送りが行われる

例えばトップページの下部に投稿リストブロックが置いてあった場合、ページ送りがあったとして、２ページ目に移動してもアーカイブページの２ページ目に移動するわけではありません。トップページに配置したならあくまでトップページの2ページ目です。投稿リストの上の部分は普通に表示されて、その下部に表示される投稿リストの開始記事が変更されるだけです。

これは一般ユーザーから気づきにくく、「２ページ目を表示するリンクをクリックしたのに、また同じページ（トップページ）が表示された」という誤解を招きます。

推奨の対応方法

以上の事から、トップページや特定の固定ページに投稿リストブロックを配置した場合、その続きへのリンクは、ページ送りではなく、アーカイブページへのリンクするボタンを配置する事を強く推奨しています。

何がなんでもページ送りを表示したい場合

どうしてもページ送りを表示したい場合は以下のように書けば表示できます。

// すべての投稿リストブロックにページネーションを追加
add_filter(
	'vk_blocks_post_list_query_args',
	function( $args, $attributes ) {
		$args['no_found_rows'] = false;
		unset( $args['offset'] );
		return $args;
	},
	10,
	2
);
add_filter(
	'vk_posts_loop_options',
	function( $options ) {
			$options['pagination_display']  = true;
			$options['pagination_mid_size'] = 0;
		return $options;
	}
);

しかし、これでは全ての投稿リストにページ送りが表示されてしまいますので、特定のクラス名が指定されている投稿リストブロックのみページ送りを表示する場合は以下のような条件分岐を追加します。

// 改変する対象の投稿リストブロックの 高度な設定 > 追加クラスに sample が含まれている場合のみページネーションを追加
add_filter(
	'vk_blocks_post_list_query_args',
	function( $args, $attributes ) {    
		if ( isset( $attributes['className'] ) && strpos( $attributes['className'], 'sample' ) !== false ) {
		$args['no_found_rows'] = false;
		unset( $args['offset'] );
	}
		return $args;
	},
	10,
	2
);
add_filter(
	'vk_posts_loop_options',
	function( $options ) {
		// 改変する対象の投稿リストブロックの 高度な設定 > 追加クラスに sample が含まれている場合のみ改変
		preg_match( '/sample/', $options['class_loop_outer'], $matches, PREG_OFFSET_CAPTURE );
		if ( $matches ) {
			$options['pagination_display']  = true;
			$options['pagination_mid_size'] = 0;
		}
		return $options;
	}
);