Php 将ajax加载更多按钮添加到我的首页

我正在为我的网站使用预先制作的wordpress主题。然而，我想定制一个front-page.php，所以我就这么做了，但现在的问题是，我不知道如何向它添加ajax load more按钮。我的主题已经使用了ajax加载更多按钮，所以我认为添加它会很简单。但是我想我可能是在错误的位置添加了代码，或者我的查询被搞砸了

有人能帮我添加这个加载更多按钮吗

my custom front-page.php

<?php 

    get_header(); 
    get_template_part ('inc/carousel'); 

    $the_query = new WP_Query( [ 
        'posts_per_page' => 13, 
        'paged' => get_query_var('paged', 1) 
    ] ); 

    if ( $the_query->have_posts() ) { ?> 
        <div id="ajax"> 
        <?php 
            $i = 0; 
            $j = 0; 
            while ( $the_query->have_posts() ) { 
                $the_query->the_post(); 

                if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?> 
                    <div class="row"> 
                        <article <?php post_class( 'col-sm-12 col-md-12' ); ?>> 
                            <div class="large-front-container"> 
                                <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> 
                            </div> 
                            <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
                            <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
                            <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
                            <div class="front-page-post-info"> 
                                <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
                                <?php get_template_part( 'front-shop-the-post' ); ?> 
                                <?php get_template_part( 'share-buttons' ); ?> 
                                <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
                            </div> 
                        </article> 
                    </div> 
                <?php } else { // Small posts ?> 
                    <?php if($j % 2 === 0) echo '<div class="row">'; ?> 
                        <article <?php post_class( 'col-sm-6 col-md-6' ); ?>> 
                            <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
                            <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                            <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
                            <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
                            <div class="front-page-post-info"> 
                                <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                                <?php get_template_part( 'front-shop-the-post' ); ?>
                                <?php get_template_part( 'share-buttons' ); ?>
                                <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
                            </div>
                        </article> 
                <?php $j++; if($j % 2 === 0) echo '</div>'; ?> 
        <?php 
        } 
        $i++; 
        }?> 
        </div> 
    <?php
    } 
    get_footer();

<?php

get_header();
get_template_part ('inc/carousel');

?>


<script>
    var now=2; // when click start in page 2

    jQuery(document).on('click', '#load_more_btn', function () {

        jQuery.ajax({
            type: "POST",
            url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php",
            data: {
                action: 'my_load_more_function', // the name of the function in functions.php
                paged: now, // set the page to get the ajax request
                posts_per_page: 15  //number of post to get (use 1 for testing)
            },
            success: function (data) {

            if(data!=0){
                jQuery("#ajax").append(data);  // put the content into ajax container
                now=now+1; // add 1 to next page
            }else{
                jQuery("#load_more_btn").hide();
                jQuery("#content-load-more-btn").html("<h4>No more results</h4>");
            }
            },
            error: function (errorThrown) {
                alert(errorThrown); // only for debuggin
            }
        });
    });
</script>

<section id="ajax"><!-- i have to change div to section, maybe a extra div declare -->
<?php

$the_query = new WP_Query( [
    'posts_per_page' => 15, // i use 1 for testing
    'orderby'=>'title', // add order for prevent duplicity
    'order'=>'ASC',
    'paged' => get_query_var('paged', 1) //page number 1 on load
] );

if ($the_query->have_posts()) {

        $i = 0;
        $j = 0;
        while ($the_query->have_posts()) {
            $the_query->the_post();

            if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
                <div class="row">
                    <article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
                        <div class="large-front-container">
                            <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
                        </div>
                        <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
                        <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
                        <div class="front-page-post-info">
                            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                            <?php get_template_part( 'front-shop-the-post' ); ?>
                            <?php get_template_part( 'share-buttons' ); ?>
                            <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
                        </div>
                    </article>
                </div>
            <?php } else { // Small posts ?>
                <?php if($j % 2 === 0){ echo '<div class="row">';} ?>
                <article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
                    <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                    <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
                    <div class="front-page-post-info">
                        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                        <?php get_template_part( 'front-shop-the-post' ); ?>
                        <?php get_template_part( 'share-buttons' ); ?>
                        <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
                    </div>
                </article>
                <?php $j++; if($j % 2 === 0){ echo '</div>';}?>
                <?php
            }
            $i++;
        }?>
    <?php
}?>
</section>
<div id="content-load-more-btn">
<button id="load_more_btn">Load More</button> <!-- button out of ajax container for load content and button displayed at the bottom -->
</div>
<?php
get_footer();

这就是本地主机上“加载更多”按钮的显示方式

我希望我的头版文章布局的示例。一行1个帖子，一行2行2个帖子，一行1个帖子，依此类推。然后，每15次发布后，会出现“加载更多”按钮。

这就是ChromeDeveloper在我检查LoadMore按钮时的样子

---

您可能应该使用适当的插件来提供您遇到困难的功能

---

它声称只需对主题进行“最小”的更改即可实现您想要的功能。

将其添加到front-page.php

