WordPressでAjaxを使った記事の読み込みボタンの実装方法
このコードは、お知らせ一覧ページに「もっと見る」ボタンを設置し、
ボタンをクリックするたびに追加のお知らせ記事を読み込むためのAjax機能を実装するものです。
具体的には、クリックイベント発火時にAjaxでWordPressの「WP_Query」を使用して、追加の記事を取得し、HTMLとして生成して表示します。
そして、取得した記事数が表示可能な記事数を超えた場合、ボタンを非表示にするようになっています。
これにより、ユーザーがページ遷移することなく、スムーズに記事を読み進めることができるようになります。
【主な仕様】
- 記事の表示件数は3記事毎表示する
- VIEW MOREボタンをクリックすると次の3件が追加で表示される
- 追加で記事を表示する際にページ遷移を発生させずに表示させる
- 最後の記事まで表示された場合、VIEW MOREボタンを非表示にする
以下サンプルコードになります。
archive.php
<section class="newsAjaxPage">
<p class="newsAjaxPage__title">お知らせ一覧</p>
<?php
$paged = get_query_var("paged") ? get_query_var("paged") : 1;
$query = new WP_Query(
array(
'post_type' => 'news_ajax', //カスタム投稿タイプを指定
'posts_per_page' => 3, //記事の表示件数を指定
'paged' => $paged
)
);
if ( $query->have_posts() ) : ?>
<ul class="newsAjaxPage__list">
<?php while ( $query->have_posts() ) : $query->the_post();?>
<li class="newsAjaxPage__listItem">
<a href="<?= get_permalink(); ?>" class="newsAjaxPage__listItemLink">
<p class="newsAjaxPage__listItemTitle"><?= get_the_title(); ?></p>
<p class="newsAjaxPage__listItemText"><?= the_content(); ?></p>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<button id="moreButton" class="newsAjaxPage__btn">VIEW MORE</button>
</section>
function.php
add_action('wp_ajax_load_more_posts', 'load_more_posts_callback');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts_callback');
function load_more_posts_callback() {
$post_type = 'news_ajax'; //カスタム投稿タイプを入力
$posts_per_page = 3;// 記事の表示件数を入力
$paged = $_POST['page'];
$html = "";
$args = array(
'post_type' => $post_type,
'post_status' => 'publish',
'posts_per_page' => $posts_per_page,
'paged' => $paged,
);
$query = new WP_Query($args);
$total_posts = $query->found_posts;
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$html .= '<li class="newsAjaxPage__listItem">';
$html .= '<a href="' . get_permalink() . '" class="newsAjaxPage__listItemLink">';
$html .= '<p class="newsAjaxPage__listItemTitle">' . get_the_title() . '</p>';
$html .= '<p class="newsAjaxPage__listItemText">' . htmlspecialchars(get_the_content()) . '</p>';
$html .= '</a>';
$html .= '</li>';
}
wp_reset_postdata();
$response = array(
'html' => $html,
'show_button' => true,
'total_posts' => $total_posts,
);
} else {
$response = array(
'show_button' => false,
);
}
$response = json_encode($response);
echo $response;
wp_die();
}
script.js
$(function($) {
var page = 2;
var postType = 'news_ajax';
var ajaxUrl = '/wcommudep/wp-admin/admin-ajax.php';
var $moreButton = $('#moreButton');
function hideMoreButton() {
$moreButton.hide();
}
$moreButton.on('click', function () {
$.ajax({
url: ajaxUrl,
type: 'POST',
data: {
action: 'load_more_posts',
post_type: postType,
page: page,
},
success: function(response) {
var result = JSON.parse(response);
$('.newsAjaxPage__list').append(result.html);
page++;
if ($('.newsAjaxPage__list > li').length === result.total_posts) {
hideMoreButton();
} else if (!result.show_button) {
hideMoreButton();
}
},
error: function(xhr, status, error) {
console.error(xhr);
}
});
});
if ($('.newsAjaxPage__list > li').length < 3) {
hideMoreButton();
}
});
