Hướng dẫn code thêm load more bài viết wordpress flatsome

Tìm vào file load layout tương ứng trong cài đặt thêm code sau

// thêm vào đầu file 
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

// thay thế hàm flatsome pagination 
<?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; ?>

Thêm code sau vào functions.php

function yt_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);
 
    if ($query->have_posts()) {
        
        $ids = array();
        ob_start();

        while ($query->have_posts()) {
            $query->the_post();
            global $post;
            array_push($ids, $post->ID);

            if( flatsome_option('blog_style_archive') == 'inline'  ){
            ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <div class="article-inner <?php flatsome_blog_article_classes(); ?>">

                    <header class="entry-header">
                    <div class="entry-header-text text-<?php echo get_theme_mod( 'blog_posts_title_align', 'center' );?>">
                            <?php get_template_part( 'template-parts/posts/partials/entry', 'title');  ?>
                        </div>
                    </header>
                    <?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it. ?>
                    <div class="entry-image-float">
                        <?php get_template_part( 'template-parts/posts/partials/entry-image', 'default'); ?>
                        <?php if ( get_theme_mod( 'blog_badge', 1 ) ) get_template_part( 'template-parts/posts/partials/entry', 'post-date' ); ?>
                    </div>
                    <?php } ?>
                    <?php get_template_part('template-parts/posts/content', 'default' ); ?>
                    <div class="clearfix"></div>
                    <?php get_template_part('template-parts/posts/partials/entry-footer', 'default' ); ?>
                </div>
            </article>
            <?php
            }

            if( flatsome_option('blog_style_archive') == '2-col'
            || flatsome_option('blog_style_archive') == '3-col'  ){
                ?>
                <div class="col post-item">
                    <div class="col-inner">
                        <div class="box box-text-bottom box-blog-post has-hover">
                            <div class="box-image">
                                <div class="image-cover" style="padding-top:56%;">
                                    <a href="<?php the_permalink() ?>" class="plain" aria-label="<?php the_title(); ?>">
                                        <?php the_post_thumbnail('medium'); ?>
                                    </a>
                                </div>
                            </div>
                            <div class="box-text text-left">
                                <div class="box-text-inner blog-post-inner">
                                    <h3 class="post-title is-large ">
                                        <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="plain"><?php the_title(); ?></a>
                                    </h3>

                                    <div class="from_the_blog_excerpt ">
                                        <?php echo wp_trim_words( get_the_excerpt(), 15); ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php
            }

            if( flatsome_option('blog_style_archive') == 'list' ){

                ?>
                <div class="col post-item">
                    <div class="col-inner">
                    <a href="<?php the_permalink() ?>" class="plain" title="<?php the_title(); ?>">
                        <div class="box box-vertical box-text-bottom box-blog-post has-hover">
                            <div class="box-image" style="width:40%;">
                                <div class="image-cover" style="padding-top:56%;">
                                    
                                    <?php the_post_thumbnail('medium'); ?>         
                                
                                </div>
                            </div>
                            <div class="box-text text-left">
                                <div class="box-text-inner blog-post-inner">
                                    <h3 class="post-title is-large ">
                                        <?php the_title(); ?>
                                    </h3>
                                    <div class="is-divider"></div>
                                    <p class="from_the_blog_excerpt ">
                                        <?php echo wp_trim_words( get_the_excerpt(), 15); ?>
                                    </p>
                                </div>
                            </div>
                            <?php if(!$badge_style) $badge_style = get_theme_mod('blog_badge_style', 'outline'); ?>
                            <div class="badge absolute top post-date badge-<?php echo esc_attr( $badge_style ); ?>">
                                <div class="badge-inner">
                                    <span class="post-date-day"><?php echo get_the_time('d', get_the_ID()); ?></span><br>
                                    <span class="post-date-month is-xsmall"><?php echo get_the_time('M', get_the_ID()); ?></span>
                                </div>
                            </div>
                        </div>
                    </a>
                    </div>
                </div>
                <?php
            }

        }
        $ids = implode(',', $ids);

        $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', 'yt_load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'yt_load_more_posts');


add_action('wp_footer', function(){
    if( is_category() || is_tax() || is_tag() || is_home() || is_post_type_archive() || is_post_type_archive('service') ){
        $container_append = '.large-9.col .row';
        if( flatsome_option('blog_style_archive') == 'post-list' ){
             $container_append = '#post-list';
        }
        ?>
        <script type="text/javascript">
        // 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('<?php echo $container_append ?>').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);
                }
            });
        });
        </script>
        <?php
    }
});