重複發佈在WordPress

Question

我試圖建立一個「裝載更多」按鈕，在WordPress。簡單的想法，你按下按鈕，它使用AJAX加載更多的帖子，無需重新加載頁面或需要使用分頁。

我也跟着上一個SO和previous article設法得到它的主要工作。

到目前爲止，我已經能夠獲得額外的帖子加載罰款，但由於某些原因，他們被複制。我看了一下Networks標籤，似乎每次按下按鈕時，admin-ajax.php都會運行兩次，我懷疑是造成重複的原因。不幸的是，我不太確定我需要改變以解決這個問題。

這也將是很有益知道如何得到這個工作的自定義文章類型以及正常的職位。在我的網站上，我有兩種帖子類型，標準博客帖子和自定義的「項目」帖子類型。每個人都有自己的頁面和自己的循環，我將如何修改上述以使其適用於兩者？我需要兩次寫出整個事情還是更簡單一些？

任何想法的傢伙？

下面是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> 

這裏是主循環：

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

這裏是我的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'); ?> 

這裏是我的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

你已經把兩次

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

在你wpt_theme_js()功能。這可能是導致ajax加載兩次的原因。