codememo

첫 페이지에서 검색 페이지에 로드 추가 버튼 추가

tipmemo 2023. 2. 22. 21:57
반응형

첫 페이지에서 검색 페이지에 로드 추가 버튼 추가

제 첫 페이지에는 투고가 1개 연속 투고, 2개 연속 투고, 1개 연속 투고 등으로 설정되어 있습니다.그 후 15개의 게시물이 게시될 때마다 load more 버튼이 나타납니다(아래 예).Load more 버튼은 완벽하게 작동하기 때문에 검색 페이지에 복제하려고 합니다.

검색 페이지에 같은 load more 버튼을 추가하고 싶습니다.단, 이 페이지에는 투고가 다르게 설정되어 있어 각 행에 투고가 2개밖에 없습니다(col-12 투고는 대체되지 않습니다).다른 루프 구조 외에 8개의 포스트 후에 load more 버튼을 추가하고 싶습니다(아래 예).functions.php에 앞 페이지의 루프 구조를 복제하여 8개 포스트마다 다른 루프 구조와 Load more 버튼에 맞게 조정하였습니다.다만, 올바르게 동작하지 않습니다.처음 8개의 게시물은 원하는 대로 표시됩니다. 한 줄에 4줄씩 2개의 게시물이 표시됩니다.그러나 Load more 버튼을 누르면 제 1페이지 루프와 마찬가지로 투고가 표시됩니다(1줄에 투고 15개, 2줄에 투고 2줄, 1줄에 투고 등).

내가 이걸 어떻게 고칠지 아는 사람 있어?또는 한 줄에 2개의 게시물이 있는 4줄의 검색 페이지를 작성하시겠습니까?잘 부탁드립니다.

제 1면이 어떻게 보이는지

여기에 이미지 설명 입력

검색 페이지의 표시 방법

여기에 이미지 설명 입력

제 1면입니다.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();

기능.php 1면 루프

//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;
}

내 검색.이네이블럭

<?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();

기능.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개의 검색 결과는 올바른 검색 결과입니다.그러나 Load more 버튼을 누르면 최근부터 모든 투고가 로딩됩니다.

** 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();

**기능 갱신.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;
}

먼저 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)
        },

부호화s변수(json_module)

그런 다음 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파라미터는 문서에서 찾을 수 있습니다.

검색 페이지에 대한 자세한 내용을 읽은 후.내가 찾은 바로는, 너는 반드시 이 제품을 사용해야 한다.global $query_string문서에서도 찾을 수 있습니다.

잊지 않도록 번호를 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)
}

언급URL : https://stackoverflow.com/questions/46746561/adding-the-load-more-button-from-my-front-page-to-my-search-page

반응형

'codememo' 카테고리의 다른 글

기본 컨스트럭터가 없는 Jackson 서드파티 클래스  (0) 2023.02.22
AngularJS 지시:$scope 변경이 UI에 반영되지 않음  (0) 2023.02.22
시스템 브라우저의 Ionic 응용 프로그램 열기 링크  (0) 2023.02.22
JSON에 대한 쿼리 언어가 있습니까?  (0) 2023.02.22
이게 다음인가요?JS 폴더 구조를 권장합니다.  (0) 2023.02.22

'codememo'의 다른글

  • 현재글첫 페이지에서 검색 페이지에 로드 추가 버튼 추가

관련글

댓글

티스토리툴바