https://wp-kyoto.cdn.rabify.me/wp4-4-call-oembed-api/

oEmbedのタグなどをWP REST APIから取れるという記事を以前書きましたが、「REST APIで取れるんだったら、WordPress外からもoEmbed使えるよね？」となったので試してみました。

やること

oEmbedのAPIをWordPress外から呼び出してみる

今回のターゲット　

「日和ったなwww」とか煽ってきた長野の人がおりましたので、そこの記事を使いましょう。

WordCamp Tokyo 2015 のコントリビューターデイで、超すごいプラグインつくりました。#wctokyo

とりあえず動くもの

See the Pen MKKJxR by hidetakaokamoto (@hideokamoto) on CodePen.

CodePenという外部サービス（もちろんWordPressじゃないですよ？）で、Ajaxを使ってoEmbedしてみました。

コード

[html]
<div id="ajax"></div>
<script>
var url = ‘https://torounit.com/wp-json/’;
var post_url = ‘https://torounit.com/blog/2015/11/03/2124/’;
$.ajax({
url: url + ‘oembed/1.0/embed?url=’+ post_url,
type:’GET’,
dataType: ‘json’,
timeout:10000,
}).done(function(data) {
$(‘#ajax’).append(data[‘html’]);
}).fail(function(data) {
$(‘#ajax’).append(‘fail’);
});
</script>
[/html]

oEmbedのAPIをAjaxで叩いて、戻り値から「html」の値を放り込んでるだけですね。

気になる点

とはいえどう考えても本来の用途とは違うので、こんなエラーが出てます。

XMLHttpRequest cannot load https://torounit.com/blog/2015/11/03/2124/embed/?relatedposts=1&relatedposts_exclude=undefined. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

どこでこのURLをコールしてるのかがわからないのですが、おそらく[‘html’]の中かどこかからコールしようとしてエラーになっているのではと思います。

おまけ

WP REST APIで投稿データを取得して、記事URLを１つずつoEmbedのAPIに送り込んだらこんなこともできます。

See the Pen QyydBB by hidetakaokamoto (@hideokamoto) on CodePen.

ソース

[html]
<div id="ajax"></div>
<script>
// Add HTML
var url = ‘https://wp-kyoto.cdn.rabify.me/wp-json/’;
$.ajax({
url: url + ‘wp/v2/posts’,
type:’GET’,
dataType: ‘json’,
data : {
filter: {
s: ‘wp-api’,
posts_per_page: 5
}
},
timeout:10000,
}).done(function(datas) {
for (var i = datas.length – 1; i >= 0; i–) {
var post_url = datas[i][‘link’];
$.ajax({
url: url + ‘oembed/1.0/embed?url=’+ post_url,
type:’GET’,
dataType: ‘json’,
timeout:10000,
}).done(function(data) {
$(‘#ajax’).append(data[‘html’]);
}).fail(function(data) {
$(‘#ajax’).append(‘fail’);
});
}
}).fail(function(datas) {
$(‘#ajax’).append(‘fail’);
});</script>
[/html]

postのAPIを叩くときにfilterクエリでキーワード検索や件数絞り込みができるので、「どの記事というわけじゃないけど、ま○○について書いた記事引っ張ってきたい」とかいうときに使えそうです。

マニアックですかね。

雑なまとめ

まぁ気になるところはありますが、「こんなこともできるんだぜ」ってことでWP REST APIの小ネタでした。