WordPress에서 Ajax 기반 \'더 보기\' 게시물을 구현하는 방법은 무엇입니까?

WordPress에서 Ajax를 통해 더 많은 게시물 로드

WordPress에서 게시물을 동적으로 로드하기 위해 "더 보기" 버튼을 구현하려면 PHP와 자바스크립트. 특정 접근 방식을 설명했지만 코드의 기능이나 효율성에 영향을 미치는 추가 요소가 있을 수 있습니다. 수정되고 향상된 솔루션은 다음과 같습니다.

HTML 마크업:

<div>
<p><strong>함수 PHP 파일:</strong></p>
<pre class="brush:php;toolbar:false">function more_post_ajax() {
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    header("Content-Type: text/html");
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 1,
        'offset' => $offset,
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts()) {
        $loop->the_post();
        the_content();
    }
    exit;
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

wp_localize_script(
    'twentyfifteen-script',
    'ajax_posts',
    array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'noposts' => __('No older posts found', 'twentyfifteen'),
    )
);

jQuery 기능:

var ppp = 3; // Posts per page
var page = 5; // Current page number, starting from 1

$('#more_posts').click(function() {
    $('#more_posts').attr('disabled', true);
    var offset = (page * ppp) + 1;

    $.post(
        ajax_posts.ajaxurl,
        {
            action: 'more_post_ajax',
            offset: offset,
            ppp: ppp,
        }
    ).success(function(posts) {
        page++;
        $('#ajax-posts').append(posts);
        $('#more_posts').attr('disabled', false);
    });
});

추가 고려 사항:

• 카테고리 필터링: 데이터를 추가하여 카테고리 필터링을 통합할 수 있습니다. 카테고리 ID를 사용하여 '추가 로드' 버튼에 속성을 지정합니다. 그런 다음 PHP 코드의 $_POST 배열에서 카테고리 ID를 검색하고 쿼리 인수에 'cat' 매개변수를 포함합니다.
• 무한 로드: 무한 스크롤의 경우 다음을 사용할 수 있습니다. 사용자가 페이지를 아래로 스크롤할 때 게시물을 자동으로 로드하는 jQuery의 스크롤 이벤트입니다. 한 가지 접근 방식은 페이지 하단에서 뷰포트 상단까지의 거리가 임계값(예: 100픽셀) 미만일 때 게시물을 로드하는 것입니다.
• 로딩 표시기: 게시물이 로드되는 동안 사용자에게 시각적 피드백을 제공하는 로딩 스피너 또는 표시기.
• 오류 처리: 적절한 오류 처리를 보장하세요. Ajax 요청 또는 사후 처리 중에 발생할 수 있는 잠재적인 오류를 처리하기 위해 PHP와 JavaScript 코드 모두에서 사용됩니다.