WP API 特色图片附件
Posted
技术标签:
【中文标题】WP API 特色图片附件【英文标题】:WP API featured image attachment 【发布时间】:2017-10-29 05:20:52 【问题描述】:使用 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();
更新
根据@RYAN AW 的建议,我添加了另一个 XMLHttpRequest 来获取新闻项目的媒体特色图片,但仍然无法正常工作。我不确定我这样做是否正确,但我将所有特色媒体 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();
【问题讨论】:
错误代码是什么?默认情况下,“发布”路由仅显示特色媒体 ID(不是 img url)(如果存在)GET ... net::ERR_CONNECTION_REFUSED
- 我已经成功获得了 features_media id - ourHTMLString += postsData[i].featured_media;'
所以你是说你无法获得 img url?不太清楚你的意思
是的,如果您需要媒体 url,您需要发出第二次请求或修改响应功能或使用插件更好地休息 api 特色图片
您好,我尝试了更好的 rest api 特色图片,但没有成功,我已经用第二个请求更新了我的问题 - 任何帮助都会很棒
【参考方案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 + '>';
【讨论】:
【参考方案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 字段。
【讨论】:
以上是关于WP API 特色图片附件的主要内容,如果未能解决你的问题,请参考以下文章