在archive.php上使用自定义post类型的WordPress中的Ajax分页,可以通过以下步骤实现:
function create_custom_post_type() {
register_post_type('custom_post',
array(
'labels' => array(
'name' => 'Custom Posts',
'singular_name' => 'Custom Post'
),
'public' => true,
'has_archive' => true,
'rewrite' => array('slug' => 'custom-posts'),
)
);
}
add_action('init', 'create_custom_post_type');
$args = array(
'post_type' => 'custom_post',
'posts_per_page' => 10,
'paged' => get_query_var('paged') ? get_query_var('paged') : 1
);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
// 显示文章内容
}
}
function ajax_pagination() {
$args = array(
'post_type' => 'custom_post',
'posts_per_page' => 10,
'paged' => $_POST['page']
);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
// 返回文章内容
}
}
wp_die();
}
add_action('wp_ajax_ajax_pagination', 'ajax_pagination');
add_action('wp_ajax_nopriv_ajax_pagination', 'ajax_pagination');
<button id="load-more">Load More</button>
jQuery(document).ready(function($) {
var page = 2; // 下一页的页码
$('#load-more').click(function() {
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'ajax_pagination',
page: page
},
success: function(response) {
// 处理返回的数据
page++; // 增加下一页的页码
}
});
});
});
这样,当点击"Load More"按钮时,将会发送Ajax请求到ajax_pagination函数,并返回下一页的文章内容。你可以根据需要在success回调函数中处理返回的数据,例如将文章内容添加到页面中。
推荐的腾讯云相关产品:腾讯云云服务器(https://cloud.tencent.com/product/cvm)和腾讯云对象存储(https://cloud.tencent.com/product/cos)。这些产品可以提供稳定的云计算基础设施和存储服务,适用于WordPress网站的部署和数据存储需求。
领取专属 10元无门槛券
手把手带您无忧上云