Wordpress 加载更多帖子 onclick 与 ajax 请求 jquery

Question

我使用 _S 入门主题从头开始开发自定义主题。我在单击阅读更多按钮时通过 ajax 请求获取 Wordpress 下一篇文章时遇到问题。我已经尝试了很多文章，特别是以下文章，但没有运气。

参考链接：

• Load More Posts Ajax Button in Wordpress
  
• Load Next WordPress Posts With AJAX
  
• Load Old WordPress Posts on the Same Page with AJAX

我尝试过使用上述自定义循环并使用 jquery 脚本添加自定义函数，但它无法以某种方式工作。

下面是循环代码示例：

在 index.php 中循环

<?php query_posts('showposts=5'); if (have_posts()) : while (have_posts()) : the_post(); ?>

    <article class="post-item">
        <h2><?php the_title(); ?></h2>
        <?php the_excerpt(); ?>
    </article>

<?php endwhile; ?>
<?php else : ?>

    <h2>Sorry no posts are created yet.</h2>
    <p>Please create some posts to see it in action.</p>

<?php endif; wp_reset_query(); ?>

<button class="load-more-btn">Load More</button>

我已经解决这个问题超过 4-5 天了，所以任何人都可以通过有效的解决方案帮助我解决这个问题。

提前致谢。

Answer 1

我也许有适合你的解决方案。

首先确保您的主题中有一个脚本队列

wp_enqueue_script('your_js_hanlde', get_template_directory_uri() . '/js/your_js_hanlde.js', array('jquery'), '1.0.0', true );

然后本地化添加一个函数来在你的 dom 中添加一个 js var

wp_localize_script('your_js_hanlde', 'ajaxurl', admin_url( 'admin-ajax.php' ) );

在您的 js 中，在“加载更多”按钮上的“点击”上添加一个事件

传递一个动作名称和您在 dom 中的文章数量，响应在您的按钮“加载更多”之前添加内容

$("#load_more").click(function()
{
    $.post(ajaxurl,
    {
      'action': 'your_load_more',
      'count': $("article.post-item").length
    },
    function(response)
    {
      var posts = JSON.parse(response);

      for( var i = 0; i < posts.length; i++ )
      {
        if( posts[i] == "0" )
          $("#load_more").fadeOut();
        else
          $("#load_more").before(posts[i]);
      }

    });
});

在你的functions.php中创建一个函数

function your_load_more()
{
    $count = $_POST["count"];

    $cpt = 1;

    $args = array(
        'posts_per_page' => -1,
        'post_type'   => 'post', // change the post type if you use a custom post type
        'post_status' => 'publish',
    );

    $articles = new WP_Query( $args );

    $ar_posts = array();

    if( $articles->have_posts() )
    {
        while( $articles->have_posts() )
        {
            $articles->the_post();

            $one_post = "";

            if( $cpt > $count && $cpt < $count+6 )
            {
                $one_post .= "<article id='" . get_the_id() . "' class='post-item'>";
                $one_post .= "<h3>" . get_the_title() . "</h3>";
                $one_post .= "</article>";

                $ar_posts[] = $one_post;

                if( $cpt == $articles->found_posts )
                    $ar_posts[] = "0";
            }
            $cpt++;
        }
    }
    echo json_encode($ar_posts);
    die();
}
add_action( 'wp_ajax_your_load_more', 'your_load_more' );
add_action( 'wp_ajax_nopriv_your_load_more', 'your_load_more' );

它对我有用。 希望对你有所帮助。