2016-01-12 77 views
0

我試着用ajax加載更多文章。我發現在線和計算器中有很多插件和解決方案。但對我來說沒有任何工作。其實我想在沒有插件的情況下做到這一點。所以我可以在不同的頁面存檔或不同的頁面模板中使用它,我需要這些代碼。wp文章ajax加載更多

這是我的代碼,我從另一個問題在stackoverflow。我的分數較低,所以我不能在那裏發表評論。

這裏是我的的index.php代碼:

<?php get_header(); ?> 

<div class="ajax-posts"> 
<?php 
    $postsPerPage = 3; 
    $args = array(
     'post_type' => 'post', 
     'posts_per_page' => $postsPerPage, 
    ); 
    $loop = new WP_Query($args); 

    while ($loop->have_posts()) : $loop->the_post(); 
?> 
<h2><?php the_title(); ?></h2> 
<?php 
    endwhile; 
    echo '<a id="more_posts" href="#">Load More</a>'; 
    wp_reset_postdata(); 
?> 
</div> 
<script type="text/javascript"> 
    var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>"; 
    var page = 1;. 
    var ppp = 3; 

    $("#more_posts").on("click",function(){ 
     $("#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); // CHANGE THIS! 
      $("#more_posts").attr("disabled",false); 
     }); 

    }); 

</script> 
<?php get_footer(); ?> 

這裏是的functions.php代碼

<?php 
function more_post_ajax(){ 
    $offset = $_POST["offset"]; 
    $ppp = $_POST["ppp"]; 
    header("Content-Type: text/html"); 

    $args = array(
     'post_type' => 'post', 
     'posts_per_page' => $ppp, 
     'offset' => $offset, 
    ); 

    $loop = new WP_Query($args); 
    while ($loop->have_posts()) { $loop->the_post(); 
     the_title(); 
    } 
    exit; 
} 

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); 
add_action('wp_ajax_more_post_ajax', 'more_post_ajax'); 
?> 

我不知道爲什麼帖子無法加載或不能工作負載更鏈接。我希望有人會幫助。

編號:https://stackoverflow.com/a/31588401/5545813

+0

可能的複製(http://stackoverflow.com/questions/ 33999193/wordpress-load-more-posts-onclick -with-ajax-request-jquery) – Nozifel

+0

你好@Nozifel我已經試過你的答案,無法修復我的問題。請檢查我的代碼,讓我知道我做了什麼錯誤! –

+0

您的請求後是否收到回覆? 我建議你先改變'退出'去死();' 我等你回答。 – Nozifel

回答

0

更好的方法是用烏爾帖子標題返回數組。然後在成功後顯示它們。如果數組長度爲< ppp(不存在更多帖子)。

$array_return = array(); 
$loop = new WP_Query($args); 
while ($loop->have_posts()) { $loop->the_post(); 
$content = "<h1>" . get_the_title() . "</h1>"; 
$content .= "<div>" . get_the_content() . "</div>"; 
$content .= "<div>" . get_field("your_field") . "</div>"; 
$array_return[] = $content; 
} 
echo json_encode($array_return); 
die(); 

在你的js腳本,

var posts = JSON.parse(posts); 
for(var i = 0; i < posts.length; i++) 
    $(".ajax-posts").append(posts[i]); 

if(posts.length < ur_ppp) 
    $("#more_posts").fadeOut(); 

喜歡的東西[WordPress的加載更多信息的onclick與Ajax請求的jQuery]那

+0

不僅有我想要的標題..我的帖子有標題,內容和acf字段 –

+0

JSON.parse顯示錯誤! –

+0

我犯了一個錯誤。我的編輯我的代碼(錯誤:json_encoRe => json_encode) – Nozifel