Agregar el botón cargar más de mi página principal a mi página de búsqueda

19 minutos de lectura

avatar de usuario
usuario6738171

En mi página principal, tengo mis publicaciones configuradas como 1 publicación en una fila, 2 filas de 2 publicaciones en una fila, 1 publicación en una fila, y así sucesivamente. Luego, después de cada 15 publicaciones, aparece el botón Cargar más (ejemplo a continuación). El botón cargar más funciona perfectamente, así que estoy tratando de duplicarlo en mi página de búsqueda.

Me gustaría agregar el mismo botón cargar más a mi página de búsqueda. Sin embargo, tengo mis publicaciones configuradas de manera diferente en esta página, solo tengo 2 publicaciones en cada fila (no hay publicaciones alternas col-12). Además de la estructura de bucle diferente, me gustaría agregar el botón cargar más después de cada 8 publicaciones (ejemplo a continuación). He duplicado la estructura de bucle para mi página principal en mi functions.php, y la he ajustado para que se ajuste a la estructura de bucle diferente y al botón de cargar más después de cada 8 publicaciones. Sin embargo, no funcionará correctamente. Las primeras 8 publicaciones se muestran como las quiero, 4 filas de 2 publicaciones por fila. Pero después de presionar el botón cargar más, las publicaciones aparecen como lo hacen en mi ciclo de página principal (15 publicaciones de 1 publicación en una fila, 2 filas de 2 publicaciones en una fila, 1 publicación en una fila, y así sucesivamente) .

¿Alguien sabe cómo podría arreglar esto? ¿O lograr una página de búsqueda de 4 filas con 2 publicaciones por fila? Gracias por adelantado.

cómo se ve mi portada

ingrese la descripción de la imagen aquí

cómo quiero que se vea mi página de búsqueda

ingrese la descripción de la imagen aquí

mi portada.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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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();

mi bucle de la página principal de 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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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;
}

mi búsqueda.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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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();

mi bucle de búsqueda 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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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;
}

Mis primeros 8 resultados de búsqueda iniciales son los resultados de búsqueda correctos. Sin embargo, después de presionar el botón Cargar más, carga todas mis publicaciones a partir de la más reciente.

** Búsqueda actualizada.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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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();

** Bucle de búsqueda de functions.php actualizado

//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="https://stackoverflow.com/questions/46746561/<?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="https://stackoverflow.com/questions/46746561/<?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;
}

  • Creo que @sysix ha proporcionado la respuesta correcta. Actualice amablemente si no es la solución.

    – Adibas03

    19/10/2017 a las 22:20

avatar de usuario
Sysix

Primero debe llamar a su ajax y dar el valor de búsqueda también.

de search.php

reemplace su código de inicio con:

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

codifica tu s variable con json_encode

Y luego cambie su función ajax de esta manera:

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

los s-El parámetro se puede encontrar en el documentos.

Después de leer más sobre la página de búsqueda. Descubrí que debes usar el global $query_string. Puedes encontrar esto en el documentos también


Para no olvidarlo, puede guardar el número en php y la salida para javascript como:

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)
}

  • Entonces, cuando lo cambio al código sugerido, solo muestra 8 publicaciones en cada carga. Sin embargo, está llamando al post loop desde my_load_more_function. Así que traté de cambiarlo a mi función de búsqueda (en mi pregunta original) a my_search_load_more_function, pero ahora, cuando presiono el botón cargar más, aparece un cuadro emergente que dice localhost: 888 dice: [object Object]

    – usuario6738171

    19 oct 2017 a las 22:24


  • Tengo que usar un ciclo diferente porque, como mencioné en mi pregunta original, el diseño de la publicación en mi página principal es diferente del diseño de la publicación que estoy tratando de lograr en mi página de búsqueda. En mi página principal tengo cada 7 publicaciones col-md-12, sin embargo, en mi página de búsqueda quiero deshacerme de cada 7 publicaciones y hacer que todas sean col-md-6

    – usuario6738171

    19 oct 2017 a las 22:26

  • ¿Puede mirar en su herramienta de análisis de red (incorporada en el navegador), cuál es la respuesta de su llamada ajax? Creo que esto produce algunos errores/advertencias de php.

    – Sysix

    20 de octubre de 2017 a las 7:31

  • Encontré un error en mi bucle de búsqueda functions.php. Estaba usando $the_query cuando debería haber estado usando $query. Ahora funciona para que cada vez que presione el botón cargar más, cargue 8 publicaciones más. Sin embargo, hay otro problema. Mis primeros 8 resultados de búsqueda iniciales son los resultados de búsqueda correctos. Sin embargo, después de presionar el botón Cargar más, carga todas mis publicaciones a partir de la más reciente. ¿Cómo podría arreglar esto para que después de presionar el botón continúe cargando los resultados de búsqueda? He agregado el código actualizado arriba.

    – usuario6738171

    20 oct 2017 a las 14:34


  • No funciona porque el valor de s no está establecido en el campo de entrada, lo coloca en el atributo de marcador de posición, no en el valor uno: <input type="search" value="<?php echo $s ?>" name="s" class="input-sm-search search-field-search form-control-search" placeholder="<?php echo $s ?>">

    – RafH

    22 de octubre de 2017 a las 15:06


¿Ha sido útil esta solución?