[JQUERY] 워드 프레스의 게시물 아약스 버튼을로드

워드 프레스의 게시물 아약스 버튼을로드

해결법

1. ---

   1.그래서 확인해 주시기 내 페이지 https://madebydenis.com/ajax-load-posts-on-wordpress/ 스물 16 개의 테마에이를 구현하는 방법에 대한 자습서를 만들었습니다 :)

   그래서 확인해 주시기 내 페이지 https://madebydenis.com/ajax-load-posts-on-wordpress/ 스물 16 개의 테마에이를 구현하는 방법에 대한 자습서를 만들었습니다 :)

   나는 스물 다섯에이 테스트를했는데 그것은 당신을 위해 일해야한다 그래서, 일하고있어.

   의 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 개 게시물이 의지 출력 (I 내가 그것을 사용, 그래서 당신은 당신이 원하는대로 사용할 수 있습니다, 그 카테고리에 게시물을했다). 당신은 당신이에있어 범주를 조회 할 수 있습니다

   $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 후. 이것은 우리가 우리의 아약스 호출을 호출 할 때 우리가 그것을 사용할 수 있도록 워드 프레스 자신의 관리자 - ajax.php을로드합니다.

   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, 당신은 $ 고양이를 넣어 것입니다. 이는 $ _POST 배열에있을 것입니다, 당신은 아약스에서 사용할 수 있습니다.

   마지막 부분은 아약스 자체입니다. functions.js에서 나는 $ 내부 (문서) .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();
       }
   });
   

   이것은 load_posts를 실행해야합니다 () 함수를 사용하면 페이지 하단에서 100 픽셀을있을 때. 내 사이트에 튜토리얼의 경우에는 게시물 (2 회 아약스의 발사 방지하기 위해)로드되어 있는지 검사를 추가 할 수 있으며, 스크롤이 바닥 글의 상단에 도달하면 당신은 그것을 해고 할 수

   $(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();
           }
       }
   });
   

   지금은 단지 이러한 경우 단점은 $의 값 (문서) .height의 () 스크롤 않을 수 있다는 것입니다 -.. 100 $ ( '바닥 글') 오프셋 (offset) 어떤 이유로 최고. 그렇게해야하는 경우 스크롤이가는 곳, 바로 수를 늘립니다.

   당신은 쉽게 당신의 코드에서 console.logs를 넣어 그것을 확인하고는 밖으로 던져 무엇 관리자에서 볼 수 있습니다

   $(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();
       }
   });
   

   그리고 바로 따라 조정)

   이 도움이 :) 당신은 질문이있는 경우에는 바로 문의 바랍니다.

2. ---

   2.그때 카테고리를 사용하지 않는 경우 어떻게이 코드를 사용할 수 있습니까? 사실, 사용자 정의 포스트 유형이 코드를 사용하고 싶습니다.

   그때 카테고리를 사용하지 않는 경우 어떻게이 코드를 사용할 수 있습니까? 사실, 사용자 정의 포스트 유형이 코드를 사용하고 싶습니다.

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