Передача массива post__not_in в ajax в WordPress wp_query

Question

Итак, я смотрел другие ответы на этот вопрос уже несколько дней и не могу понять, где я ошибаюсь. Моя цель - создать кнопку «Загрузить еще» и использовать Ajax, чтобы загрузить больше сообщений в мой пользовательский wp_query на странице моего блога. У меня на этой странице два цикла wp_query, один для одного поста и один для остальных постов. Я использую 'post__not_in', чтобы исключить сообщение в первом запросе из второго запроса. Когда я загружаю больше постов через Ajax, я получаю дубликат. Поэтому я пытался получить массив идентификаторов, загруженных в основной запрос, и передать этот массив в Ajax, чтобы исключить загрузку этих сообщений, когда я нажимаю, чтобы загрузить больше сообщений.

Я также буду размещать это на своей странице категории. На этой странице у меня настроено три запроса: один с одной записью, второй в виде боковой панели с двумя сообщениями, а затем основной запрос, который будет загружать больше сообщений с Ajax.

. загрузка, когда я нажимаю на кнопку «Загрузить еще». Используя WP PHP Debug, я вижу, что моя переменная для исключения сообщений выводится как массив, но, похоже, она не работает. Я не уверен, где я иду не так.

На данный момент это то, что у меня есть. Вот мой шаблон с двумя запросами и кнопкой Ajax:

<!--- Featured Post --->
<section id="featured" class="blog-content">

    <!-- Starts the loop -->
    <?php
        $postsPerPage = 1;
        $offset = 1;
        $cat_id = get_query_var('cat');
        $args = array(
                'post_type' => 'post',
                'posts_per_page' => $postsPerPage
        );

        $featuredloop = new WP_Query($args);

        while ($featuredloop->have_posts()) : $featuredloop->the_post();

        $ids[] = get_the_ID();
    ?>

    <?php include ('template-parts/blog/featured-post.php'); ?>  

    <!-- Ends the loop -->
    <?php
    endwhile;
    wp_reset_postdata(); ?>

</section><!-- #posts -->

<!--- Posts --->
<section id="posts" class="ajax-posts posts blog-content">

    <!-- Starts the loop -->
    <?php
        $postsPerPage = 6;
        $offset = 1;
        $cat_id = get_query_var('cat');
        $args = array(
                'post_type' => 'post',
                'posts_per_page' => $postsPerPage,
                'post__not_in' => $ids
        );

        $loop = new WP_Query($args);

        while ($loop->have_posts()) : $loop->the_post();

        $skip[] = get_the_ID();

        $exclude = implode(',', $skip);

    ?>

    <?php include ('template-parts/blog/post.php'); ?>

    <!-- Ends the loop -->
    <?php
    endwhile;
    wp_reset_postdata(); ?>

</section><!-- #posts -->

<div class="load-more">

    <div id="more_posts" class="button" data-exclude="<?php echo $exclude; ?>" data-category="<?php echo $cat_id; ?>">Load More</div>

</div>

Вот мой Ajax jQuery файл:

jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error

    $(document).ready(function(){

        var ppp = 6; // Post per page
        var cat = $('#more_posts').data('category');
        var exclude = $('#more_posts').data('exclude');
        var pageNumber = 1;


        function load_posts(){
            pageNumber++;
            $.ajax({
                type: "POST",
                dataType: "html",
                url: ajax_posts.ajaxurl,
                data: {
                    cat: cat,
                    pageNumber: pageNumber,
                    ppp: ppp,
                    exclude: exclude,
                    action: 'more_post_ajax'
                },
                success: function(data){
                    var $data = $(data);
                    if($data.length){
                        $(".ajax-posts").append($data);
                        $("#more_posts").attr("disabled",false);
                    } else{
                        $("#more_posts").attr("disabled",true);
                        $("#more_posts").replaceWith('<h4>No more posts...</h4>');
                    }
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
                }

            });
            return false;
        }

        $("#more_posts").on("click",function(){ // When btn is pressed.
            $("#more_posts").attr("disabled",true); // Disable the button, temp.
            load_posts();
        });

    });

});

А вот мой Ajax функция в функциях. php

// Ajax Load More Posts
function more_post_ajax(){

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 0;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
    $cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';
    $exclude = $_POST['exclude'];

    $postNotIn = explode(",", $exclude);

    header("Content-Type: text/html");

    $args = array(
        'suppress_filters' => true,
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => $ppp,
        'cat' => $cat,
        'paged' => $page,
        'post__not_in' => $postNotIn,
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= get_template_part( 'template-parts/blog/post' );

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

Любые идеи будут удивительно полезны и оценены.

Спасибо!