내 WordPress \'더 많은 게시물 로드\' 버튼이 AJAX와 작동하지 않는 이유는 무엇입니까?

WordPress에서 AJAX를 사용하여 더 많은 게시물 로드 구현

소개:

AJAX를 통해 게시물을 동적으로 로드하는 것은 일반적으로 추구되는 방식입니다. WordPress 개발의 기능 이후. 이를 통해 사용자는 전체 페이지를 다시 로드하지 않고도 더 많은 콘텐츠를 탐색할 수 있어 사용자 경험이 향상됩니다. 이 문서에서는 AJAX를 사용하여 더 많은 게시물 로드를 구현할 때 많은 사람들이 직면하는 일반적인 문제를 다룹니다.

문제 설명:

사용자가 AJAX를 사용하여 페이지 매김을 구현하려고 시도했지만 어려움에 직면하여 눈에 띄는 변경 사항이 없습니다. 페이지가 표시되지 않고 추가로드 버튼이 오작동합니다. 요소를 검사하고 jQuery에서 예상되는 동작을 관찰했음에도 불구하고 게시물이 페이지에 추가되지 않았습니다.

해결책:

제공된 코드 조각을 분석한 결과 몇 가지 잠재적인 문제가 나타났습니다. :

1. jQuery: $.post 호출의 오프셋 속성은 (페이지 * (page - 1) * ppp 대신 ppp) 1을 사용합니다. 다음 게시물 세트에 대한 오프셋을 올바르게 계산하려면 이 공식을 (페이지 - 1) * ppp로 조정해야 합니다.
2. AJAX 함수: function.php의 more_post_ajax 함수에서 offset 속성은 paged 속성과 함께 사용해야 합니다. 이렇게 하면 WP_Query가 적절한 게시물 페이지를 검색하게 됩니다.
3. php: 코드 어딘가에 닫는 PHP 태그가 누락되어 코드가 손상될 수 있습니다.
4. WordPress 스크립트 현지화: more_post_ajax 함수는 WordPress 스크립트로 현지화되어야 합니다. 스크립트 현지화는 function.js에서 스크립트를 로드하기 전에 배치되어야 합니다. 이를 통해 JavaScript 코드 내에서 ajax_posts 객체를 사용할 수 있습니다.

개정 코드:**

템플릿 파일(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 id="get-the-title">'.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!