Walczę z utworzeniem przycisku Load More w projekcie WP. Zasadniczo używam Admin Ajax, który mamy do dyspozycji, gdy używamy WordPressa. Używam również API pobierania, aby się z nim komunikować, za pośrednictwem mojego pliku load-more.js.

Magia powinna się wydarzyć, gdy kliknę na mój przycisk id-ed p28-load-more, zdefiniowany w moim pliku archiwum. Wysłane żądanie zawiera 3 parametry: action, current_page i query. Są one poprawnie wypełnione zmiennymi, które zdefiniowałem w funkcji wp_localize_script (assets.php). Ale odpowiedź to 0 z komunikatem w konsoli „Bad Request 400”. W pliku dziennika mojej konfiguracji WP nie ma żadnego błędu.

Przetestowałem tak wiele rzeczy w ciągu dwóch tygodni, że nie mogę znaleźć rozwiązania.

Oto mój plik load-more.js:

    $(document).ready(function () {
        let ajaxurl = p28_query_params.ajaxurl;

        $('#p28-load-more').click(function () {

            const data = {
                action: 'p28_load_more',
                current_page: p28_query_params.current_page,
                query: p28_query_params.query
            };

            fetch(ajaxurl,
                {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'x-www-form-urlencoded',
                        'Cache-Control': 'no-cache'
                    },
                    body: new URLSearchParams(data),
                })
                .then(response => response.json())
                .then(response => {
                    if (!response.success) {

                        console.log('Erreur dans la réponse : ' + response);
                        return;
                    }
                    if (response) {
                        $('div#p28-load-more').text('CHARGER ENCORE');

                        $('div#p28-load-more-results').append(response);

                        p28_query_params.current_page++;

                        $('div.p28-load-more-msg').html('<p class="p28-small-text">' + p28_query_params.posts_count + ' sur ' + p28_query_params.found_posts + '</p>');

                        if (p28_query_params.current_page == p28_query_params.max_pages) {
                            $('div#p28-load-more').hide();
                        }
                    } else {
                        $('div#p28-load-more').hide();
                    }
                }).catch(function (err) {
                    console.warn('Erreur lors de l&apos;envoi : ', err);
                });
        });


})(jQuery);

Mój plik load-more.php (zawarty w functions.php) — próbowałem przenieść kod bezpośrednio do functions.php, nie zadziałało):

<?php

add_action('wp_ajax_p28_load_more', 'p28_load_more');
add_action('wp_ajax_nopriv_p28_load_more', 'p28_load_more');

function p28_load_more()
{
    echo 'OK';
    die();
}

Plik assets.php (zawarty również w functions.php; mój plik load-more.js jest prawidłowo dołączany, gdy wchodzę na stronę internetową, więc nie sądzę, żeby problem tu tkwił):

<?php

function page28_register_assets()
{
    // Déclarer jQuery
    wp_enqueue_script('jquery');

    // Déclarer le JS
    wp_enqueue_script(
        'app',
        get_template_directory_uri() . '/dist/js/app.js',
        array('jquery'),
        '1.0',
        true

    );


    // Déclarer le fichier CSS à un autre emplacement
    wp_enqueue_style(
        'style',
        get_template_directory_uri() . '/dist/css/style.css',
        array(),
        '1.0'
    );
}

add_action('wp_enqueue_scripts', 'page28_register_assets');



function p28_login_logo()
{
    wp_enqueue_style(
        'custom-login',
        get_template_directory_uri() . '/dist/css/custom-login.css',
        array('login')
    );
}

add_action('login_enqueue_scripts', 'p28_login_logo');


function p28_load_and_filter()
{

    global $wp_query;

    wp_register_script('p28_load_more_filter', get_stylesheet_directory_uri() . '/dist/js/load-more.js', array('jquery'));

    wp_localize_script('p28_load_more_filter', 'p28_query_params', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'query' => json_encode($wp_query->query_vars),
        'found_posts' => $wp_query->found_posts,
        'posts_count' => $wp_query->post_count,
        'current_page' => $wp_query->query_vars['paged'] ? $wp_query->query_vars['paged'] : 1,
        'max_pages' => $wp_query->max_num_pages
    ));

    wp_enqueue_script('p28_load_more_filter');
}
add_action('wp_enqueue_scripts', 'p28_load_and_filter');

Moje funkcje.php

// Déclaration des styles et animations

require_once get_template_directory() . '/src/server/assets.php';

// Déclaration des CPT

require_once get_template_directory() . '/src/server/post-types.php';

include get_template_directory() . '/src/server/load-more.php';
include get_template_directory() . '/src/server/filter.php';


//Enlever le switcher de langage sur la page de login

add_filter('login_display_language_dropdown', '__return_false');

// Modifier Wp_Query post type pour la pagination des oeuvres

add_action('pre_get_posts', 'post_type_oeuvre', 1, 1);
function post_type_oeuvre($query)
{
    if (is_post_type_archive('oeuvre') && $query->is_main_query()) {
        $query->set('posts_per_page', 8);
    }
}

Czy mógłbyś mi powiedzieć, czy zauważyłeś coś, co przegapiłem? Co jest nie tak z moim kodem?