Questo è il file php con il codice dove andremo a recuperare i post.
<?php // Our include define('WP_USE_THEMES', false); require_once('../../../wp-load.php'); // Our variables $numPosts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0; $page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0; query_posts(array( 'posts_per_page' => $numPosts, 'paged' => $page )); ?> <?php // our loop if (have_posts()) { while (have_posts()){ the_post(); ?> <li class="loading"> <a class="post" href="<?php the_permalink(); ?>"> <?php //$img_src = wp_get_attachment_image_url( get_post_thumbnail_id($post->ID), 'medium' ); $img_src_post = wp_get_attachment_image_url( get_post_thumbnail_id($post->ID), 'image-last-cat' ); ?> <div class="img-post"> <img src="<?php echo $img_src_post;?>" alt=""> </div> <div class="content-post"> <span class="category"> <?php // Prendo il nome della categoria senza il link foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?> </span> <h3 class="title-post"><?php the_title(); ?></h3> <p class="text-post"><?php echo excerpt(20); ?></p> </div> </a> </li> <?php } } wp_reset_query(); ?>
Questo è i codice Javascript (jQuery):La variabile templateDir è una varibile che io di solito inserisco nel footer sopra alla funzione wp_footer();, oppure se voi inserite direttamente il collegamento al file Javascript nel footer, vi basta dichiararla sopra di lui in questo modo: In questo modo avrete accesso al percorso del tema direttamente con la variabile da utlizzare nel file JS.
var page = 1; var loading = true; var $window = $(window); var $content = $("body .last-post"); var load_posts = function(){ $.ajax({ type : "GET", data : {numPosts : 5, pageNumber: page}, dataType : "html", url: templateDir+"/post-home.php", beforeSend : function(){ if(page != 1){ $content.append('<div id="temp_load" style="text-align:center"><img src="./wp-content/themes/nometema/img/ajax-loader.gif" /></div>'); } }, success : function(data){ $data = $(data); if($data.length){ $content.append($data); $content.fadeIn('slow', function(){ $("#temp_load").remove(); loading = false; }); } else { $("#temp_load").remove(); } }, error : function(jqXHR, textStatus, errorThrown) { alert(jqXHR + " :: " + textStatus + " :: " + errorThrown); } }); } jQuery('.load-more').on( 'click', function(e) { e.preventDefault(); loading = true; page++; load_posts(); });