Rumah > pembangunan bahagian belakang > tutorial php > Mengapa Butang \'Muat Lebih Banyak Catatan\' WordPress Saya Tidak Berfungsi dengan AJAX?

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

Mary-Kate Olsen
Lepaskan: 2024-11-28 04:56:10
asal
429 orang telah melayarinya

Why Isn't My WordPress

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,
];
Salin selepas log masuk

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>'.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');
Salin selepas log masuk

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();
    });
});
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan