Mengapa Butang \'Muat Lebih Banyak Catatan\' WordPress Saya Tidak Berfungsi dengan AJAX?

Melaksanakan Muatkan Lebih Banyak Siaran dengan AJAX dalam WordPress

Pengenalan:

Memuatkan siaran secara dinamik melalui AJAX adalah perkara yang biasa dicari- selepas ciri dalam pembangunan WordPress. Ia membolehkan pengguna meneroka lebih banyak kandungan tanpa memuatkan semula keseluruhan halaman, meningkatkan pengalaman pengguna. Artikel ini menangani isu biasa yang dihadapi oleh ramai orang apabila melaksanakan memuatkan lebih banyak siaran dengan AJAX.

Pernyataan Masalah:

Pengguna cuba untuk melaksanakan penomboran menggunakan AJAX tetapi menghadapi kesukaran, menyebabkan tiada perubahan yang boleh dilihat pada halaman dan butang Muatkan Lagi tidak berfungsi. Walaupun memeriksa elemen dan memerhatikan gelagat yang dijangkakan dalam jQuery, siaran tidak ditambahkan pada halaman.

Penyelesaian:

Setelah analisis coretan kod yang disediakan, beberapa isu yang berpotensi muncul :

1. jQuery: Sifat offset dalam $.post panggilan menggunakan (halaman * ppp) 1 dan bukannya (halaman - 1) * ppp. Formula ini harus dilaraskan kepada (halaman - 1) * ppp untuk mengira dengan betul offset untuk set siaran seterusnya.
2. Fungsi AJAX: Dalam fungsi more_post_ajax dalam functions.php, sifat mengimbangi harus digunakan bersama dengan sifat halaman. Ini memastikan bahawa WP_Query mendapatkan semula halaman siaran yang sesuai.
3. php: Mungkin terdapat teg PHP penutup yang hilang di suatu tempat dalam kod, yang akan memecahkan kod.
4. Penyetempatan Skrip WordPress: Fungsi more_post_ajax perlu disetempatkan sebagai WordPress skrip. Penyetempatan skrip hendaklah diletakkan sebelum memuatkan skrip dalam functions.js. Ini membenarkan objek ajax_posts digunakan dalam kod JavaScript.

Kod Disemak:**

Fail Templat (index.php):

// Calculate the offset for page 2 onwards
$offset = ( isset( $_GET['page'] ) && $_GET['page'] > 1 ) ? ( $_GET['page'] - 1 ) * $postsPerPage : 0;

$args = [
    'post_type'             => 'post',
    'posts_per_page'        => $postsPerPage,
    'cat'                   => 1,
    'offset'                => $offset,
];

Fungsi AJAX (functions.php):

function more_post_ajax(){
    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

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

    $args = array(
        'suppress_filters'     => true,
        'post_type'             => 'post',
        'posts_per_page'        => $ppp,
        'cat'                   => 1,
        'paged'                 => $page + 1, // Increase the page by 1 since offset is already calculated in the template file
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop->have_posts()) :  while ($loop->have_posts()) : $loop->the_post();
        // Generate HTML for the post
        $out .= '<div class="small-12 large-4 columns">';
        $out .= '<h1 id="get-the-title">'.get_the_title().'</h1>';
        $out .= '<p>'.get_the_content().'</p>';
        $out .= '</div>';

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

// Localize the 'more_post_ajax' script
wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(
    'ajaxurl'   => admin_url( 'admin-ajax.php' ),
    'noposts'   => __('No older posts found', 'twentyfifteen'),
));

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

ajax.js:

$(document).ready(function() {
    var ppp = 3;
    var cat = 8;
    var pageNumber = 1;

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

    $("#more_posts").on("click",function(){
        $("#more_posts").attr("disabled",true);
        load_posts();
    });
});

Kesimpulan:

Dengan menangani isu-isu ini dengan teliti , memuatkan lebih banyak fungsi siaran dengan AJAX boleh dilaksanakan dengan jayanya. Formula offset dan penyetempatan skrip WordPress memainkan peranan penting dalam memastikan penomboran yang betul dan akses kepada pembolehubah WordPress dalam kod JavaScript. Pembetulan ini harus menghasilkan Butang Muat Lagi yang berfungsi sepenuhnya yang memuatkan siaran tambahan ke halaman secara dinamik.

Atas ialah kandungan terperinci Mengapa Butang \'Muat Lebih Banyak Catatan\' WordPress Saya Tidak Berfungsi dengan AJAX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!