WordPress使用ajax加载更多文章无法正常工作

Question

我正在尝试创建一个可使用ajax加载更多帖子的按钮，但是我遇到了问题。

这是我的php代码：

         <?php

                $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

                $args = array(
                    "post_type" => "portfolio",
                    "posts_per_page" => 2,
                    "paged" => $paged
                );

                $query = new WP_Query($args);

                if($query->have_posts()) :

                ?>
                <div class="row" id="portfolio-posts">
                    <?php

                    $page_layout = get_field("page_layout");
                    $page_class = "";

                    if($page_layout == "1") {
                        $page_class = "col-md-4";
                    } else {
                        $page_class = "col-md-3";
                    }

                    while($query->have_posts()) : $query->the_post(); ?>

                    <div class="<?php echo $page_class; ?> single-post">
                        <div class="project-con project2-con">
                            <div class="overlay">
                                <div class="overlay-inner">
                                    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                                    <hr>
                                    <span><?php echo get_the_term_list( $post->ID, 'masonry-categories', '', ', '); ?></span>
                                </div>
                            </div>
                            <?php 

                            if(has_post_thumbnail()) {
                                the_post_thumbnail("portfolio");
                            }
                            else {
                                echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/assets/images/default.png" />';
                            }
                            ?>
                        </div>
                    </div>
                    <?php endwhile; ?>
                </div>
                <div class="button">
                    <a href="#" id="load-more-posts">load more</a>
                </div>
                <?php endif; ?>

这是我的JavaScript代码：

  var page = 1;
  var loadMorePosts = jQuery('#load-more-posts').text();

  function loadMore() {
    page++;
    $.ajax({
        type: "GET",
        url: './page/' + page,
        beforeSend: function () {
            jQuery('#load-more-posts').html("<i class='fa fa-spinner fa-spin'></i>");
        },
        complete: function () {

        },
        success: function (data) {
            var $data = jQuery(data).find('.single-post,.single-blog');
            if ($data.length > 0) {
                jQuery('#load-more-posts').html(loadMorePosts);
              jQuery('#portfolio-posts,#blog-posts').append($data);
              $data.css("display", "none");
              $data.fadeIn("slow");
            }
            else {
              jQuery('#load-more-posts').html('No More Posts');
            }
        },
        error: function () {
            jQuery('#load-more-posts').html('No More Posts');
        }

    });
}

我收到的错误信息是：

无法加载资源：服务器响应状态为404（未找到）

- Dunder

---

你能使用Markdown在你的问题中嵌入图片吗？这样可以避免让人们跳转到其他地方。 - SDJMcHattie

你尝试过将ajax调用的url更改为 page/' + page 吗？ - Cyclonecode

感谢大家的回复。（http://i.imgur.com/H9nfXF0.png）<-您需要至少10个声望才能发布图片。我无法上传图片，哈哈。抱歉，我以为图片可以。@Cyclone 是的，我尝试过了，但它没有起作用。 - Dunder

Answer 1

在Ajax中，不要使用重写后的URL：

url: './page/' + page

使用带有paged参数的URL，像这样：

url: '.?paged=' + page

这个问题经常发生，因为.htaccess重定向。我已经成功地解决了这个问题，使用这些类型的URL。

- Amar Syla

---

我不只是为了这个问题而处理主题，现在它可以正常运行了，我现在要开始处理它。谢谢 :) - Dunder