从我的首页添加更多加载按钮到我的搜索页面

Question

在我的首页上，我的帖子设置为连续1个帖子，连续2行2个帖子，1个帖子，依此类推。然后在每15个帖子后出现加载更多按钮（例如下面的例子）。加载更多按钮工作正常，所以我试图在我的搜索页面上复制它。

我想在搜索页面添加相同的加载按钮。但是，我在这个页面上设置了不同的帖子，每行只有2个帖子（没有交替的col-12帖子）。除了不同的循环结构，我想在每8个帖子之后添加更多加载按钮（例如下面的例子）。我在我的functions.php中复制了我的首页的循环结构，并调整它以适应不同的循环结构和每8个帖子后加载更多按钮。但是，它无法正常工作。前8个帖子显示我想要的方式，每排4个帖子，每排2个帖子。但是在你按下加载更多按钮之后，帖子会显示在我的首页循环中（一行中有1个帖子的15个帖子，一行中有2个帖子，一行中有1个帖子，依此类推） 。

有谁知道如何解决这个问题？或者实现一个4行的搜索页面，每行2个帖子？提前谢谢。

我的头版看起来如何

我希望我的搜索页面看起来如何

我的front-page.php

<?php

get_header();
get_template_part ('post-template/trendingg'); 
?>



<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();
            }
            },
            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' => 'post_date',
'order' => 'DESC',
    '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">
                            <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?></a>
                        </div>
                        <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
                        <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                        <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( 'includes/front-shop-the-post' ); ?>
                            <?php get_template_part( 'includes/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' ); ?>>
                    <div class="two-front-container">
                        <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a>
                        <div>
                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                    <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                    <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( 'includes/front-shop-the-post' ); ?>
                        <?php get_template_part( 'includes/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>

<button id="load_more_btn">Load More Posts</button> <!-- button out of ajax container for load content and button displayed at the bottom -->
<?php
get_footer();

my functions.php首页循环

//FRONT PAGE
add_action('wp_ajax_my_load_more_function', 'my_load_more_function');
add_action('wp_ajax_nopriv_my_load_more_function', 'my_load_more_function');

function my_load_more_function() {

    $query = new WP_Query( [
        'posts_per_page' => $_POST["posts_per_page"],
        'orderby' => 'post_date',
'order' => 'DESC',
        'paged' => get_query_var('paged', $_POST["paged"])
    ] );


    if ($query->have_posts()) {

        $i = 0;
        $j = 0;

        while ($query->have_posts()) {
                $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">
                            <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?></a>
                        </div>
                        <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
                        <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                        <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( 'includes/front-shop-the-post' ); ?>
                            <?php get_template_part( 'includes/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' ); ?>>
                    <div class="two-front-container">
                        <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a>
                        <div>
                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                    <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                    <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( 'includes/front-shop-the-post' ); ?>
                        <?php get_template_part( 'includes/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++;

        }
        wp_reset_query();
    }else{
        return 0;
    }

    exit;
}

我的search.php

<?php

get_header();
?>
    <div class="search-results-search">
<form role="search" method="get" class="search-form-search form-inline-search" action="">
            <div class="input-group-search">
                <input type="search" value="" name="s" class="input-sm-search search-field-search form-control-search" placeholder="<?php echo $s ?>">
            </div>
        </form>
    </div>



<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_search_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();
            }
            },
            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' => 8, // i use 1 for testing
        'orderby' => 'post_date',
'order' => 'DESC',
    '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($j % 2 === 0){ echo '<div class="row">';} ?>
                <article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
                    <div class="two-front-container">
                    <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
                        <div>
                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                    <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                    <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( 'includes/front-shop-the-post' ); ?>
                        <?php get_template_part( 'includes/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
            }
        }?>

</section>

<button id="load_more_btn">Load More Posts</button> <!-- button out of ajax container for load content and button displayed at the bottom -->
<?php
get_footer();

my functions.php搜索循环

//SEARCH PAGE
add_action('wp_ajax_my_search_load_more_function', 'my_search_load_more_function');
add_action('wp_ajax_nopriv_my_search_load_more_function', 'my_search_load_more_function');

