Doppelte Beiträge auf AJAX-Aufruf in WordPress

Question

Ich habe versucht, eine Schaltfläche "mehr laden" in WordPress einzurichten. Einfache Idee, drücken Sie die Taste und es lädt mehr Beiträge mit AJAX, ohne die Seite neu zu laden oder Seitenumbruch zu verwenden.

Ich folgte einem previous article auf SO und habe es geschafft, es meist zu arbeiten.

Bis jetzt konnte ich weitere Posts erhalten, die gut geladen sind, aber aus irgendeinem Grund werden sie dupliziert. Ich habe mir die Registerkarte "Netzwerke" angeschaut und es scheint, dass jedes Mal, wenn ich den Knopf drücke, admin-ajax.php zweimal läuft, was vermutlich die Ursache für die Duplizierung ist. Leider bin ich mir nicht sicher, was ich ändern muss, um das Problem zu lösen.

Es wäre auch sehr hilfreich zu wissen, wie dies funktioniert für benutzerdefinierte Post-Typen sowie normale Posts. Auf meiner Website habe ich zwei Post-Typen, Standard-Blog-Posts und einen benutzerdefinierten Post-Typ "Projekte". Jeder hat seine eigene Seite und eigene Schleife, wie würde ich die oben genannten ändern, um es für beide zu arbeiten? Würde ich die ganze Sache zweimal aufschreiben müssen oder vielleicht ist es etwas einfacher?

Irgendwelche Ideen Leute? Hier

ist die HTML:

<section id="ajax-posts" class="layout"> 
    <?php get_template_part('content', 'blog'); ?> 
</section> 
<div class="load-more layout"> 
    <a id="more_posts" class="button"><span class="icon-plus"></span></a> 
</div> 

Hier ist die Hauptschleife:

<?php 
    $postsPerPage = 1; 
    $args = array(
'post_type' => 'post', 
'posts_per_page' => $postsPerPage 
); 

$loop = new WP_Query($args); 
while ($loop->have_posts()) : $loop->the_post(); 
?> 

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail();?></a> 
<div class="inner-text"> 
<h4 class="post-title"><?php the_title(); ?></h4> 
<h5><span class="icon-calendar"></span> <?php the_date(); ?></h5> 
<?php the_excerpt(); ?> 
<a href="<?php the_permalink(); ?>" class="button">Read More<span class="icon-arrow-right2"></span></a> 
</div> 
</article> 
<?php endwhile; wp_reset_postdata(); ?> 

Hier ist meine functions.php:

function wpt_theme_js() { 

wp_enqueue_script('bigredpod-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '', true); 
wp_localize_script('bigredpod-script', 'ajax_posts', array(
    'ajaxurl' => admin_url('admin-ajax.php'), 
    'noposts' => __('No older posts found', 'bigredpod'), 
)); 

} 

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

function more_post_ajax(){ 

$ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 1; 
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0; 

header("Content-Type: text/html"); 

$args = array(
    'suppress_filters' => true, 
    'posts_per_page' => $ppp, 
    'paged' => $page, 
); 

$loop = new WP_Query($args); 

$out = ''; 

if ($loop -> have_posts()) : while ($loop -> have_posts()) : $loop -> the_post(); 
    $out .= 

     '<article id="post-'. get_the_ID().'" class="'. implode(' ', get_post_class()) .'"> 
      <a href="'.get_the_permalink().'">'.get_the_post_thumbnail().'</a> 
      <div class="inner-text"> 
     <h4 class="post-title">'.get_the_title().'</h4> 
     <h5><span class="icon-calendar"></span> '.get_the_date().'</h5> 
     <p>'.get_the_excerpt().'</p> 
     <a href="'.get_the_permalink().'" class="button">Read More<span class="icon-arrow-right2"></span></a> 
      </div> 
     </article>'; 

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

Hier ist meine JS:

jQuery(document).ready(function($) { 
var ppp = 1; // Post per page 
var pageNumber = 1; 


function load_posts(){ 
pageNumber++; 
var str = '&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").addClass('posts_loading'); 
     } else{ 
      $("#more_posts").removeClass('posts_loading').addClass('no_more_posts'); 
     } 
    }, 
    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(); 
    }); 
}); 

Answer 1

Sie haben zweimal

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

In Ihrer wpt_theme_js() Funktion setzen. Dies verursacht wahrscheinlich, dass der Ajax zweimal geladen wird.