Question

使用WP API我试图从帖子中获取精选图片但不成功 - 这是不起作用的代码行：

<击> ourHTMLString += postsData[i]._links[i].wp:featuredmedia[i].href.guid.rendered;

<击>

其他代码行正在运行。这是代码：

var prodCatPostsContainer = document.getElementById("prod-Cat-Posts-Container");

var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'www.example.com/wp-json/wp/v2/posts?filter[category_name]=news-and-events');
function createHTML(postsData) {
  var ourHTMLString = '';
  for (i = 0;i < postsData.length;i++) {
      ourHTMLString += postsData[i]._links[i].wp:featuredmedia[i].href.guid.rendered;
      ourHTMLString += '<h6 class="news-title"><a href="#">' + postsData[i].title.rendered + '</a></h6>' ;   
      ourHTMLString += postsData[i].content.rendered;   
  }
  prodCatPostsContainer.innerHTML = ourHTMLString;
}
ourRequest.onload = function() {
     if (ourRequest.status >= 200 && ourRequest.status < 400) {
       var data = JSON.parse(ourRequest.responseText);
       console.log(data);
       createHTML(data);
     } else {
       console.log("We connected to the server, but it returned an error.");
     }
};

ourRequest.onerror = function() {
  console.log("Connection error");
};
ourRequest.send();

<击>

更新

我已添加了另一个XMLHttpRequest，以根据@RYAN AW建议获取新闻项目的媒体特色图像，但仍无法正常工作。我不确定我是否正确行事，但是我将所有特色媒体ID推送到一个数组中，然后我使用数组中的ID来获取get请求，抓住“guid” - ＆gt;我在JSON中可以看到的“渲染”图像网址。我是否必须以某种方式遍历这个相关的新闻项目mediaRequest？即mediaRequest.open('GET', 'http://www.example.com/wp-json/wp/v2/media/' + featuredMedia[i]);任何帮助都会很棒。

var prodCatPostsContainer = document.getElementById("prod-Cat-Posts-Container");
var mediaContainer = document.getElementById("media-Container");
var featuredMedia = [];

//----------------- News Content ------------------//

var newsRequest = new XMLHttpRequest();
newsRequest.open('GET', 'http://www.example.com/wp-json/wp/v2/posts?filter[category_name]=news-and-events');

newsRequest.onload = function() {
  if (newsRequest.status >= 200 && newsRequest.status < 400) {
  var data = JSON.parse(newsRequest.responseText);    
  createNEWS(data);
  } else {
  console.log("News Request - We connected to the server, but it returned an error.");
  }
};
function createNEWS(postsData){
  var ourHTMLString = '';  
  for (i = 0;i < postsData.length;i++){
    featuredMedia.push(postsData[i].featured_media);
    ourHTMLString += '<h6 class='"news-title"'><a href="#">' + postsData[i].title.rendered + '</a></h6>' ;   
    ourHTMLString += postsData[i].content.rendered + '<br><br>';
  }
  prodCatPostsContainer.innerHTML = ourHTMLString;
}
newsRequest.onerror = function() {
  console.log("Connection error");
};
newsRequest.send();

//----------------- Media Featured Image ------------------//

var mediaRequest = new XMLHttpRequest();

mediaRequest.open('GET', 'http://www.example.com/wp-json/wp/v2/media/' + featuredMedia);
/*for (i = 0;i < featuredMedia.length;i++){   
    mediaRequest.open('GET', 'http://www.example.com/wp-json/wp/v2/media/' + featuredMedia[i]);
}*/
mediaRequest.onload = function() {
if (mediaRequest.status >= 200 && mediaRequest.status < 400) { 
    var mediaDat = JSON.parse(mediaRequest.responseText);       
    createMEDIA(mediaDat);
} else {
    console.log("Media Request - We connected to the server, but it returned an error.");
}
};
function createMEDIA(mediaData){
    var mediaHTMLString = '';
    for (i = 0;i < mediaData.length;i++){        
    mediaHTMLString += '<img src="' + mediaData[i].guid.rendered + '"/><br>'; 
  }
  mediaContainer.innerHTML = mediaHTMLString;
}
mediaRequest.onerror = function() {
  console.log("Connection error");
};
mediaRequest.send();

Answer 1

嗨@roshambo试着把它写成答案，用那个插件你不需要第二次请求只是为了获得特色图片的img src，我可以轻松搞定这个特色图片用PHP，我不熟悉的javascript 。但我认为你的代码应该是这样的。

var prodCatPostsContainer = document.getElementById("prod-Cat-Posts-Container");

var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'www.example.com/wp-json/wp/v2/posts?filter[category_name]=news-and-events');
function createHTML(postsData) {
  var ourHTMLString = '';
  for (i = 0;i < postsData.length;i++) {
      //ourHTMLString += postsData[i].better_featured_image.source_url; //full size
      ourHTMLString += postsData[i].better_featured_image.media_details.sizes.post-thumbnail.source_url; //thumbnail
      ourHTMLString += '<h6 class="news-title"><a href="#">' + postsData[i].title.rendered + '</a></h6>' ;   
      ourHTMLString += postsData[i].content.rendered;   
  }
  prodCatPostsContainer.innerHTML = ourHTMLString;
}
ourRequest.onload = function() {
     if (ourRequest.status >= 200 && ourRequest.status < 400) {
       var data = JSON.parse(ourRequest.responseText);
       console.log(data);
       createHTML(data);
     } else {
       console.log("We connected to the server, but it returned an error.");
     }
};

ourRequest.onerror = function() {
  console.log("Connection error");
};
ourRequest.send();

如果您仍在激活该插件，则可以共享单个帖子的JSON响应。如果该帖子具有特色图像，则该响应中将存在better_featured_image字段。

Answer 2

我找到了答案https://wordpress.stackexchange.com/questions/241271/wp-rest-api-details-of-latest-post-including-featured-media-url-in-one-request我将此代码添加到GET请求位置的函数文件中

add_action( 'rest_api_init', 'add_thumbnail_to_JSON' );
function add_thumbnail_to_JSON() {
//Add featured image
register_rest_field('post',
    'featured_image_src', //NAME OF THE NEW FIELD TO BE ADDED - you can call this anything
    array(
        'get_callback'    => 'get_image_src',
        'update_callback' => null,
        'schema'          => null,
    )
  );
}

function get_image_src( $object, $field_name, $request ) {
$feat_img_array = wp_get_attachment_image_src($object['featured_media'], 'thumbnail', true);
return $feat_img_array[0];
}

然后调用ourHTMLString += '<img src=' + postsData[i].featured_image_src + '>';

WP API推荐了图片附件

2 个答案: