WordPress에서 AJAX \'더 많은 게시물 로드\' 기능을 구현하는 방법은 무엇입니까?

WordPress에서 AJAX "추가 게시물 로드" 기능을 구현하는 방법

이 문서에서는 AJAX "추가 게시물 로드" 구현 문제를 다룹니다. " 기능을 사용하면 사용자가 전체 게시물을 다시 로드하지 않고도 웹페이지에 추가 게시물을 동적으로 로드할 수 있습니다. page.

문제 설명

사용자가 "Custom WP_Query Ajax의 페이지 매김"에서 언급한 방법을 포함하여 다양한 방법을 사용하여 이 기능을 구현하려고 시도하는 동안 어려움을 겪었습니다. post.

솔루션

제공되는 솔루션은 올바른 기능을 보장하기 위해 코드를 개선하는 데 중점을 둡니다. 주요 측면은 다음과 같습니다.

1. 서버측 코드

• 템플릿 파일에서 초기 게시물 쿼리가 페이지당 원하는 게시물 수를 반환하는지 확인하세요.
• 함수 파일에서 함수를 생성하세요. AJAX 요청을 처리하고 더 많은 게시물을 동적으로 로드합니다. 이 함수에는 올바른 게시물 집합을 검색하기 위한 페이지 매김 논리가 포함되어야 합니다.

2. 클라이언트 측 코드(jQuery)

• 클라이언트 측에서 이벤트 리스너를 "더 보기" 버튼에 바인딩합니다.
• 버튼을 클릭하면 전송 jQuery를 사용하여 서버 측 함수에 대한 AJAX 요청.
• 오프셋 및 게시물 수와 같은 필수 매개변수를 전달합니다. 페이지.
• 반환된 HTML을 기존 게시물 목록에 추가합니다.

3. 추가 고려 사항

• 더 이상 로드할 게시물이 없는 경우에는 "추가 로드" 버튼을 비활성화하여 처리하세요.
• "무한 로드" 효과를 만들려면 창 스크롤을 사용하세요. 버튼 클릭 이벤트 대신

코드 구현

제공된 코드 스니펫에 따라 솔루션:

functions.php:

/**
 * Handle AJAX "Load More" request
 */
function load_more_posts() {
    $offset = $_POST['offset'];
    $ppp = $_POST['ppp'];

    $args = [
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
        // Other query parameters...
    ];

    $query = new WP_Query($args);
    $html = '';

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $html .= '<div>' . get_the_content() . '</div>';
        }
        wp_reset_postdata();
    } else {
        $html = 'No more posts to load';
    }

    echo $html;
    exit();
}

add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

script.js:

$(function() {
    var offset = 0;
    var ppp = 3;

    $('#load-more').on('click', function() {
        $.ajax({
            type: 'POST',
            url: 'path/to/wp-admin/admin-ajax.php',
            data: {
                action: 'load_more_posts',
                offset: offset,
                ppp: ppp
            },
            success: function(response) {
                $('#posts').append(response);
                offset += ppp;
            }
        });

        // Prevent the button from triggering multiple AJAX requests
        $('#load-more').attr('disabled', true);
    });
});

참고 : 'path/to/wp-admin/admin-ajax.php'를 실제 경로로 교체하세요. WordPress admin-ajax.php 파일의 URL.

결론

이 단계를 따르면 WordPress에 AJAX "더 많은 게시물 로드" 기능을 효과적으로 구현할 수 있습니다. 사이트를 통해 사용자는 전체 페이지를 새로 고치지 않고도 많은 양의 콘텐츠를 원활하게 탐색할 수 있습니다.

위 내용은 WordPress에서 AJAX \'더 많은 게시물 로드\' 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!