소개:
AJAX를 통해 게시물을 동적으로 로드하는 것은 일반적으로 추구되는 방식입니다. WordPress 개발의 기능 이후. 이를 통해 사용자는 전체 페이지를 다시 로드하지 않고도 더 많은 콘텐츠를 탐색할 수 있어 사용자 경험이 향상됩니다. 이 문서에서는 AJAX를 사용하여 더 많은 게시물 로드를 구현할 때 많은 사람들이 직면하는 일반적인 문제를 다룹니다.
사용자가 AJAX를 사용하여 페이지 매김을 구현하려고 시도했지만 어려움에 직면하여 눈에 띄는 변경 사항이 없습니다. 페이지가 표시되지 않고 추가로드 버튼이 오작동합니다. 요소를 검사하고 jQuery에서 예상되는 동작을 관찰했음에도 불구하고 게시물이 페이지에 추가되지 않았습니다.
제공된 코드 조각을 분석한 결과 몇 가지 잠재적인 문제가 나타났습니다. :
템플릿 파일(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, ];
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(); }); });
이러한 문제를 신중하게 해결함으로써 , AJAX를 사용하여 더 많은 게시물 로드 기능을 성공적으로 구현할 수 있습니다. 오프셋 공식과 WordPress 스크립트 현지화는 JavaScript 코드 내에서 WordPress 변수에 대한 적절한 페이지 매김 및 액세스를 보장하는 데 중요한 역할을 합니다. 이러한 수정으로 인해 추가 게시물을 페이지에 동적으로 로드하는 완전한 기능을 갖춘 추가 로드 버튼이 생성됩니다.
위 내용은 내 WordPress \'더 많은 게시물 로드\' 버튼이 AJAX와 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!