php - Wordpress 自定义帖子类型 ajax 加载更多分页
问题描述
我已经为 wordpress 中的工作职位创建了这个页面模板。如果有十多个职位可用,我想实现一个 ajax 加载更多系统。我不知道如何对结果进行分页,而且我从未在 wordpress 中实现过类似的东西。谁能帮我?
<?php get_header(); ?>
<?php if( has_post_thumbnail() ): ?>
<div class="jumbotron jumbotron-fluid page-cover">
<div class="parallax" data-parallax-image="<?php the_post_thumbnail_url(); ?>"></div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-right inner-parallax">
<h1 class="parallax-section-title"><?php the_title(); ?></h1>
</div>
</div>
</div>
<div class="parallax-overlay"></div>
</div>
<?php endif; ?>
<div class="container-fluid content-wrapper" id="wrapper">
<div class="row page-row-justified justify-content-center" style="padding-bottom:0;">
<?php if( have_posts() ): while( have_posts() ): the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php $careers = new WP_Query( ['post_type' => 'careers', 'posts_per_page' => 10 ] ); ?>
<div class="row page-row-justified justify-content-center">
<?php if( $careers->have_posts() ): while( $careers->have_posts() ): $careers->the_post(); ?>
<div class="col-sm-12 col-md-8 col-lg-8 card career-card">
<h4 class=""><a class="career-link" data-toggle="collapse" href=".position-details" class=""><?php the_title(); ?></a></h4>
<small class="career-date"><i class=""></i> <?php the_date('d/m/Y'); ?></small>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 position-details collapse">
<p class="career-details text-justify"><?php echo get_the_content(); ?></p>
<hr>
<h4><a class="career-mail-link" href="mailto:example@demo.com?subject=<?php the_title(); ?>"><i class="fas fa-envelope"></i> <?php _e('Apply'); ?></a></h4>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else: ?>
<div class="col-sm-12 col-md-8 col-lg-8">
<p class="section-claime text-danger hide"><?php _e('No position available.'); ?></p>
</div>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
解决方案
尝试这个
<?php
$args= array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 10,
'ignore_sticky_posts' => true,
'paged' => 1
);
$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
while ( $my_posts->have_posts() ) : $my_posts->the_post();
// Your code for post
endwhile;
endif;
?>
<button class="btn a loadmore_event">View More</button>
阿贾克斯
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore_event', function() {
var data = {
'action': 'load_posts_by_event',
'page': page,
'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
};
$.post(ajaxurl, data, function(response) {
if(response != '') {
$('your class name').append(response);
page++;
} else {
}
});
});
});
函数.php
add_action('wp_ajax_nopriv_load_posts_by_event', 'load_posts_event');
function load_posts_event() {
$paged = $_POST['page'];
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 10,
'ignore_sticky_posts' => true,
'paged' => $paged
);
$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
while ( $my_posts->have_posts() ) : $my_posts->the_post();
// Your code for post
endwhile;
endif;
}// function closing tag
推荐阅读
- python - 如何将从 OpenCV 获得的轮廓转换为 SHP 文件多边形?
- c# - 更改屏幕分辨率或多屏幕布局时 WPF 冻结
- javascript - ID 未显示在 JavaScript 的 insertAdjacent 方法中
- json - 如何使用脚本外壳将文件附加到具有合适格式的另一个文件中
- java - JavaFX 包括 Linux 和 MacOS 运行时
- java - kafka应用程序的多个消费者可以在同一个线程上工作吗?
- angular - Angular 反应形式 - 验证模糊但在输入时更新模型
- c++ - 将可变大小数组声明为类/模板类成员变量
- c++ - 从没有 .get() 的结构返回成员
- c# - C# 乘法给出错误答案