Javascript 如何使用Ajax在WordPress中添加分页（我有需要调试的代码）？

编辑： 我正在WordPress自定义主题中创建一个部分，使用WP_查询在首页模板上显示特定类别中的五个最新标题/内容，还需要一个按钮来加载更多具有相同类别的标题（+5）

我想出来了，但问题是，当用户刷新页面时，应该已经有五篇文章出现，当用户单击以加载超过应加载+5的内容时，依此类推。 我跟在后面

在首页.php

add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );

function sunset_load_more() {
    $paged = $_POST['page']+1;
        // the query
        $query = new WP_Query(array(
            'category_name' => 'news',
            'post_status' => 'publish',
            'posts_per_page' => 5,
            'paged' => $paged
        ));


         if ($query->have_posts()) : 
          while ($query->have_posts()) : $query->the_post(); ?>
          <p><a class="text-success" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
          <?php the_category( ', ' ); ?>
          </p>

             <?php endwhile; 
             wp_reset_postdata(); 
             die; 
        else : 
          __('No News');
        endif;
}

add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );

function sunset_load_more() {
    $paged = $_POST['page']+1;
    $query = new WP_Query(array(
        'category_name' => 'news',
        'post_status' => 'publish',
        'posts_per_page' => 5,
        'paged' => $paged
    ));
    if ($query->have_posts()) : 
        ob_start();
        while ($query->have_posts()) : $query->the_post(); ?>
            <p><a class="text-success" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
                <?php the_category( ', ' ); ?>
            </p>
         <?php endwhile;
        $response   = array(
            'type'  => 'success',
            'html'  => ob_get_clean(),
            'page'  => $paged
        );
         wp_reset_postdata(); 
    else : 
      __('No News');
        $response   = array(
            'type'  => 'failure',
            'html'  =>  'No News',
        );
    endif;

    wp_send_json_success($response);
    wp_die();
}

显示内容的部分

<div class="col sunset-posts-container" id="displayResults"></div>

有没有可能让导航代替加载更多来加载下一个5或加载预览5？当用户单击next时，最后五个将被删除（淡出）。

---

谢谢：）

您需要更新代码，如下所示

在首页.php

add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );

function sunset_load_more() {
    $paged = $_POST['page']+1;
        // the query
        $query = new WP_Query(array(
            'category_name' => 'news',
            'post_status' => 'publish',
            'posts_per_page' => 5,
            'paged' => $paged
        ));


         if ($query->have_posts()) : 
          while ($query->have_posts()) : $query->the_post(); ?>
          <p><a class="text-success" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
          <?php the_category( ', ' ); ?>
          </p>

             <?php endwhile; 
             wp_reset_postdata(); 
             die; 
        else : 
          __('No News');
        endif;
}

add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );

function sunset_load_more() {
    $paged = $_POST['page']+1;
    $query = new WP_Query(array(
        'category_name' => 'news',
        'post_status' => 'publish',
        'posts_per_page' => 5,
        'paged' => $paged
    ));
    if ($query->have_posts()) : 
        ob_start();
        while ($query->have_posts()) : $query->the_post(); ?>
            <p><a class="text-success" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
                <?php the_category( ', ' ); ?>
            </p>
         <?php endwhile;
        $response   = array(
            'type'  => 'success',
            'html'  => ob_get_clean(),
            'page'  => $paged
        );
         wp_reset_postdata(); 
    else : 
      __('No News');
        $response   = array(
            'type'  => 'failure',
            'html'  =>  'No News',
        );
    endif;

    wp_send_json_success($response);
    wp_die();
}

显示内容的部分

<div class="col sunset-posts-container" id="displayResults"></div>

---

希望您现在已经获得了所有信息，并让我知道您还需要什么帮助。

您需要更新代码，如下所示

在首页.php

add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );

function sunset_load_more() {
    $paged = $_POST['page']+1;
        // the query
        $query = new WP_Query(array(
            'category_name' => 'news',
            'post_status' => 'publish',
            'posts_per_page' => 5,
            'paged' => $paged
        ));


         if ($query->have_posts()) : 
          while ($query->have_posts()) : $query->the_post(); ?>
          <p><a class="text-success" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
          <?php the_category( ', ' ); ?>
          </p>

             <?php endwhile; 
             wp_reset_postdata(); 
             die; 
        else : 
          __('No News');
        endif;
}

add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );

function sunset_load_more() {
    $paged = $_POST['page']+1;
    $query = new WP_Query(array(
        'category_name' => 'news',
        'post_status' => 'publish',
        'posts_per_page' => 5,
        'paged' => $paged
    ));
    if ($query->have_posts()) : 
        ob_start();
        while ($query->have_posts()) : $query->the_post(); ?>
            <p><a class="text-success" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
                <?php the_category( ', ' ); ?>
            </p>
         <?php endwhile;
        $response   = array(
            'type'  => 'success',
            'html'  => ob_get_clean(),
            'page'  => $paged
        );
         wp_reset_postdata(); 
    else : 
      __('No News');
        $response   = array(
            'type'  => 'failure',
            'html'  =>  'No News',
        );
    endif;

    wp_send_json_success($response);
    wp_die();
}

显示内容的部分

<div class="col sunset-posts-container" id="displayResults"></div>

---

希望你现在已经得到了所有的东西，并让我知道还有什么需要帮助。

嗨，谢谢你给我时间：），你的代码工作得很好，它给了我想要的，但我也希望当我重新加载页面时，应该有前五篇文章已经出现，没有点击按钮，然后当我点击时，它将加载其他5篇。有可能这样做吗？以及如何添加另一个按钮来再次加载最后5篇文章。谢谢您的时间。是的，您可能需要在#displayResults div之前添加前五篇文章代码。检查屏幕截图：您也可以接受我的回答。好的，当我将代码放在#displayResults上面，当我单击加载更多内容时，它不会删除它们，只需重复上面的一条即可：/Hi Chetan，您在吗？你能帮我吗？是的，请让我知道，如果可能的话，分享网站页面urlHi，谢谢你给你的时间：），你的代码工作得很好，它给了我我想要的，但我也希望当我重新加载页面时，应该有前五篇文章已经存在，而不点击按钮，然后当我点击时，它将加载其他5篇。有可能这样做吗？以及如何添加另一个按钮来再次加载最后5篇文章。谢谢您的时间。是的，您可能需要在#displayResults div之前添加前五篇文章代码。检查屏幕截图：您也可以接受我的回答。好的，当我将代码放在#displayResults上面，当我单击加载更多内容时，它不会删除它们，只需重复上面的一条即可：/Hi Chetan，您在吗？你能帮我吗？是的，请让我知道，如果可能的话，分享网站页面url