加載更多的按鈕，將加載更多的帖子

Question

我一直試圖添加一個加載更多按鈕到我的頭版幾個月了。對於我的首頁，我有一個查詢，顯示我的最新帖子，每頁15。我想要一個簡單的加載更多按鈕，它會在前15個帖子後開始，並在每15個帖子後出現。我認爲這樣做很簡單，但我無法弄清楚如何設置它的生活。如果有人能幫助我，我會非常感激。

前page.php文件

<?php 
 
/* 
 
* Template Name: 
 
*/ 
 

 
get_header(); 
 
get_template_part ('inc/carousel'); 
 

 
$the_query = new WP_Query([ 
 
'posts_per_page' => 15, 
 
'paged' => get_query_var('paged', 1) 
 
]); 
 

 
if ($the_query->have_posts()) { ?> 
 
<div id="ajax"> 
 
<?php 
 
$i = 0; 
 
$j = 0; 
 
while ($the_query->have_posts()) { $the_query->the_post(); 
 

 
if ($i % 5 === 0) { // Large post: on the first iteration and every 7th post after... ?> 
 
<div class="row"> 
 
<article <?php post_class('col-sm-12 col-md-12'); ?>> 
 
<div class="large-front-container"> 
 
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> 
 
</div> 
 
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'); ?></div> 
 
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
 
<div class="front-page-post-info"> 
 
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
<?php get_template_part('front-shop-the-post'); ?> 
 
<?php get_template_part('share-buttons'); ?> 
 
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
 
</div> 
 
</article> 
 
</div> 
 

 
<?php 
 

 
} else { // Small posts ?> 
 
<?php if($j % 2 === 0) echo '<div class="row">'; ?> 
 
<article <?php post_class('col-sm-6 col-md-6'); ?>> 
 
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
 
<div class="front-page-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></div> 
 
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
 
<div class="front-page-post-info"> 
 
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
<?php get_template_part('front-shop-the-post'); ?> 
 
<?php get_template_part('share-buttons'); ?> 
 
    <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
 
    </div> 
 

 
</article> 
 

 
<?php $j++; if($j % 2 === 0) echo '</div>'; ?> 
 
<?php 
 
} 
 
$i++; 
 
}?> 
 

 
</div> 
 
<?php if(get_query_var('paged') < $the_query->max_num_pages) { ?> 
 
<?php 
 
} 
 
} 
 
elseif (!get_query_var('paged') || get_query_var('paged') == '1') { 
 
echo '<p>Sorry, no posts matched your criteria.</p>'; 
 
} 
 
get_footer();

Answer 1

我不打算進入一個巨大的深度的量，但你會需要一個按鈕，像這樣在底部您的文章 <div id="load-more">Load More< /div>

然後，您會需要一些JavaScript/jQuery來觀看當按下此按鈕

$('#load-more').on('click', function() { 
    console.debug("Load More button pressed"); 
}); 

從那裏你將需要做一個小小的PHP腳本來獲得接下來的15個職位。然後你需要從javascript調用它。我不寫代碼WP非常頻繁，但它可能看起來有點像這樣

$lastPostId = $_GET['lastid']; // this will need to be passed from the javascript at a later point. 
$posts = []; 
$the_query = new WP_Query([ 
    'posts_per_page' => 15, 
    'paged' => get_query_var('paged', $lastPostId) 
]); 

if ($the_query->have_posts()) { 
    while ($the_query->have_posts()) { 
     $the_query->the_post(); 
     $posts[] = ""// See comment bellow 
    } 
} 
$response = ["posts" => $posts]; 
echo json_encode($response); 

從這裏，你需要弄清楚要如何通過你的文章的數據傳回的JavaScript。你在這裏有兩個選項。您可以在響應內部呈現html視圖，或將數據解析爲json格式並將其返回給您的javascript。

從這裏我們將需要處理您的PHP腳本的響應。

注意：這取決於你如何處理獲得最後的id部分。從邏輯上講，你可以再補充一個data-id到每個崗位容器中，然後使用jQuery來獲取最後孩子的data-id

$('#load-more').on('click', function() { 
    var lastId = 15; 
    // Now we make the query and handle it 
    $.get("myabovephpscript.php", {lastid: lastId}, function(data) { 
     // for this example I'm going to to assume you've prebuilt the 
     // html so we're going to append it to the page. 
     for(let i = 0; i < data.posts.length; i ++) { 
      $('#postsContainer').append(data.posts[i].postData); 
     } 
    }); 
}); 

，我們就大功告成了。你所要做的就是填空，整理一下。小的免責聲明。我還沒有測試過。我剛剛寫了這些類型的系統很多次。