Как правильно вывести ajax подгрузку по клике на показать еще?

Question

[rvitalia]

Есть страница постов.
На ней посты выводятся следующим образом.

1.

<section class="blog" style="background-image: url(<?php bloginfo('template_url');?>/assets/images/blog/bg.png);">
                <div class="container">
                    <div class="blog__inner posts-container" id="custom-posts-container">

                    <?php
                    $args = array(
                        'post_type' => 'Blog',
                        'order' => 'ASC',
                        'posts_per_page' => 3,
                        'paged' => 1,
                    );
                    $the_query = new WP_Query($args); ?>
                    <?php if ($the_query->have_posts()) :  ?>
                        <?php while ($the_query->have_posts()) : $the_query->the_post();
                         ?>
                            <?php $post_id = get_the_ID();  ?>
            
                        <div class="blog__inner__item">
                            <div class="blog__inner__item__img">
                                <img src="<?php the_field('post_image')?>" alt="capture" width="370" height="235">
                            </div>
                            <span class="blog__inner__item__title"><?php the_title(); ?></span>
                            <?php the_excerpt(); ?>
                            <span class="h-reset blog__inner__item__date" datetime="<?php the_date(); ?>"><?php echo get_the_date(); ?></span>
                            <a href="<?php the_permalink(); ?>" class="blog__inner__item__link btn-red">Читать полностью</a>
                        </div>
                        
                        <?php endwhile; ?>
                        <?php wp_reset_postdata(); ?>
                    <?php endif; ?>
            
                    </div>
            
                    <button id="load-more-posts" class="btn-red blog__inner__more">Показать еще</button>
  
                </div>
            </section>

здесь специально созданный тип записи "блог "

2. Дальше js

jQuery(function($) {
    var page = 1;
    var $loadMoreButton = $('#load-more-posts');
    var $postContainer = $('#custom-posts-container');

    $loadMoreButton.on('click', function() {
        $loadMoreButton.text('Загрузка...');

        $.ajax({
            url: ajaxurl,
            type: 'post',
            data: {
                action: 'load_more_custom_posts',
                page: page,
            },
            success: function(response) {
                if (response) {
                    $postContainer.append(response);
                    $loadMoreButton.text('Показать еще');
                    page++;
                } else {
                    $loadMoreButton.text('Больше записей нет');
                }
            },
            error: function() {
                $loadMoreButton.text('Ошибка при загрузке. Попробуйте снова.');
            }
        });
    });
});

3. functions.php

add_action('wp_ajax_load_more_custom_posts', 'load_more_custom_posts');
add_action('wp_ajax_nopriv_load_more_custom_posts', 'load_more_custom_posts');

function load_more_custom_posts() {
    $page = $_POST['page'];

    $args = array(
        'post_type'      => 'Blog',
        'posts_per_page' => 3,
        'paged'          => $page,
    );

    $custom_query = new WP_Query($args);

    if ($custom_query->have_posts()) {
        while ($custom_query->have_posts()) {
            $custom_query->the_post();
            // Вывод содержимого каждой загруженной записи
            // Например: the_title(), the_content(), и т.д.
			?>
						<div class="blog__inner__item">
                            <div class="blog__inner__item__img">
                                <img src="<?php the_field('post_image')?>" alt="capture" width="370" height="235">
                            </div>
                            <span class="blog__inner__item__title"><?php the_title(); ?></span>
                            <?php the_excerpt(); ?>
                            <span class="h-reset blog__inner__item__date" datetime="<?php the_date(); ?>"><?php echo get_the_date(); ?></span>
                            <a href="<?php the_permalink(); ?>" class="blog__inner__item__link btn-red">Читать полностью</a>
                        </div>
			<?php
        }
        wp_reset_postdata();
    } else {
        wp_send_json('');
    }

    wp_die();
}

Сталкиваюсь со следующими проблемами:
1. во первых выше я редактирую количество слов для вывода в excerpt,

function my_excerpt_length( $length ) {
    return 30; // Указываем количество слов
}

,но при подгрузке либо игнорируется, либо выводится the_content().
2. У меня например выводится три поста, но осталось всего не выведенных два.. Но вместо того что вывести оставшиееся два, он выводит два +1 с начала....и так дальше по циклу, то есть бесконечно крутит все посты.

Что не так делаю, буду рад любой помощи....

Comments

[IvanU7n]

несколько соображений:
1. регистрация my_excerpt_length может и не происходить в случае AJAX запроса, зависит от того как именно она регистрируется, но детальнее не подскажу, т.к. ковырялся с этим относительно давно
2. дозагрузка начинается со страницы 1, хотя по идее должна начинаться со страницы 2, это я про var page = 1;
3. порядок сортировки разнится между изначальным циклом и подзагрузкой

[rvitalia]

IvanU7n, блин, реально помогло. одинаково перебрал посты, и проблема ушла. Респект отдельный. за это. Остался вопрос с excerpt...

[rvitalia]

вообщем и целом, кто столкнется, вывел так:

$content = get_the_content(); // Получаем содержимое записи
$trimmed_content = wp_trim_words($content, 20, ' [...]'); // Обрезаем до 20 слов и добавляем " [...]" в конце
echo $trimmed_content; // Выводим обрезанный текст

Вопрос закрыт..