WP API功能的图像附件

问题描述：

使用WP API我试图从后得到的特色形象，但不成功 - 这里的代码不工作行：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();

什么是错误代码。将此代码添加到我的函数的文件吗？如果存在 –

'GET ... net :: ERR_CONNECTION_REFUSED' - 我已成功获取featured_media id - 'ourHTMLString + = postsData [i] .featured_media ;''你是说你不能得到IMG网址？不太清楚你的意思 – roshambo

是的，如果你需要媒体网址你需要做第二次请求或修改响应函数或使用插件更好的休息api精选图像 –

答

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

答

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

WP API功能的图像附件

相关推荐