如何在wordpress中的自定义博客文章循环中添加加载更多按钮

Question

我想在这段代码中的博客页面模板(template-parts/blog.php(中添加一个加载更多帖子按钮。我创建了一个帖子循环，但现在我需要认真的帮助，我尝试了整个互联网，但无法通过。。我不知道该怎么做才能使加载按钮工作。如何在自定义博客文章循环中添加加载更多按钮？我学习了很多教程，但都不起作用，或者可能是我做错了，但请帮助

<?php
/**
* Template Name: Blog
* The template for displaying blog list.
*
*/

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
get_header();
?>


<div class="main-blog">
<div class="blog-filter">
<div class="container">
<div class="inner-blog">
<div class="blog-heading">
<h2 id="SectionName" >Blog</h2>
</div>
</div>
</div>
</div>

<div class="portfolio section">
<div class="container">
<div class="filters">
<ul class="toolbar">

<li class="active" data-filter="*">All</li>
<?php
$argss = array(
'taxonomy' => 'category',
'hide_empty' => 0,
'include' => array( 17, 18, 19, 20, 21, 22, 23),
);
$termss= get_terms($argss);
$counts = 1;
foreach($termss as $terms){
//print_r($terms);
?>
<li data-filter=".<?php echo $terms->slug; ?>"><div class="cat-img"><img src="<?php echo z_taxonomy_image_url($terms->term_id); ?>" /></div> <?php echo $terms->name; ?></li>
<?php } ?>
</ul>
</div>
<div class="filters-content">
<div id="portfolio" >
<div >
<?php
$args = array(  
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 15,
'taxonomy' => 'category',
'include' => array( 17, 18, 19, 20, 21, 22, 23),
);
$loop = new WP_Query( $args ); 
while ( $loop->have_posts() ) : $loop->the_post(); 
$categories = get_the_category();
$cats = "";
foreach($categories as $category){
$cats .= $category->slug." ";
}
?>
<div class="tile scale-anm all <?php echo $cats; //echo get_the_category(); ?>">
<div class="item ">
<div class="img-sec">
<?php the_post_thumbnail(); ?>
</div>
<div class="cnt-sec">
<div class="cat">
<?php 
$category_object = get_the_category($loop->ID);
$category_name = $category_object[1]->name;
?>
<p><?php the_category(' '); ?></p>
</div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php the_excerpt(70);  ?>
</p>
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div></div>
<div id="more_posts">Load More</div>



</div>

</div>
</div>
</div>

</div>
<?php echo do_shortcode( '[elementor-template id="1916"]' ); ?>
<?php get_footer(); ?>

Answer 1

您使用AJAX请求来完成此操作。因此，您的问题缺少两个部分：服务器端PHP脚本和客户端JS脚本。

服务器端：

add_action( 'wp_enqueue_scripts' , function () {
wp_register_script( 'ajax_load_more' , 'load_more.js' , array( 'jquery' ) );
wp_localize_script( 'ajax_load_more' , 'AjaxLoad' , array( 'ajaxUrl' => admin_url( 'admin-ajax.php' ) , ) );
wp_enqueue_script( 'ajax_load_more' );
} );
add_action( 'wp_ajax_nopriv_getmoreposts', array( __CLASS__ , 'fetch_data' ) );
add_action( 'wp_ajax_getmoreposts', array( __CLASS__ , 'fetch_data' ) );
function fetch_data () {
if ( !$_POST[ 'paged' ] ) { 
$json = array( 'status' => 'error' , 'message' => 'no pagination found' ); 
} else {
$query = new WP_Query( array( 'post_type' => 'post' , 'post_status' => 'publish' , 'posts_per_page' => 9 , 'paged' => (int)$_POST[ 'paged' ] ) );
if ( $query -> found_posts > 0 ) {
$json = array( 'status' => 'ok' , 'message' => 'all ok' , 'posts' => $query -> posts );
} else{
$json = array( 'status' => 'error' , 'message' => 'no posts found' );
}
}
header( 'Content-Type: application/json; charset=utf-8' );
echo json_encode( $json );
exit;
}

解释：在wp_ajax_nopriv_和wp_ajax_中，我们注册了一个ajax操作getmoreposts。如果客户端调用此操作，服务器将使用函数fetch_my_data进行响应。$_POST变量告诉服务器要加载哪个页面。请求在js文件中处理。

;( function ( window , document , $ ) {
var paged = 1;
jQuery( document ).on( 'click' , '#more_posts' , () => {
paged++;
jQuery.ajax( {
type : 'POST' ,
url : AjaxLoad.ajaxUrl,
data : { action : 'getmoreposts' , paged : paged } , 
success : ( data , textStatus , XMLHttpRequest ) => { 
data.posts.forEach( ( post , index ) => { /*do something*/ } );
} ,
error : ( XMLHttpRequest , textStatus , errorThrown ) => { console.log( errorThrown ); }
} );
} );
} )( window , document , jQuery );

具体来说，接收到的数据将由ajax请求的success属性中定义的函数处理。

最后，用户点击按钮，客户端发送带有动作的请求"；获取更多帖子"通过ajax(无需重新加载页面！(发送到服务器，服务器将以posts作为响应，客户端将新项目添加到post列表中。用户很高兴。