Hướng dẫn thêm load more xem thêm với theme flatsome

Thêm load more cho mọi loại post hoặc custom post type

Yêu cầu

• Theme Flatsome đã được cài đặt.
• Child theme Flatsome đang hoạt động.
• Hiểu biết cơ bản về PHP, JavaScript và WordPress development.

Thêm nút "Load More" vào template

Tùy thuộc vào nơi cụ muốn thêm nút "Load More" (ví dụ: danh sách sản phẩm hoặc bài viết blog)

Cập nhật File Archive

Giả sử thêm vào file template-parts/posts/archive-2-col.php

<?php
/**
 * Posts archive 2 column.
 *
 * @package          Flatsome\Templates
 * @flatsome-version 3.18.0
 */
global $wp_query;
$current_page = max(1, get_query_var('paged')); // Trang hiện tại
$max_pages = $wp_query->max_num_pages; // Tổng số trang

if ( have_posts() ) : ?>
    <div id="post-list">
        <?php
        $ids = array();
        while ( have_posts() ) : the_post();
            array_push( $ids, get_the_ID() );
        endwhile; // end of the loop.
        $ids = implode( ',', $ids );
        ?>

        <?php
        echo flatsome_apply_shortcode( 'blog_posts', array(
            'type'        => get_theme_mod( 'blog_style_type', 'masonry' ),
            'depth'       => get_theme_mod( 'blog_posts_depth', 0 ),
            'depth_hover' => get_theme_mod( 'blog_posts_depth_hover', 0 ),
            'text_align'  => get_theme_mod( 'blog_posts_title_align', 'center' ),
            'columns'     => '2',
            'show_date'   => get_theme_mod( 'blog_badge', 1 ) ? 'true' : 'false',
            'ids'         => $ids,
        ) );
        ?>

        <?php 
        if ( get_theme_mod( 'blog_pagination' ) === 'ajax' ) {
            ?>
            <?php if ($current_page < $max_pages) : ?>
            <div class="load-more-wrap text-center">
            <!-- load more -->
            <button
                data-page="<?php echo $current_page; ?>" 
                data-max-pages="<?php echo $max_pages; ?>"
                data-query='<?php echo json_encode($wp_query->query); ?>'
                class="button primary load-more-posts" 
                type="button">Xem thêm</button>
            </div>
            <?php endif; ?>
            <?php
        } else {
            flatsome_posts_pagination();
        } ?>
    </div>
<?php else : ?>

    <?php get_template_part( 'template-parts/posts/content', 'none' ); ?>

<?php endif; ?>

Thêm JS

Thêm js vào file js hoặc add_action footer 

// load more posts
jQuery('body').on('click', '.load-more-posts', function(e){
      e.preventDefault();
      var button = jQuery(this);
      var currentPage = parseInt(button.data('page'));
      var maxPages = parseInt(button.data('max-pages'));
      var nextPage = currentPage + 1;
   
      jQuery.ajax({
          url: flatsomeVars.ajaxurl,
          type: 'POST',
          data: {
              action: 'load_more_posts',
              page: nextPage,
              query: button.data('query'),
          },
          beforeSend: function() {
              button.text('Loading...').prop('disabled', true);
          },
          success: function(response) {
              if(response.success){
                  jQuery('#post-list .row').append(response.data.posts);
                  button.data('page', nextPage);
                  // Ẩn nút nếu đã tải hết bài viết
                  if (nextPage >= maxPages) {
                      button.hide();
                  }
              }
             
          },
          complete: function() {
              button.text('Xem thêm').prop('disabled', false);
          }
      });
  });

Thêm code php load ajax

<?php
function load_more_posts() {
    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $query_vars = isset($_POST['query']) ? $_POST['query'] : array();

    // Tạo query mới dựa trên query hiện tại
    $args = array_merge($query_vars, array(
        'paged' => $page,
        'post_status' => 'publish'
    ));

    $query = new WP_Query($args);

    // Kiểm tra và trả về bài viết
    if ($query->have_posts()) {
        ob_start();
        while ($query->have_posts()) {
            $query->the_post();
            global $post;
            get_template_part('template-parts/posts/loop/post-item');
            
        }
        $posts_html = ob_get_clean();
        wp_reset_postdata();

        wp_send_json_success(array('posts' => $posts_html));
    } else {
        wp_send_json_error();
    }

    wp_die();
}
add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');