Javascript 添加“加载更多帖子”按钮

我想在我的wordpress站点的首页添加一个简单的加载更多按钮，以加载更多帖子。我使用一个查询和引导，每行有一篇文章，然后是两篇，然后是一篇，依此类推。我希望显示15篇文章，然后单击“加载更多”按钮，然后当您按下按钮时，会加载15篇文章。我已经开始尝试添加此按钮，但每次尝试都不起作用。我尝试了插件，并制作了自己的插件。如果有人能帮我添加一个加载更多按钮，我将不胜感激

my front-page.php

您可以采取的一种方法是将查询移动到functions.php，并向wp_ajax添加一个操作。例如：

  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 ( $query->have_posts() ) {

        while ( $query->have_posts() ) {
          $query->the_post();
            // populate your post template here
            echo   '<h2>' . get_the_title() .'</h2>';    
        }
?>

这是一个非常简单的植入，当达到最大页数时，您需要包含一个用于安全性和句柄的NONCE。
您尝试过谷歌搜索吗？有很多不同版本的分页示例。非常感谢您尝试帮助Dominique。我已经在上面添加了建议的代码，我的网站现在不会加载。我在问题中添加了我的新代码。我做错了什么？我应该更清楚我道歉，javascript代码（第三部分）必须在.js文件中。我敢肯定，由于PHP错误，您现在会看到一个白色屏幕。确保在wp_config.php中设置wp_debug:true以查看错误。我在loop.php中也有一个输入错误（我已经编辑了我的答案。我还建议您先创建一个basic loop.php文件，然后再在此基础上进行构建。这样您就可以更轻松地诊断问题。我的网站再次正常工作，谢谢。但是，仍然没有“加载更多”按钮。我认为这段代码从未添加到任何按钮中，我将使用什么代码来实现这一点？这是c正确，我把这部分留给你了。按钮很简单：
load more
，在你的javascript文件中，监听点击事件并调用函数：
$（“#load more”）。点击（function（）{loadMorePosts（2，15）；
，我希望这有帮助！如果有，请上传我的答案或将其标记为已接受的答案。谢谢！
  // 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;

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