Не подгружается контент поста AJAX wordpress

Рейтинг: 0Ответов: 1Опубликовано: 12.03.2023

index.php:

<?php get_header(); ?>
<main class="page">
<section class="page__blog blog blog_blog">
    <div class="blog__container">
        <div class="blog__news news">
            <h2 class="news__title title"><span><?php the_title(); ?></span></h2>
            <div class="news__row">
                <?php
                $per_page = 6;

                $myposts = get_posts(['posts_per_page' => $per_page]);
                if ($myposts) {
                    foreach ($myposts as $post) {
                        setup_postdata($post);
                        get_template_part('post-content');
                    }
                } else {
                    echo 'Постов еще нет..';
                }
                wp_reset_postdata();
                ?>
            </div>
        </div>
        <?php
        $count = wp_count_posts('post', '')->publish;
        if ($count > $per_page) :
        ?>
            <div class="blog__btn-wrapp"><button id="loadmore" class="blog__btn btn">ВСЕ НОВОСТИ</button></div>
        <?php endif; ?>
    </div>
</section>
</main>
<?php get_footer(); ?>

post-content.php:

<a href="<?php the_permalink(); ?>" class="news__item item-news">
<div class="item-news__image-ibg">
    <?php the_post_thumbnail('full') ?>
</div>
<div class="item-news__text">
    <h3 class="item-news__title"><?php the_title() ?></h3>
    <div class="item-news__date"><?php the_date() ?></div>
    <div class="item-news__excert">
        <?php the_excerpt(); ?>
    </div>
</div>
</a>

ajax.js:

const loadBtn = document.querySelector("#loadmore");
const news = document.querySelector(".news__row");
if (loadBtn && news) {
 loadBtn.addEventListener("click", async function (e) {
      loadBtn.textContent = "Загрузка..";
      loadBtn.disabled = true;
      let formData = new FormData();
      formData.append("action", "loadmore");
      const response = await fetch(load.ajax_url, {
           method: "POST",
           body: formData,
      });
    if (response.ok) {
        loadBtn.remove();
        let responseResult = await response.text();
        console.log(responseResult);
           // news.innerHTML = responseResult;
      } else {
           alert("Ошибка");
           loadBtn.textContent = "Все нвоости";
           loadBtn.disabled = false;
      }
 });
 }

functions.php:

// Подключение скриптов
add_action('wp_enqueue_scripts', 'site_scripts');

function site_scripts()
{
$version = '0.0.0.0';
wp_enqueue_style('main-style', get_stylesheet_uri(), [], $version);
wp_enqueue_script('main-js', get_template_directory_uri() . '/js/app.min.js', [], $version, true);
wp_enqueue_script('ajax-js', get_template_directory_uri() . '/js/ajax.js', ['main-js'], $version, true);
wp_localize_script('ajax-js','load',
    [
        'ajax_url' => admin_url('admin-ajax.php')
    ]
);
wp_enqueue_script('ajax-js');
}
// Подгрузка постов
add_action('wp_ajax_loadmore', 'posts_ajax');
add_action('wp_ajax_nopriv_loadmore', 'posts_ajax');

function posts_ajax()
{
$myposts = get_posts(['posts_per_page' => -1]);
if ($myposts) {
    foreach ($myposts as $post) {
        setup_postdata($post);
        get_template_part('post-content');
    }
}
wp_reset_postdata();
die;
}

Проблема в том что посты подгружаются без контента (только html), не отрабатывают функции: the_title(), the_excert() и прочие. До подгрузки посты выводятся нормально

Ответы

▲ 2Принят

ох,ох, я думмаю что трабла заключается в том, что в функции posts_ajax(), которая вызывается при загрузке постов через аякс, не устанавливается контекст WP для обработки шаблонов и вывода содержимого постов.

Чтобы это пофиксить, необходимо добавить следующую строку в начало функции posts_ajax()

// Set up the WordPress Query
$wp_query = new WP_Query();
$wp_query->query('posts_per_page=-1');

// Set up post data
if ($wp_query->have_posts()) {
    while ($wp_query->have_posts()) {
        $wp_query->the_post();
        get_template_part('post-content');
    }
    wp_reset_postdata();
}

А еще в файле ajax.js нужно раскомментировать строку news.innerHTML = responseResult;, чтобы контент постов выводился на странице после загрузки.