クリックしてもボタンを押しても何もロードされない

Question

フロントページにボタンを追加しました。ボタンは、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) { ?> 
 
    <button id=load-more>load more</button> 
 
<?php 
 
} 
 
} 
 
elseif (!get_query_var('paged') || get_query_var('paged') == '1') { 
 
echo '<p>Sorry, no posts matched your criteria.</p>'; 
 
} 
 
get_footer();

のfunctions.php

//LOAD MORE 
 
    add_action('wp_ajax_load_more', 'load_more'); 
 

 
    function load_more() { 
 
    if (isset($_POST['action']) && $_POST['action'] === 'load_more'){ 
 
     $loopFile  = $_POST['loop_file']; 
 
     $paged   = $_POST['page_no']; 
 
     $posts_per_page = $_POST['posts_per_page']; 
 

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

 
     $query = new WP_Query($args); 
 

 
     get_template_part($loopFile); 
 
    } 
 

 
    wp_reset_query(); 
 

 
    exit; 
 
    }

loop.php

<?php if ($the_query->have_posts()) { 
 

 
     while ($the_query->have_posts()) { 
 
      $the_query->the_post(); 
 
<?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++; 
 
}?> 
 
     } 
 
?>

JS

// AJAX to grab more posts, wrap with a vanilla javascript or 
 
    // jQuery click event function. 
 
    function loadMorePosts(pageNumber, postsPerPage) { 
 
    var query = 'action=load_more&page_no=' + pageNumber + 
 
     '&loop_file=loop&posts_per_page=' + postsPerPage; 
 

 
    jQuery.ajax({ 
 
     url: '/wp-admin/admin-ajax.php', 
 
     type: 'post', 
 
     data: query, 
 
     success: function(response){ 
 
      // handle response 
 
     } 
 
    }); 
 
}

EDITED JS

function loadMorePosts(pageNumber, postsPerPage) { 
 

 
    var query = 'action=load_more&page_no=' + pageNumber + 
 
    '&loop_file=loop&posts_per_page=' + postsPerPage; 
 

 
    jQuery.ajax({ 
 
    url: '/wp-admin/admin-ajax.php', 
 
    type: 'post', 
 
    data: query, 
 
    success: function(response){ 
 
     // handle response 
 
    } 
 
    }); 
 
} 
 
    jQuery(document).ready(function() { 
 
    jQuery('#load-more').on('click', function(){ 
 
    loadMorePosts(pageNumber, postsPerPage) 
 
    }) 
 
})

Answer 1

ここで問題は、loadMorePosts関数をボタンのイベントリスナーにアタッチしていないことです。あなたのボタンはIDが「負荷より」を持っているので、次の操作を実行できます。

function loadMorePosts(pageNumber, postsPerPage) { 

    var query = 'action=load_more&page_no=' + pageNumber + 
    '&loop_file=loop&posts_per_page=' + postsPerPage; 

    jQuery.ajax({ 
    url: '/wp-admin/admin-ajax.php', 
    type: 'post', 
    data: query, 
    success: function(response){ 
     // handle response 
    } 
    }); 
} 
$('#load-more').on('click', function(){ 
    loadMorePosts(pageNumber, postsPerPage) 
}) 

いくつかの注意点。私はpageNumberとpostsPerPageの値をどのように取得しているのか分かりません。

この回答は、HTMLの読み込みが完了した後にスクリプトを読み込んでいることを前提としています。そうでない場合は、次の手順を実行する必要があります。

$(document).ready(function() { 
    $('#load-more').on('click', function(){ 
    loadMorePosts(pageNumber, postsPerPage) 
    }) 
})