Получить изображение для записи и миниатюры дополнительных записей WordPress REST API

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

<script>
(function($){
  $(document).ready(function(){

    $.getJSON('https://localhost/wordpress/wp-json/wp/v2/posts?category_name=portfolio&per_page=50&_embed', function(response){
      console.log(response);
      $.each(response, function(i){
        console.log(response[i]._embedded['wp:featuredmedia'][0].source_url);
      });
    });

  });
}(jQuery));
</script>

(function($){
  $(document).ready(function(){
    var items = [];
    $.getJSON('https://localhost/wordpress/wp-json/wp/v2/posts?category_name=portfolio&per_page=50&_embed', function(response){
      console.log(response);
      $.each(response, function(key,val){
        //console.log(val._embedded['wp:featuredmedia'][0].source_url);
        items.push(''+''+
                     '');
      });
    });

  });
}(jQuery));

//используйте массив переменных для добавления данных

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

Получение изображения поста и дополнительных миниатюр с помощью REST API WordPress

Ваша задача – получить изображение поста и дополнительные миниатюры через REST API WordPress для кастомной темы. В этом посте мы разберем, как это сделать без использования плагинов, а также определим ключевые моменты реализации вашего запроса на основе предоставленного вами кода.

Введение в REST API WordPress

WordPress предоставляет мощный REST API, который позволяет разработчикам взаимодействовать с данными сайта через JSON. С помощью этого API можно получать посты, страницы, медиа и другую информацию, используя запросы HTTP. Одной из наиболее полезных функций является возможность извлечения изображений, связанных с постами.

Запросы к API для получения изображений

Для получения изображений, связанных с постами, необходимо использовать параметр _embed. При использовании этого параметра, WordPress будет включать данные о связанных ресурсах в ответ, что позволяет получить миниатюры постов непосредственно в одном запросе.

Ваш код выглядит следующим образом:

<script>
(function($){
  $(document).ready(function(){
    $.getJSON('https://localhost/wordpress/wp-json/wp/v2/posts?category_name=portfolio&per_page=50&_embed', function(response){
      console.log(response);
      $.each(response, function(i){
        console.log(response[i]._embedded['wp:featuredmedia'][0].source_url);
      });
    });
  });
}(jQuery));
</script>

Шаги для извлечения миниатюр

1. Запрос к API: Вы уже правильно сформулировали запрос к API, добавив параметр _embed. Это позволяет получить дополнительные данные о связанных ресурсах, таких как изображения.

2. Обработка ответа: В вашем коде используется метод $.each для перебора всех постов в ответе. При выводе URL миниатюры вы ссылаетесь на response[i]._embedded['wp:featuredmedia'][0].source_url, что является корректным способом получения URL.

3. Обращение к дополнительным миниатюрам: Если у вас есть необходимость получать дополнительные миниатюры, зарегистрированные через плагин, вы можете использовать register_post_meta и get_post_meta в комбинации с API. К сожалению, если дополнительная миниатюра не является типичным featured_image для REST API, её может не быть в ответе. В таком случае вам нужно будет либо добавить кастомный meta_field для поста, либо настроить свой REST Endpoint.

Пример реализации для получения дополнительных изображений

Если ваш плагин создает дополнительное пользовательское поле для миниатюры, вы можете извлечь это поле следующим образом:

1. Создайте Endpoint в функции темы или плагине:

   add_action('rest_api_init', function () {
      register_rest_route('custom/v1', '/posts/', array(
          'methods' => 'GET',
          'callback' => 'get_custom_posts',
      ));
   });
   
   function get_custom_posts() {
      $posts = get_posts(array('numberposts' => 50, 'category_name' => 'portfolio'));
      $data = [];
      foreach ($posts as $post) {
          $post_data = [];
          $post_data['title'] = get_the_title($post);
          $post_data['featured_image'] = get_the_post_thumbnail_url($post, 'full');
          $post_data['custom_thumbnail'] = get_post_meta($post->ID, 'custom_thumbnail_key', true); // Замените 'custom_thumbnail_key' на актуальный ключ вашего пользовательского поля
          $data[] = $post_data;
      }
      return $data;
   }

2. Вызывайте свой кастомный Endpoint с помощью JavaScript:

   (function($){
     $(document).ready(function(){
        $.getJSON('https://localhost/wordpress/wp-json/custom/v1/posts/', function(response){
           console.log(response);
           $.each(response, function(i, val){
              console.log(val.featured_image);
              console.log(val.custom_thumbnail); // Ваше дополнительное изображение
           });
        });
     });
   }(jQuery));

Заключение

Используя REST API WordPress, вы можете эффективно получить не только изображение поста, но и другие медиа ресурсы, в том числе дополнительные миниатюры. Для этого потребуется немного больше кода и, возможно, кастомизация, но в результате вы получите гибкое и мощное решение.

Убедитесь также, что у вас есть активный доступ к ресурсам и корректные учетные данные для работы с REST API. Это обеспечит надежное взаимодействие вашего клиентского кода с сервером WordPress.