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.
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.
Setelah analisis coretan kod yang disediakan, beberapa isu yang berpotensi muncul :
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>'.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(); }); });
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!