WordPress的使用ajax请求jQuery加载更多帖子onclick [英] Wordpress Load More Posts onclick with ajax request jquery

问题描述

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

I've developed custom theme from scratch with _S starter theme. I'm having issue getting Wordpress next posts via ajax request on click on read more button. I've tried many articles specifically the following articles, but no luck.

参考链接:

• 在Wordpress中加载更多帖子Ajax按钮
  
• 使用AJAX加载下一个WordPress帖子
  
• 加载旧与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脚本添加自定义函数，但是它不起作用.

I've tried going with above custom loops and adding custom functions with jquery script but it don't work somehow.

这是下面的循环代码示例:

Here is loop code example below:

在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天来解决这个问题，所以任何人都可以通过有效的解决方案来帮助解决这个问题.

I'm messing with this issue for over 4-5 days, so any one can help me out with this issue with working solution will be highly appreciable.

谢谢.

推荐答案

我也许有适合您的解决方案.

I maybe have a solution for your.

首先请确保在您的主题中加入了脚本

First be sure to have a script enqueue in your theme

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

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

then localize add a function to add a js var in your dom

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

在您的js中，点击加载更多"按钮上的点击"添加事件

In your js, add an event on 'click' on your 'Load More' button

传递一个动作名称和您在自己的dom中的物品计数，响应将在按钮加载更多"之前添加内容

Pass an action name and the count of article you have in your dom, the response add the content before your button 'load more'

$("#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中创建一个函数

create a function in your 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' );

对我有用. 希望对您有所帮助.

It work for me. I hope that help you.

这篇关于WordPress的使用ajax请求jQuery加载更多帖子onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！