Agregar ajax cargar más botón a mi página principal

12 minutos de lectura

avatar de usuario
usuario6738171

Estoy usando un tema de wordpress prefabricado para mi sitio. Sin embargo, quería hacer un front-page.php personalizado, así que lo hice, pero ahora el problema es que no puedo encontrar la manera de agregarle el botón Ajax para cargar más. Mi tema ya utiliza el botón cargar más de ajax, así que pensé que sería fácil de agregar. Pero creo que puedo estar agregando el código en el lugar equivocado, o mis consultas se han desordenado.

¿Alguien puede ayudarme a agregar este botón para cargar más?

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

el código post-nav.php que encontré dentro de mi tema

<div class="row pagination-below"><div class="col-md-12">
    <?php 
    $pagination_type = novablog_getVariable('pagination_type') ? novablog_getVariable('pagination_type') : 'pagnum';
    if($pagination_type=='pagnum') :

        the_posts_pagination( array(
            'mid_size' => 3,
            'type' => 'list',
            'prev_text'          => theme_locals("prev"),
            'next_text'          => theme_locals("next")
        ) );
    endif;

    global $wp_query;
    if ( $wp_query->max_num_pages > 1 && $pagination_type=='paglink' ) : ?>
        <div class="paglink">
            <span class="pull-left"><?php previous_posts_link(theme_locals("newer")) ?></span>       
            <span class="pull-right"><?php next_posts_link(theme_locals("older")) ?></span>
        </div>
    <?php endif; ?>

    <?php
        if ( $wp_query->max_num_pages > 1 && $pagination_type=='loadmore' or $wp_query->max_num_pages > 1 && $pagination_type=='infinite' ) { 
            $all_num_pages = $wp_query -> max_num_pages;
            $next_page_url = novablog_next_page($all_num_pages);
    ?>
            <div class="ajax-pagination-container">
              <a href="https://stackoverflow.com/questions/45392448/<?php echo esc_url($next_page_url); ?>" id="ajax-load-more-posts-button"></a>
            </div>
    <?php } ?>
</div></div>

Así es como aparece el botón Cargar más en mi host local
ingrese la descripción de la imagen aquí

ejemplo de cómo quiero que se vea el diseño de mi publicación en la página principal. 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.
ingrese la descripción de la imagen aquí

Así es como se ve el desarrollador de Chrome cuando inspecciono el botón Cargar más
ingrese la descripción de la imagen aquí

  • si inspeccionas el elemento, ¿qué surge? algún error?

    – Dylan

    31 de julio de 2017 a las 19:25

  • No recibo ningún error.

    – usuario6738171

    31 de julio de 2017 a las 21:18

  • usuario6738171 considere esto rudrastyh.com/wordpress/load-more-posts-ajax.html

    – vagelis

    2 de agosto de 2017 a las 13:45

  • puedes publicar tu jquery?

    – Vela

    3 de agosto de 2017 a las 6:33

  • @vel Aquí está el enlace al archivo del tema: dropbox.com/s/yghxnsvnbv3nnrh/novablog.zip?dl=0

    – usuario6738171

    3 de agosto de 2017 a las 19:59

avatar de usuario
Edwin Castañeda

Agregue esto a front-page.php

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

Y luego en functions.php agregue este código a continuación:

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'=>'title',
        'order'=>'ASC',
        '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">
                            <?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="https://stackoverflow.com/questions/45392448/<?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="https://stackoverflow.com/questions/45392448/<?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="https://stackoverflow.com/questions/45392448/<?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="https://stackoverflow.com/questions/45392448/<?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++;

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

    exit;
}

Creo que la configuración de bucle en front-page.php tiene problemas que resolver, en el publicaciones por página parámetro, muestra el publicaciones por página + 1 resultados.

Déjame saber si esto resuelve tu pregunta.

  • La marca roja no es el botón cargar más. Adjunto una imagen arriba de cómo se ve el botón cargar más cuando tengo el tema cargado. Para mi página de inicio, quiero usar Bootstrap y quiero que alternen entre 1 publicación en una fila y luego 2 filas de 2 publicaciones por fila, y así sucesivamente y luego tener un botón para cargar más después de cada 15 publicaciones. (Puse un ejemplo en mi pregunta original). He intentado construir esto codificando ese front-page.php. Y creo que lo codifiqué bien (¿tal vez?), pero simplemente no sé cómo agregar el botón Cargar más del tema en ese archivo personalizado de page.php.

    – usuario6738171

    3 de agosto de 2017 a las 22:31

  • ¿Cómo se vería el segundo código con todo el código?

    – usuario6738171

    4 de agosto de 2017 a las 12:39

  • Gracias por intentar ayudar. Este código no funciona correctamente. Solo carga dos publicaciones para empezar (1 por fila). ¿Y luego, cada vez que presiona el botón Cargar más, solo carga una publicación?

    – usuario6738171

    8 de agosto de 2017 a las 1:02

  • Lea los comentarios en el código, muestra solo 1 porque había estado tratando de probar. La opción Posts_per_page limita el número de publicaciones y muestra la página a la que pertenece posts_per_page. Tiene un error en la primera consulta de carga de front-page.php, pero la llamada ajax funciona bien. Cambie todas las publicaciones por página a 13 y ahora arregla la única respuesta que se muestra. Hazme saber si aún necesitas ayuda.

    –Edwin Castañeda

    8 de agosto de 2017 a las 1:13


  • Lo siento, me perdí eso. ¿Hay alguna manera de arreglar el error? Todavía soy nuevo en la codificación, así que sabía que probablemente estropeé algo. Cambié post_per_page a 15 (porque quiero 15 publicaciones por página). Funciona muy bien. Hay 15 publicaciones que aparecen antes del botón cargar más. Sin embargo, solo se carga 1 publicación cada vez que presiona el botón Cargar más. ¿Hay alguna manera de cargar 15 publicaciones cada vez que presione el botón? Gracias de nuevo por la ayuda, realmente lo aprecio.

    – usuario6738171

    8 de agosto de 2017 a las 13:13

Probablemente debería usar un complemento apropiado para proporcionar la funcionalidad con la que está luchando.

Este https://en-ca.wordpress.org/plugins/easy-load-more/ afirma hacer exactamente lo que está buscando con cambios de tema “mínimos”.

¿Ha sido útil esta solución?