더 많은 게시물을로드 Wordpress에서 아약스 버튼

더 많은 게시물을로드 Wordpress에서 아약스 버튼

나는 낡은 질문을 통해 살펴본 적이 있으며, 이것을 할 수있는 여러 가지 방법을 시도했다. 가장 가까운 것은 여기에 있습니다. 사용자 정의 WP_Query Ajax에서 페이지 매김을 구현하는 방법

나는 모든 것을 시도하고 그것은 단지 일을하지 않습니다. 페이지에서 전혀 변화가 없습니다. 추가로드 버튼을 검사하고 클릭하면 jquery는 로드 더보기 에서 더로드 그게 나에게 맞는 것 같아. 게시물을 추가하지 않아서, 뭔가 간단하지 않은 것 같아요. 그러나 나에게있어서 나는 그것을 해결할 수 없습니다.

내 서식 파일의 코드는 다음과 같습니다.

<div id="ajax-posts" class="row">
    <?php 
    $postsPerPage = 3;
    $args = [
        'post_type' => 'post',
        'posts_per_page' => $postsPerPage,
        'cat' => 1
    ];

    $loop = new WP_Query($args);

    while ($loop->have_posts()) : $loop->the_post(); ?>
        <div class="small-12 large-4 columns">
            <h1><?php the_title(); ?></h1>
            <p><?php the_content(); ?></p>
        </div>
        <?php
    endwhile; 

    echo '<a id="more_posts">Load More</a>';

    wp_reset_postdata(); 
    ?>
</div>

함수 파일의 코드는 다음과 같습니다.

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');

그리고 제 꼬리표의 JQuery는 다음과 같습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready( function($) {
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";

        // What page we are on.
        var page = 5; 
        // Post per page
        var ppp = 3; 

        $("#more_posts").on("click", function() {
            // When btn is pressed.
            $("#more_posts").attr("disabled",true);

            // Disable the button, temp.
            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                // CHANGE THIS!
                $("#more_posts").attr("disabled", false);
            });
        });
    });
</script>

아무도 내가 누락되거나 도움이 될만한 것을 볼 수 있습니까?

해결법

1. ==============================

   1.내 페이지 https://madebydenis.com/ajax-load-posts-on-wordpress/에 대한 자습서를 만들었습니다.이 주제를 20 개 주제로 구현하는 방법에 대해 알아보십시오.

   내 페이지 https://madebydenis.com/ajax-load-posts-on-wordpress/에 대한 자습서를 만들었습니다.이 주제를 20 개 주제로 구현하는 방법에 대해 알아보십시오.

   나는 이것을 Twenty 15에서 테스트했으며 작동하고 있으므로 여러분을 위해 일해야합니다.

   index.php (메인 페이지에 글을 보여주고 싶다고 가정하고 있지만 페이지 템플릿에 넣어도 작동 할 것입니다) :

       <div id="ajax-posts" class="row">
           <?php
               $postsPerPage = 3;
               $args = array(
                       'post_type' => 'post',
                       'posts_per_page' => $postsPerPage,
                       'cat' => 8
               );
   
               $loop = new WP_Query($args);
   
               while ($loop->have_posts()) : $loop->the_post();
           ?>
   
            <div class="small-12 large-4 columns">
                   <h1><?php the_title(); ?></h1>
                   <p><?php the_content(); ?></p>
            </div>
   
            <?php
                   endwhile;
           wp_reset_postdata();
            ?>
       </div>
       <div id="more_posts">Load More</div>
   

   이것은 카테고리 8에서 3 개의 게시물을 출력합니다. (나는 그 카테고리에 게시물을 가지고있어서 그것을 사용 했으므로 원하는대로 사용할 수 있습니다.) 함께있는 카테고리를 쿼리 할 수도 있습니다.

   $cat_id = get_query_var('cat');
   

   이렇게하면 쿼리에 사용할 카테고리 ID가 제공됩니다. 로더에 넣을 수 있고 (더 많은 div를로드하십시오), jQuery와 같이

   <div id="more_posts" data-category="<?php echo $cat_id; ?>">>Load More</div>
   

   카테고리를

   var cat = $('#more_posts').data('category');
   

   하지만 지금은이 문제를 해결할 수 있습니다.

   functions.php에서 다음을 추가했습니다.

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

   기존 wp_localize_script 바로 다음에. 이것은 wordpress 자신의 admin-ajax.php를 로딩하여 우리의 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' => 8,
           'paged'    => $page,
       );
   
       $loop = new WP_Query($args);
   
       $out = '';
   
       if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
           $out .= '<div class="small-12 large-4 columns">
                   <h1>'.get_the_title().'</h1>
                   <p>'.get_the_content().'</p>
            </div>';
   
       endwhile;
       endif;
       wp_reset_postdata();
       die($out);
   }
   
   add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
   add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
   

   여기서 배열에 페이징 된 키를 추가 했으므로 루프를 통해 게시물을로드 할 때 어떤 페이지에 있는지 추적 할 수 있습니다.

   로더에 카테고리를 추가 한 경우 다음을 추가하십시오.

   $cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';
   

   그리고 8 대신에 $ cat을 넣을 것입니다. 이것은 $ _POST 배열에 있으며, 아약스에서 사용할 수 있습니다.

   마지막 부분은 아약스 자체입니다. functions.js에서 나는 $ (document) .ready (); 환경

   var ppp = 3; // Post per page
   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(){ // When btn is pressed.
       $("#more_posts").attr("disabled",true); // Disable the button, temp.
       load_posts();
   });
   

   그것을 저장하고, 그것을 테스트하고, 그것은 작동합니다 :)

   증거로서의 이미지 (겉만 번지르르 한 스타일링에 신경 쓸 필요는 없습니다.) 또한 게시물 콘텐츠는 횡설수설 xD입니다.

   최신 정보

   '무한로드'대신 버튼의 클릭 이벤트 (눈에 보이지 않게 보이게 : 숨김;)로 시도해보십시오.

   $(window).on('scroll', function () {
       if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) {
           load_posts();
       }
   });
   

   페이지 하단에서 100 픽셀이면 load_posts () 함수를 실행해야합니다. 내 사이트의 튜토리얼의 경우 게시물이로드되는지 확인하기 위해 수표를 추가하여 (아약스가 두 번 발사되는 것을 방지하기 위해), 스크롤이 바닥 글의 맨 위에 도달하면 시작할 수 있습니다

   $(window).on('scroll', function(){
       if($('body').scrollTop()+$(window).height() > $('footer').offset().top){
           if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){
                   load_posts();
           }
       }
   });
   

   이러한 경우의 단점은 $ (document) .height () - 100 또는 $ ( 'footer') .offset ()의 값으로 절대로 스크롤 할 수 없다는 것입니다. 그런 일이 발생하면 스크롤이가는 번호를 늘리십시오.

   console.logs를 코드에 넣고 inspector에서 무엇을 던지는지 확인하면 쉽게 확인할 수 있습니다

   $(window).on('scroll', function () {
       console.log($(window).scrollTop() + $(window).height());
       console.log($(document).height() - 100);
       if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) {
           load_posts();
       }
   });
   

   그리고 그에 맞게 조정하십시오.)

   희망이 도움이 :) 당신은 질문이 있으면 그냥 물어보십시오.

from https://stackoverflow.com/questions/31587210/load-more-posts-ajax-button-in-wordpress by cc-by-sa and MIT license