Bagaimana untuk Melaksanakan Butang \'Muat Lebih Banyak Catatan\' dengan Ajax dalam WordPress?

Muat Lagi Catatan Butang Ajax dalam WordPress

Memuatkan lebih banyak siaran melalui Ajax ialah keperluan biasa untuk tapak web dengan volum kandungan yang besar. Ini membolehkan pengguna menyemak imbas berbilang halaman kandungan tanpa menyegarkan keseluruhan halaman. Dalam artikel ini, kami akan meneroka langkah-langkah yang terlibat dalam melaksanakan butang "Muat Lebih Banyak Catatan" menggunakan Ajax dalam WordPress.

Mencipta Kod Templat

Mulakan dengan mencipta fail templat di mana anda mahu butang "Muat Lagi Catatan" dipaparkan. Dalam contoh ini, kami akan menggunakan index.php. Tambahkan kod berikut pada templat anda:

<div>

Fungsi untuk Memuatkan Lagi Siaran

Seterusnya, buat fungsi dalam fail functions.php anda untuk mengendalikan panggilan Ajax untuk memuatkan lebih banyak siaran. Fungsi ini akan membuat pertanyaan untuk set siaran seterusnya berdasarkan halaman semasa dan bilangan catatan setiap halaman.

function more_post_ajax(){
    // Get parameters from the Ajax request
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    // Prepare query arguments
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
    ];

    // Perform the query
    $loop = new WP_Query($args);

    // Output the posts
    while ($loop->have_posts()) : $loop->the_post(); 
        the_content();
    endwhile;
    exit; 
}

// Hook the function to the WordPress Ajax action
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');

Skrip Ajax jQuery

Dalam pengaki anda, sertakan skrip jQuery berikut untuk mengendalikan fungsi butang Ajax:

<script type="text/javascript">
    jQuery(document).ready( function($) {
        // Ajax post endpoint
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";

        // Page counter
        var page = 5; 
        // Posts per page
        var ppp = 3; 

        // Event handler for the "Load More Posts" button
        $("[id^=more_posts]").on("click", function() {
            $("[id^=more_posts]").attr("disabled", true);

            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                $("[id^=more_posts]").attr("disabled", false);
            });
        });
    });
</script>

Menyesuaikan Fungsi

Kod yang disediakan ialah contoh asas. Anda boleh menyesuaikannya agar sepadan dengan keperluan khusus anda, seperti:

• Parameter pertanyaan: Tambahkan parameter tambahan pada hujah pertanyaan untuk menapis siaran berdasarkan kriteria tertentu (mis., kategori, tag).
• Penomboran: Tambah pautan penomboran untuk menavigasi antara halaman siaran.
• Tatal tak terhingga: Gunakan acara tatal untuk memuatkan lebih banyak siaran secara automatik semasa pengguna menatal ke bawah halaman.

Dengan mengikuti langkah ini, anda boleh laksanakan butang "Muat Lebih Banyak Catatan" yang berfungsi dalam WordPress menggunakan Ajax, meningkatkan pengalaman pengguna untuk pelawat anda yang melayari kandungan yang besar set.

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