SWELL│記事一覧ページを「もっと見る」ボタン付き無限スクロールにする方法

add_action('wp_footer', 'my_add_loadmore_button');
function my_add_loadmore_button() {
	if ( ! is_category() && ! is_tag() ) return;

	global $wp_query;
	$term    = get_queried_object();
	$max     = $wp_query->max_num_pages;
	$paged   = max( 1, get_query_var( 'paged' ) );
	$term_id = $term->term_id ?? 0;
	$taxonomy = $term->taxonomy ?? '';

	if ( $max <= 1 || ! $term_id ) return;

	$list_type = get_term_meta($term_id, 'swell_term_meta_list_type', true) ?: 'card';
	?>
	<script>
	document.addEventListener('DOMContentLoaded', function () {
		const $ul = document.querySelector('#main_content .p-archiveContent .p-postList, #main_content .p-termContent .p-postList');
		if (!$ul) return;

		const btn = document.createElement('button');
		btn.type = 'button';
		btn.id = 'load-more';
		btn.className = 'swell-block-button__link';
		btn.dataset.paged = <?php echo $paged + 1; ?>;
		btn.dataset.termId = '<?php echo esc_js( $term_id ); ?>';
		btn.dataset.taxonomy = '<?php echo esc_js( $taxonomy ); ?>';
		btn.dataset.maxPages = '<?php echo esc_js( $max ); ?>';
		btn.dataset.listType = '<?php echo esc_js( $list_type ); ?>';
		btn.innerHTML = '<span>もっと見る</span>';

		const wrapper = document.createElement('div');
		wrapper.className = 'swell-block-button is-style-btn_normal';
		wrapper.appendChild(btn);
		$ul.parentNode.appendChild(wrapper);
	});
	</script>
	<?php
}

