Bagaimana untuk Melaksanakan Ciri AJAX \'Muat Lebih Banyak Catatan\' dalam WordPress?

Cara Melaksanakan Ciri AJAX "Load More Posts" dalam WordPress

Artikel ini membincangkan isu pelaksanaan AJAX "Load More Posts " dalam WordPress, yang membolehkan pengguna memuatkan siaran tambahan secara dinamik pada halaman web tanpa perlu memuat semula keseluruhan halaman.

Pernyataan Masalah

Pengguna menghadapi kesukaran semasa cuba melaksanakan ciri ini menggunakan pelbagai kaedah, termasuk yang disebut dalam "Penomboran pada WP_Query Ajax Tersuai" post.

Penyelesaian

Penyelesaian yang disediakan menumpukan pada menambah baik kod untuk memastikan kefungsian yang betul. Aspek utama termasuk:

1. Kod Sisi Pelayan

• Dalam fail templat, pastikan pertanyaan catatan awal mengembalikan bilangan siaran yang diingini setiap halaman.
• Dalam fail fungsi, cipta fungsi untuk mengendalikan permintaan AJAX dan memuatkan lebih banyak siaran secara dinamik. Fungsi ini harus termasuk logik penomboran untuk mendapatkan semula set siaran yang betul.

2. Kod Sebelah Klien (jQuery)

• Di sisi klien, ikat pendengar acara pada butang "Muat Lagi".
• Apabila butang diklik, hantar permintaan AJAX ke fungsi sisi pelayan menggunakan jQuery.
• Lepasi parameter yang diperlukan seperti offset dan bilangan siaran setiap halaman.
• Tambahkan HTML yang dikembalikan pada senarai siaran sedia ada.

3. Pertimbangan Tambahan

• Kendalikan kes tiada lagi siaran untuk dimuatkan dengan melumpuhkan butang "Muat Lagi".
• Untuk mencipta kesan "beban tak terhingga", gunakan tatal tetingkap bukannya acara klik butang.

Kod Pelaksanaan

Ikuti coretan kod yang disediakan untuk melaksanakan penyelesaian:

functions.php:

/**
 * Handle AJAX "Load More" request
 */
function load_more_posts() {
    $offset = $_POST['offset'];
    $ppp = $_POST['ppp'];

    $args = [
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
        // Other query parameters...
    ];

    $query = new WP_Query($args);
    $html = '';

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $html .= '<div>' . get_the_content() . '</div>';
        }
        wp_reset_postdata();
    } else {
        $html = 'No more posts to load';
    }

    echo $html;
    exit();
}

add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

script.js:

$(function() {
    var offset = 0;
    var ppp = 3;

    $('#load-more').on('click', function() {
        $.ajax({
            type: 'POST',
            url: 'path/to/wp-admin/admin-ajax.php',
            data: {
                action: 'load_more_posts',
                offset: offset,
                ppp: ppp
            },
            success: function(response) {
                $('#posts').append(response);
                offset += ppp;
            }
        });

        // Prevent the button from triggering multiple AJAX requests
        $('#load-more').attr('disabled', true);
    });
});

Nota : Gantikan 'path/to/wp-admin/admin-ajax.php' dengan URL sebenar kepada anda Fail admin-ajax.php WordPress.

Kesimpulan

Dengan mengikuti langkah ini, anda boleh melaksanakan ciri AJAX "Muat Lebih Banyak Catatan" untuk tapak WordPress anda, membenarkan pengguna untuk menyemak imbas kandungan yang banyak dengan lancar tanpa perlu memuat semula keseluruhan halaman.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Ciri AJAX \'Muat Lebih Banyak Catatan\' dalam WordPress?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!