如何在 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 向服务器发送带有“getmoreposts”操作的请求（没有页面重新加载！），服务器以帖子响应，客户端将新项目附加到帖子列表.用户很高兴。