function my_search_load_more_function() {

    $query = new WP_Query( [
        'posts_per_page' => $_POST["posts_per_page"],
        'orderby' => 'post_date',
'order' => 'DESC',
        'paged' => get_query_var('paged', $_POST["paged"])
    ] );


if ($the_query->have_posts()) {

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

   if($j % 2 === 0){ echo '<div class="row">';} ?>
                <article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
                    <div class="two-front-container">
                    <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
                        <div>
                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                    <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                    <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( 'includes/front-shop-the-post' ); ?>
                        <?php get_template_part( 'includes/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
    

        }
        wp_reset_query();
    }else{
        return 0;
    }

    exit;
}

我的第一个初始8个搜索结果是正确的搜索结果。但是，按下“加载更多”按钮后，它会从最近的一次开始加载我的所有帖子。

**更新了search.php

<?php

get_header();
?>
    <div class="search-results-search">
<form role="search" method="get" class="search-form-search form-inline-search" action="">
            <div class="input-group-search">
                <input type="search" value="" name="s" class="input-sm-search search-field-search form-control-search" placeholder="<?php echo $s ?>">
            </div>
        </form>
    </div>



<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_s', // the name of the function in functions.php
    paged: now, // set the page to get the ajax request
    posts_per_page: 8,  //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();
            }
            },
            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' => 8, // i use 1 for testing
        'orderby' => 'post_date',
'order' => 'DESC',
      's' => $s,
    '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($j % 2 === 0){ echo '<div class="row">';} ?>
                <article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
                    <div class="two-front-container">
                    <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
                        <div>
                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                    <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                    <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( 'includes/front-shop-the-post' ); ?>
                        <?php get_template_part( 'includes/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
            }
        }?>

</section>

<button id="load_more_btn">Load More Posts</button> <!-- button out of ajax container for load content and button displayed at the bottom -->
<?php
get_footer();

**更新了functions.php搜索循环

//SEARCH PAGE
add_action('wp_ajax_my_load_more_function_s', 'my_load_more_function_s');
add_action('wp_ajax_nopriv_my_load_more_function_s', 'my_load_more_function_s');

function my_load_more_function_s() {
    global $query_string;

    $search_query = wp_parse_str( $query_string );
    $search = array_merge($search_query, [
        'posts_per_page' => $_POST["posts_per_page"],
        'orderby' => 'post_date', 'order' => 'DESC',
        'paged' => get_query_var('paged', $_POST["paged"]),
        's' => $_POST['s']
    ]);

    $query = new WP_Query($search);


if ($query->have_posts()) {

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

   if($j % 2 === 0){ echo '<div class="row">';} ?>
                <article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
                    <div class="two-front-container">
                    <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
                        <div>
                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                    <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                    <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( 'includes/front-shop-the-post' ); ?>
                        <?php get_template_part( 'includes/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
            }
        }else{
        return 0;
    }

    exit;
}

Answer 1

您必须首先进行ajax调用并提供搜索值。

来自search.php

用以下代码替换您的开始代码：

var now=2; // when click start in page 2
var searchValue = <?php echo json_encode(['s' => $s]); ?>;

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_s', // the name of the function in functions.php,
            s:  searchValue.s, // the value from the input
            paged: now, // set the page to get the ajax request
            posts_per_page: 8,  //number of post to get (use 1 for testing)
        },

使用json_encode

编码您的s变量

然后改变你的ajax函数：

function my_load_more_function_s() {
    global $query_string;

    $search_query = wp_parse_str( $query_string );
    $search = array_merge($search_query, [
        'posts_per_page' => $_POST["posts_per_page"],
        'orderby' => 'post_date', 'order' => 'DESC',
        'paged' => get_query_var('paged', $_POST["paged"]),
        's' => $_POST['s']
    ]);

    $query = new WP_Query($search);

s - 参数可以在docs。

中找到

阅读了有关搜索页面的更多信息。我发现，你必须使用global $query_string。您可以在docs too

中找到

为了不要忘记它，你可以保存php中的数字并输出javascript，如：

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: <?php echo $number; ?>  //number of post to get (use 1 for testing)
}