もっと多くの投稿を読み込むボタンをもっと読み込む

Question

私は数ヶ月間、フロントページにもっと多くのボタンを追加しようとしています。私の最初のページには、最新の投稿、1ページあたり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"); 
}); 

そこから、次の15の投稿を取得するために少しPHPスクリプトを作成する必要があります。その後、これをjavascriptから呼び出す必要があります。私は非常に多くの場合、WPコードを記述していないが、それはあなたが戻っJavaScriptにあなたのポストのデータを渡したいか把握する必要がありますここからこの

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

のような少し何かを見えるかもしれません。ここには2つのオプションがあります。応答の内部にhtmlビューをレンダリングしたり、データをjsonのような形式に解析して、JavaScriptを返すことができます。

ここから、あなたのPHPスクリプトからの応答を処理する必要があります。

注：最後のID部分の取得をどのように処理するかは、あなた次第です。論理的にあなただけの各ポストのコンテナにdata-idを追加し、最後に子供の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); 
     } 
    }); 
}); 

を取得するためにjqueryのを使用して、我々は行われていることができます。あなたがしなければならないのは、空白を記入して全部整理することだけです。小さな免責事項。私はこれを全くテストしていない。私はこのタイプのシステムを何度も書きました。