Good day. I have a website on WP. I'm trying to do AJAX loading posts. I understand that the topic is hackneyed, but nowhere was it possible to find a single solution that can somehow be adapted to my case.

In the "news" are displayed entries (2 pieces). Under this block there is a button "Read more". By clicking on it, two more news should appear. And so on. I do not have a pagination, nothing on which one could understand which page you are on. I tried to write the solution myself, but it does not work (I suspect that something is wrong in PHP and receiving data in AJAX, but I can’t say what exactly).

What generally should request AJAX and give PHP? Thank.

Post output structure:

<div class="row"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 news-item"> <div class="news-date"> <?php the_time($format = 'j F Y'); ?> </div> <div> <h3><?php the_title(); ?></h3> <p><?php the_content(); ?></p> </div> </div> <?php endwhile; ?> <?php endif; ?> </div> <div class="more-link"><a href="#">Read more></a> </div>

Js

 $(function() { var posts = 2; var posts_offset = 0; $("#load-post").click(function() { $.ajax({ type: "GET", url: "/wordpress/wp-admin/themes/my_theme/load-posts.php", dataType: 'html', data: ({ <?php $posts ?>}), success: function(data){ $('.news').append(data); posts_offset += 2; } }); } }); });

Php

 if (isset($_GET['posts_offset'])) { $posts_offset = $_GET['posts_offset']; } $posts = get_posts( array( 'numberposts' => 2, 'offset' => $posts_offset ) );

!! UPD !!

Corrected the code, now the following happens: at the end of the .news code from the PHP file, not additional posts.

Js

  $(function () { var posts = 2; var posts_offset = 0; $("#load-post").click(function (e) { e.preventDefault(); $.ajax({ type: "POST", url: "/wp-content/themes/1cka/load-posts.php", dataType: 'html', data: { posts_offset: posts_offset }, success: function (data) { $('.news').append(data); posts_offset += 2; } }); }) });

Php

 <?php require_once("header.php"); ?> <?php if (isset($_GET['posts_offset'])) { $posts_offset = $_GET['posts_offset']; } global $post; // записываем $post во временную переменную $tmp_post $tmp_post = $post; $args = array( 'posts_per_page' => 2, 'offset'=> $posts_offset ); $myposts = get_posts( $args ); foreach( $myposts as $post ) : setup_postdata($post); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> echo '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 news-item"> <div class="news-date"> <?php the_time($format = 'j F Y'); ?> </div> <div> <h3><?php the_title(); ?></h3> <p><?php the_content(); ?></p> </div> </div>' <?php endwhile; ?> <?php endif; ?> <?php endforeach; $post = $tmp_post; ?>
  • What does get_posts() return? I would venture to suggest that the $posts line is written with the posts themselves. Try adding echo $posts; - froxxendsg
  • And yet, it is not clear that you are trying to send to the script, apparently, it must accept posts_offset , and send it. - froxxendsg
  • Added code fixes. I have little idea what to do in JS c posts_offset , because we use it to get posts in PHP - Maryja Piaredryj
  • "The code from the PHP file is appended, not additional posts." - well, yes, but doesn't load-posts.php display these same posts? | As I understand it, posts_offset is the offset of posts. - froxxendsg
  • posts_offset is starting from which post to start showing, the idea is this: each time you click on the php button, it sends the two previous posts and increases posts_offset by 2 to show the following next time. - Maryja Piaredryj

1 answer 1

A very good and clear example for organizing the upload when scrolling, and on a click: https://www.billerickson.net/infinite-scroll-in-wordpress/ However, in JS, you need to also screw up checking whether there is such a class on the page so as not to gave errors in the console

 if( $('.post-box-list').length ) { Код тут }