02
Июн
2015

Подгрузка постов по клику кнопки на WordPress (AJAX)

Доброго времени суток. У меня есть сайт на WP. Я пытаюсь сделать AJAX подгрузку постов. Понимаю, что тема избитая, но нигде не удалось найти единого решения, которое хоть как-то можно адаптировать под мой случай.

В разделе "новости" выводятся записи (2 штуки). Под этим блоком есть кнопка "Читать далее". По клику на ней должны появляться еще две новости. И так далее. У меня нет ни пагинации, ничего, по чему можно было бы понять, на какой странице ты находишься. Я попыталась написать решение самостоятельно, но оно не работает (я подозреваю, что что-то не так в PHP и получении данных в AJAX, но что именно - сказать не могу).

Что вообще должен запрашивать AJAX и отдавать PHP? Спасибо.

Структура вывода постов:

<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!!

Поправила код, теперь происходит следующее: в конец .news аппендится код из PHP файла, а не дополнительные посты.

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;

?>

Источник: https://ru.stackoverflow.com/questions/427742/%D0%9F%D0%BE%D0%B4%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0-%D0%BF%D0%BE%D1%81%D1%82%D0%BE%D0%B2-%D0%BF%D0%BE-%D0%BA%D0%BB%D0%B8%D0%BA%D1%83-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%BD%D0%B0-wordpress-ajax

Share

Тебе может это понравится...