WP API功能的图像附件

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(); 

---

UPDATE

我又增加XMLHttpRequest来获取媒体功能的新闻项目的形象，每@RYAN AW建议，但还是行不通。我不确定我是否正确执行此操作，但是我将所有特色媒体ID都推送到了一个数组中，然后使用数组中的ID作出获取请求，获取“guid” - >“rendered”图像url我可以在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

我已经找到了答案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 + '>';

Answer 2

喜@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字段。