5

Доброго времени суток. У меня есть сайт на 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;

?>
13
  • Что возвращает get_posts()? Рискну предположить, что в $posts записывается строка с самими постами. Попробуйте добавить echo $posts;
    – froxxendsg
    2 июн 2015 в 19:25
  • И ещё, непонятно, что Вы пытаетесь отправить скрипту, судя по всему, он должен принимать posts_offset, это и отправляйте.
    – froxxendsg
    2 июн 2015 в 19:31
  • Дополнила код исправлениями. Я слабо представляю, что делать в JS c posts_offset, ведь мы его используем, чтобы получить посты в PHP 2 июн 2015 в 19:44
  • "аппендится код из PHP файла, а не дополнительные посты." -- ну да, а разве load-posts.php не выводит эти самые посты? | Насколько понимаю, posts_offset - это смещение постов.
    – froxxendsg
    2 июн 2015 в 20:15
  • posts_offset - это начиная с какого поста начинать показывать, идея такая: каждый раз по нажатию на кнопку php передает два предыдущих поста и увеличивает posts_offset на 2, чтобы в следующий раз показать следующие. 2 июн 2015 в 20:21

1 ответ 1

0

Очень хороший и понятный пример для организации подгрузки при скроле, так и на клик: https://www.billerickson.net/infinite-scroll-in-wordpress/ Правда в JS нужно ещо прикрутить проверку существует ли такой класс на странице, чтобы не выдавало ошибок в консоли

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.