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