WordPress에서 Ajax를 사용하여 \'더 많은 게시물 로드\' 버튼을 구현하는 방법은 무엇입니까?

WordPress의 추가 게시물 Ajax 버튼

Ajax를 통해 더 많은 게시물을 로드하는 것은 콘텐츠의 양이 많은 웹사이트에서 일반적으로 필요합니다. 이를 통해 사용자는 전체 페이지를 새로 고치지 않고도 여러 콘텐츠 페이지를 탐색할 수 있습니다. 이 기사에서는 WordPress에서 Ajax를 사용하여 "더 많은 게시물 로드" 버튼을 구현하는 단계를 살펴보겠습니다.

템플릿 코드 생성

"추가 게시물 로드" 버튼을 표시할 템플릿 파일입니다. 이 예에서는 index.php를 사용합니다. 템플릿에 다음 코드를 추가하세요.

<div>

더 많은 게시물을 로드하는 함수

다음으로 Ajax 호출을 처리하는 function.php 파일에 함수를 만듭니다. 더 많은 게시물을 로드하려면 이 함수는 현재 페이지와 페이지당 게시물 수를 기반으로 다음 게시물 세트를 쿼리합니다.

function more_post_ajax(){
    // Get parameters from the Ajax request
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    // Prepare query arguments
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
    ];

    // Perform the query
    $loop = new WP_Query($args);

    // Output the posts
    while ($loop->have_posts()) : $loop->the_post(); 
        the_content();
    endwhile;
    exit; 
}

// Hook the function to the WordPress Ajax action
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');

jQuery Ajax Script

바닥글에서 Ajax 버튼 기능을 처리하려면 다음 jQuery 스크립트를 포함하세요.

<script type="text/javascript">
    jQuery(document).ready( function($) {
        // Ajax post endpoint
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";

        // Page counter
        var page = 5; 
        // Posts per page
        var ppp = 3; 

        // Event handler for the "Load More Posts" button
        $("[id^=more_posts]").on("click", function() {
            $("[id^=more_posts]").attr("disabled", true);

            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                $("[id^=more_posts]").attr("disabled", false);
            });
        });
    });
</script>

사용자 정의 기능

제공된 코드는 기본 예시입니다. 다음과 같이 특정 요구 사항에 맞게 사용자 정의할 수 있습니다.

• 쿼리 매개변수: 쿼리 인수에 추가 매개변수를 추가하여 특정 기준(예: 카테고리, 태그).
• 페이지 매김: 페이지 간을 탐색하려면 페이지 매김 링크를 추가하세요.
• 무한 스크롤: 스크롤 이벤트를 사용하면 사용자가 페이지를 아래로 스크롤할 때 자동으로 더 많은 게시물을 로드할 수 있습니다.

다음 단계에 따라 다음을 수행할 수 있습니다. Ajax를 사용하여 WordPress에 기능적인 "추가 게시물 로드" 버튼을 구현하여 대규모 콘텐츠 세트를 탐색하는 방문자의 사용자 경험을 향상시킵니다.

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