<?php 

    get_header(); 
    get_template_part ('inc/carousel'); 

    $the_query = new WP_Query( [ 
        'posts_per_page' => 13, 
        'paged' => get_query_var('paged', 1) 
    ] ); 

    if ( $the_query->have_posts() ) { ?> 
        <div id="ajax"> 
        <?php 
            $i = 0; 
            $j = 0; 
            while ( $the_query->have_posts() ) { 
                $the_query->the_post(); 

                if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?> 
                    <div class="row"> 
                        <article <?php post_class( 'col-sm-12 col-md-12' ); ?>> 
                            <div class="large-front-container"> 
                                <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> 
                            </div> 
                            <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
                            <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
                            <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
                            <div class="front-page-post-info"> 
                                <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
                                <?php get_template_part( 'front-shop-the-post' ); ?> 
                                <?php get_template_part( 'share-buttons' ); ?> 
                                <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
                            </div> 
                        </article> 
                    </div> 
                <?php } else { // Small posts ?> 
                    <?php if($j % 2 === 0) echo '<div class="row">'; ?> 
                        <article <?php post_class( 'col-sm-6 col-md-6' ); ?>> 
                            <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
                            <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                            <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
                            <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
                            <div class="front-page-post-info"> 
                                <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                                <?php get_template_part( 'front-shop-the-post' ); ?>
                                <?php get_template_part( 'share-buttons' ); ?>
                                <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
                            </div>
                        </article> 
                <?php $j++; if($j % 2 === 0) echo '</div>'; ?> 
        <?php 
        } 
        $i++; 
        }?> 
        </div> 
    <?php
    } 
    get_footer();

<?php

get_header();
get_template_part ('inc/carousel');

?>


<script>
    var now=2; // when click start in page 2

    jQuery(document).on('click', '#load_more_btn', function () {

        jQuery.ajax({
            type: "POST",
            url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php",
            data: {
                action: 'my_load_more_function', // the name of the function in functions.php
                paged: now, // set the page to get the ajax request
                posts_per_page: 15  //number of post to get (use 1 for testing)
            },
            success: function (data) {

            if(data!=0){
                jQuery("#ajax").append(data);  // put the content into ajax container
                now=now+1; // add 1 to next page
            }else{
                jQuery("#load_more_btn").hide();
                jQuery("#content-load-more-btn").html("<h4>No more results</h4>");
            }
            },
            error: function (errorThrown) {
                alert(errorThrown); // only for debuggin
            }
        });
    });
</script>

<section id="ajax"><!-- i have to change div to section, maybe a extra div declare -->
<?php

$the_query = new WP_Query( [
    'posts_per_page' => 15, // i use 1 for testing
    'orderby'=>'title', // add order for prevent duplicity
    'order'=>'ASC',
    'paged' => get_query_var('paged', 1) //page number 1 on load
] );

if ($the_query->have_posts()) {

        $i = 0;
        $j = 0;
        while ($the_query->have_posts()) {
            $the_query->the_post();

            if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
                <div class="row">
                    <article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
                        <div class="large-front-container">
                            <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
                        </div>
                        <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
                        <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
                        <div class="front-page-post-info">
                            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                            <?php get_template_part( 'front-shop-the-post' ); ?>
                            <?php get_template_part( 'share-buttons' ); ?>
                            <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
                        </div>
                    </article>
                </div>
            <?php } else { // Small posts ?>
                <?php if($j % 2 === 0){ echo '<div class="row">';} ?>
                <article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
                    <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                    <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
                    <div class="front-page-post-info">
                        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                        <?php get_template_part( 'front-shop-the-post' ); ?>
                        <?php get_template_part( 'share-buttons' ); ?>
                        <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
                    </div>
                </article>
                <?php $j++; if($j % 2 === 0){ echo '</div>';}?>
                <?php
            }
            $i++;
        }?>
    <?php
}?>
</section>
<div id="content-load-more-btn">
<button id="load_more_btn">Load More</button> <!-- button out of ajax container for load content and button displayed at the bottom -->
</div>
<?php
get_footer();

var now=2；//单击第2页中的开始时
jQuery（document）.on（'click'，'load#more_btn'，函数（）{
jQuery.ajax({
类型：“POST”，
url:“/wp admin/admin ajax.php”，
数据：{
action:'my_load_more_function'，//functions.php中函数的名称
paged:now，//设置页面以获取ajax请求
每页文章数：15//要获取的文章数（使用1进行测试）
},
成功：功能（数据）{
如果（数据！=0）{
jQuery（“#ajax”）.append（data）；//将内容放入ajax容器中
now=now+1；//将1添加到下一页
}否则{
jQuery（“#load#u more_btn”）.hide（）；
jQuery（“#内容加载更多btn”）.html（“无更多结果”）；
}
},
错误：函数（错误抛出）{
警报（错误抛出）；//仅用于调试
}
});
});


加载更多


如果你检查了元件，会出现什么情况？有什么错误吗？我没有任何错误。USSRES268171考虑这可以发布你的jQuery吗？@ VEL这里是主题文件的链接-红色标记不是加载更多的按钮。我在上面附上了一张图片，上面是我上传主题时“加载更多”按钮的样子。对于我的主页，我想使用bootstrap，我想让它在一行1篇文章和两行每行2篇文章之间交替，依此类推，然后在15篇文章之后有一个load more按钮。（我在原来的问题中举了一个例子）。我试图通过编写front-page.php来构建它。我认为我的编码是正确的（也许是？），但我只是不知道如何将“加载更多”按钮从主题添加到自定义的from page.php文件中。第二个代码与所有代码的外观如何？感谢您的帮助。此代码工作不正常。它仅加载两个要开始的柱（每行1个）。然后每次你按下“加载更多”按钮，它只加载一篇文章？请阅读代码中的注释，只显示1，因为我一直在尝试测试。“每页文章数”选项限制文章数，页面显示每页文章所属的页面。在front-page.php first load查询中有一个bug，但是ajax调用工作正常。将每页的所有帖子更改为13，现在您只修复了显示的一个回复。如果你还需要帮助，请告诉我。很抱歉我错过了。有没有办法修复这个bug？我对编码还是新手，所以我知道我可能把事情搞砸了。我把每页的帖子改为15篇（因为我想要每页15篇帖子）。它工作得很好。“加载更多”按钮前显示15个帖子。但是，在按下“加载更多”按钮后，每次仅加载1个post。有去ge的路吗