Получение изображения, представленного в WP_Query

Содержание

Вопрос или проблема
Ответ или решение
Решение проблемы с отсутствием данных изображения
Скорректированный код
Объяснение внесенных изменений
Итог

Вопрос или проблема

Я знаю, что это спрашивали несколько раз, но пока я не смог увидеть свою ошибку. У меня есть AJAX-запрос, который обращается к функции из моего файла functions.php, но когда я проверяю возвращаемые данные, в массиве постов нет URL-адреса избранного изображения. Я подумал, что мне нужно создать часть массива для изображения, поэтому я перебрал запрос, но каждый раз получаю только последнее изображение. Я предполагал, что URL избранного изображения будет частью массива постов. Что я делаю не так?

function load_more_blogs() {
    
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 2,
        'paged' => $_POST['page']
    );

    $query = new WP_Query($args);

    // foreach ( $query->posts as $post ) {
        $results = array(
            'posts' => $query->posts,
            'image' => get_the_post_thumbnail($post->ID , 'post-thumbnail' ),
            'test' => $post->ID
        );
    // }
    

    wp_send_json_success($results);
    
    exit();
}



data: 
  image: "<img width=\"400\" height=\"400\" src=\"http://localhost:8888/wp- 
  content/uploads/2024/10/wp_dummy_content_generator_63.jpg\" class=\"attachment-post- 
  thumbnail size-post-thumbnail wp-post-image\" alt=\"\" decoding=\"async\" 
  loading=\"lazy\" srcset=\"http://localhost:8888/wp- 
  content/uploads/2024/10/wp_dummy_content_generator_63.jpg 400w, 
  http://localhost:8888/wp-content/uploads/2024/10/wp_dummy_content_generator_63- 
  300x300.jpg 300w, http://localhost:8888/wp- 
  content/uploads/2024/10/wp_dummy_content_generator_63-150x150.jpg 150w\" sizes=\"(max- 
  width: 400px) 100vw, 400px\" />"
  posts: (2) [{…}, {…}]
  test: 63
  [[Prototype]]: Object
  success: true

Предлагаю отформатировать данные так (не тестировалось):

function load_more_blogs() {
    ...

    $results = array();

    foreach ( $query->posts as $post ) {
        $results[] = array(
            'post'  => $post,
            'image' => get_the_post_thumbnail( $post->ID, 'post-thumbnail' ),
        );
    }

    wp_send_json_success( $results );
    exit();
}

Это даст вам массив массивов, где внутренний массив будет содержать две записи: post и image. К ним можно получить доступ так:

print_r( $results[0]['post'] );
print_r( $results[0]['image'] );

Ответ или решение

Чтобы извлечь изображение записи с помощью WP_Query и вернуть его с помощью AJAX-запроса в WordPress, важно правильно сформировать массив данных. Похоже, что Из кода, который вы предоставили, проблема заключается в неверной структуре результата и в том, что вы не итерируете по массиву записей.

Решение проблемы с отсутствием данных изображения

Итерация по записям: Как вы заметили, вам нужно итеративно проходить каждую запись, чтобы получить соответствующее изображение для каждой записи. В вашем коде переменная $post не определена в нужном контексте, поскольку она не находится внутри цикла foreach.
Формирование массива результатов: Правильно сформируйте массив, добавляя для каждой записи ее изображение.

Скорректированный код

Вот как должен выглядеть ваш код с учётом вышесказанного:

function load_more_blogs() {
    // Получаем текущую страницу из POST-запроса
    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;

    // Опции запроса
    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => 2,
        'paged'          => $paged,
    );

    // Выполняем WP_Query
    $query = new WP_Query($args);

    // Подготавливаем массив результатов
    $results = array();

    // Проверяем наличие записей и проходим в цикле
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post(); // Подготовка поста для использования в функции

            // Добавление данных записи и изображения в массив результатов
            $results[] = array(
                'post'  => array(
                    'ID'    => get_the_ID(),
                    'title' => get_the_title(),
                    'content' => get_the_content(),
                ),
                'image' => get_the_post_thumbnail(get_the_ID(), 'post-thumbnail'),
            );
        }
    }

    // Сбрасываем пост данные после запроса
    wp_reset_postdata();

    // Возвращаем успешный JSON-ответ
    wp_send_json_success($results);

    exit();
}

Объяснение внесенных изменений

Итерация с помощью while: Используя while ($query->have_posts()), мы гарантируем, что каждая запись будет правильно обработана и извлечены ее данные.
Структура результата: Массив $results теперь содержит вложенные массивы, каждый из которых включает как данные поста (post), так и его изображение (image). Для каждого поста мы формируем массив, который включает ID, заголовок и контент. Это позволяет проще обращаться к нужной информации после получения данных через AJAX.
Сброс поста: После выполнения запроса важно сбросить данные для того, чтобы избежать конфликтов с другими частями кода.

Итог

Используя предложенные изменения, ваше AJAX-запрос будет возвращать корректные данные для каждой записи, включая URL изображения. Убедитесь, что вы обрабатываете возвращенные данные на стороне клиента, чтобы отобразить заголовок, контент и изображение для каждой записи по отдельности.

Если потребуется дальнейшая помощь или более глубокая проработка этого решения, не стесняйтесь обращаться!