使用 ajax 在 WP 中显示帖子组

我有一个包含 5 个帖子的页面。

<?php 
 // Верстка слайда в слайдер статей на главной странице
 function html_article_list_item() {
     global $post;
     $title = get_the_title();
     $permalink = get_permalink();
     $excerpt = get_the_excerpt();
     $date  = get_the_date('d F Y');
     $id_img_post = get_post_thumbnail_id();
     $img_post = wp_get_attachment_image($id_img_post, 'size_article_list');
     $tags = wp_get_post_tags($post->ID);
     ?>
     <li class="articles-item">
         <a href="#">
             <div class="articles-item-img"><?php echo $img_post; ?></div>
             <div class="articles-item-content">
                 <div class="articles-item-content-title"><?php echo $title; ?></div>
                 <div class="articles-item-content-date"><?php echo $date; ?></div>
                 <div class="articles-item-content-description"><?php echo $excerpt; ?></div>
                 <ul class="articles-item-content-tags">
                     <?php foreach( $tags as $tag ): ?>
                         <li class="articles-item-content-tag"><?php echo $tag->name; ?></li>
                     <?php endforeach; ?>
                 </ul>
             </div>
         </a>
     </li>
 <?php
 }
 ?>

 <div class="section-articles">
     <div class="articles-container container">
         <div class="row">
             <div class="col-12 col-md-9">
                 <ul id='articles-list' class="articles-list">
                     <?php 
                     $posts = get_posts(array(
                         'numberposts' => 5,
                         'post_type' => 'article',
                     ));
                     foreach ($posts as $post):
                         setup_postdata( $post );
                         html_article_list_item();
                     endforeach; 
                     wp_reset_postdata();
                     ?>
                 </ul>
             </div>

             <?php 
             $arr_tags = get_terms(array(
                 'taxonomy' => array('tagarticle'),
                 'orderby' => 'name',
                 'order' => 'ASC',
                 'get' => 'all',
             ));
             ?>

             <div class="articles-tags d-none d-md-block col-md-3">
                 <div class="articles-tags-title">Теги:</div>
                 <ul class="articles-tags-list">
                     <?php foreach( $arr_tags as $arr_tag ): ?>
                         <li class="articles-tags-list-item <?php if($arr_tag->count > 0) echo 'articles-tags-list-item__active'; ?>"><?php echo $arr_tag->name ?></li>
                     <?php endforeach; ?>
                 </ul>
             </div>
         </div>
         <div class="download-button row">
             <button class="transition-300ms">Загрузить еще</button>
         </div>
     </div>
 </div>

现在我需要.download-button button在“加载更多”按钮上显示另外 5 篇文章（记录）。将此代码添加到 function.php 文件中：

add_action('wp_enqueue_scripts', 'ajax_download_last_article', 99);
function ajax_download_last_article() {
    wp_enqueue_script('script-ajax', get_template_directory_uri() . '/js/script-ajax.js', array('jquery'));

    wp_localize_script('script-ajax', 'arrAjax', 
        array(
            'url' => admin_url('admin-ajax.php')
        )
    );  
}
function download_last_article_callback() {
    $countArticles = intval( $_POST['countArticles'] );

    if( isset($countArticles) ) {

        $posts_articles = query_posts(array(
            'numberposts' => -1,
            'post_type' => 'article',
        ));
        $articles_list = '';
        for ($i_article=$count_articles; $i_article < $count_articles+5; $i_article++) { 
            $post = $posts_articles[$countArticles];
            setup_postdata( $post );
            $articles_list = strcat( $articles_list, get_template_part('ajax/add', 'article') );
        }
        echo $articles_list;
        wp_reset_postdata();
    } else {
        echo 0;
    }

    wp_die();
}
add_action('wp_ajax_download_last_article', 'download_last_article_callback');
add_action('wp_ajax_nopriv_download_last_article', 'download_last_article_callback');

文章输出模板

<?php 
// Элемент списка статей

global $post;
$title = get_the_title();
$permalink = get_permalink();
$excerpt = get_the_excerpt();
$date  = get_the_date('d F Y');
$id_img_post = get_post_thumbnail_id();
$img_post = wp_get_attachment_image($id_img_post, 'size_article_list');
$tags = wp_get_post_tags($post->ID);
?>

<li class="articles-item">
    <a href="#">
        <div class="articles-item-img"><?php echo $img_post; ?></div>
        <div class="articles-item-content">
            <div class="articles-item-content-title"><?php echo $title; ?></div>
            <div class="articles-item-content-date"><?php echo $date; ?></div>
            <div class="articles-item-content-description"><?php echo $excerpt; ?></div>
            <ul class="articles-item-content-tags">
                <?php foreach( $tags as $tag ): ?>
                    <li class="articles-item-content-tag"><?php echo $tag->name; ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
    </a>
</li>

在带有 ajax 脚本的文件中，我把这个

    var countArticles = 5;
    $('.download-button button').click(function(e) {
        e.preventDefault();
        var data = {
            'action': 'download_last_article',
            countArticles: countArticles
        };
        var this_element = $(this);
        $.post(arrAjax.url, data, function(response) {
            if(response == 3) 
                console.log('Записей больше нет.');
            else {
                alert('Получено с сервера: ' + response)
                $('#articles-list').html(response).animate({opacity: 1}, 300);
                countArticles += 5;
            }
        });
    });

一切正常，如果您注释掉收到的帖子并将输出作为对某个变量的响应，那么答案就会出现。但是，一旦我尝试输出帖子，就会收到错误 500（内部服务器错误，如果我没记错的话，就像这样）。先感谢您。