// Ajax 処理の登録
add_action('wp_ajax_load_more_posts', 'my_load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'my_load_more_posts');
function my_load_more_posts() {
	$paged     = isset($_POST['paged']) ? absint($_POST['paged']) : 1;
	$taxonomy  = sanitize_key($_POST['taxonomy'] ?? '');
	$term_id   = absint($_POST['term_id'] ?? 0);
	$list_type = sanitize_text_field($_POST['list_type'] ?? 'card');

	if ( ! in_array( $taxonomy, ['category', 'post_tag'], true ) || ! term_exists( $term_id, $taxonomy ) ) {
		wp_die('Invalid term', '', ['response' => 400]);
	}
	$list_type = in_array($list_type, ['card', 'list', 'list2', 'simple', 'big'], true) ? $list_type : 'card';
	$args = [
		'post_type'           => 'post',
		'posts_per_page'      => max(1, (int) get_option('posts_per_page')),
		'post_status'         => 'publish',
		'paged'               => $paged,
		'ignore_sticky_posts' => true,
	];

	if ( $taxonomy && $term_id ) {
		$args['tax_query'] = [[
			'taxonomy' => $taxonomy,
			'field'    => 'term_id',
			'terms'    => $term_id,
		]];
	}

	$list_args = [
		'type'  => $list_type,
		'paged' => $paged,
	];

	$query     = new WP_Query($args);
	$list_data = \SWELL_THEME\Parts\Post_List::get_list_data($list_args);

	if ( $query->have_posts() ) :
		while ( $query->have_posts() ) :
			$query->the_post();
			\SWELL_Theme::get_parts('parts/post_list/' . $list_data['parts_name'], $list_data['li_args']);
		endwhile;
	endif;

	wp_reset_postdata();
	wp_die();
}

add_action('wp_footer', 'my_load_more_inline_js');
function my_load_more_inline_js() {
	?>
	<script>
	document.addEventListener('DOMContentLoaded', function () {
		document.addEventListener('click', function (e) {
			const btn = e.target.closest('#load-more');
			if (!btn || btn.disabled) return;
			e.preventDefault();

			const list = document.querySelector('#main_content .p-archiveContent .p-postList, #main_content .p-termContent .p-postList');
			if (!list) return;

			let paged = parseInt(btn.dataset.paged, 10);
			const maxPages = parseInt(btn.dataset.maxPages, 10);
			const taxonomy = btn.dataset.taxonomy;
			const termId = btn.dataset.termId;
			const listType = btn.dataset.listType;

			if (paged > maxPages) return;

			btn.disabled = true;
			btn.setAttribute('aria-busy', 'true');
			const formData = new FormData();
			formData.append('action', 'load_more_posts');
			formData.append('paged', paged);
			formData.append('taxonomy', taxonomy);
			formData.append('term_id', termId);
			formData.append('list_type', listType);

			fetch('<?php echo esc_url( admin_url('admin-ajax.php') ); ?>', {
				method: 'POST',
				body: formData
			})
			.then(response => {
				if (!response.ok) throw new Error('HTTP ' + response.status);
				return response.text();
			})
			.then(html => {
				const temp = document.createElement('div');
				temp.innerHTML = html;
				const items = [...temp.children].filter(el => el.matches('li.p-postList__item'));
				if (!items.length) throw new Error('記事を取得できませんでした');
				items.forEach(li => list.appendChild(li));
				paged++;
				btn.dataset.paged = paged;
				if (paged > maxPages) btn.style.display = 'none';
			})
			.catch(err => {
				console.error('読み込み失敗:', err);
				btn.textContent = '再試行する（下のページ番号でも移動できます）';
			}).finally(() => {
				btn.disabled = false;
				btn.removeAttribute('aria-busy');
			});
		});
	});
	</script>
	<?php
}

add_action('wp_footer', 'my_load_more_inline_js');
function my_load_more_inline_js() {
	?>
	<script>
	document.addEventListener('DOMContentLoaded', function () {
		const btn = document.getElementById('load-more');
		const list = document.querySelector('#main_content .p-archiveContent .p-postList, #main_content .p-termContent .p-postList');
		if (!btn || !list) return;

		let paged = parseInt(btn.dataset.paged, 10);
		const maxPages = parseInt(btn.dataset.maxPages, 10);
		const taxonomy = btn.dataset.taxonomy;
		const termId = btn.dataset.termId;
		const listType = btn.dataset.listType;

		// IntersectionObserverで監視
		const observer = new IntersectionObserver((entries) => {
			entries.forEach(entry => {
				if (entry.isIntersecting && paged <= maxPages) {
					loadMorePosts();
				}
			});
		});

		observer.observe(btn); // 「もっと見る」ボタンを監視対象に

		btn.addEventListener('click', loadMorePosts);
		function loadMorePosts() {
			if (btn.disabled || paged > maxPages) return;
			btn.disabled = true;
			btn.setAttribute('aria-busy', 'true');
			const formData = new FormData();
			formData.append('action', 'load_more_posts');
			formData.append('paged', paged);
			formData.append('taxonomy', taxonomy);
			formData.append('term_id', termId);
			formData.append('list_type', listType);

			fetch('<?php echo esc_url( admin_url('admin-ajax.php') ); ?>', {
				method: 'POST',
				body: formData
			})
			.then(response => {
				if (!response.ok) throw new Error('HTTP ' + response.status);
				return response.text();
			})
			.then(html => {
				const temp = document.createElement('div');
				temp.innerHTML = html;
				const items = [...temp.children].filter(el => el.matches('li.p-postList__item'));
				if (!items.length) throw new Error('記事を取得できませんでした');
				items.forEach(li => list.appendChild(li));
				paged++;
				btn.dataset.paged = paged;
				if (paged > maxPages) {
					btn.style.display = 'none';
					observer.unobserve(btn);
				}
			})
			.catch(err => {
				console.error('読み込み失敗:', err);
				btn.textContent = '再試行する（下のページ番号でも移動できます）';
				observer.unobserve(btn);
			}).finally(() => {
				btn.disabled = false;
				btn.removeAttribute('aria-busy');
			});
		}
	});
	</script>
	<?php
}