WordPressにもWP REST APIというAPIが標準で搭載されており、これを活用することでいろんなことができます。
この記事では、そんなWP REST APIで特定の記事を指定してその記事の本文を表示する方法について解説していきます。
他のWordPressの記事を、1つのサイトに表示させたい人はチェックしてみてください。
WP REST API
WP REST APIは、WordPressのデータベースの情報をJSON形式で取得できるAPIで、WordPress4.7から標準搭載されています。
使えるかどうか？の確認は簡単で、ブラウザのアドレスバーに下記を入力して、対象となるデータがJSON形式として返ってくるかを確認します。
WordPressのURL/wp-json/wp/v2/ブラウザのアドレスバーに上記を入力すると、以下のような表示になります。
このようにたくさんの文字列がブラウザに表示されたら成功です。
ブログの情報が取得できることができたらOKです。
この記事では、この方法でブログの情報を取得してJavaScriptで解析し、記事をHTMLで出力する仕組みを作っています。
特定の記事を指定して本文を表示したサンプル
早速サンプルですが、他のWordPressで作られた記事を指定して、出力しています。
本文全て表示している為かなり長いので、このサンプルではあえてスクロールして見れるようにしています。
サンプルのコード
サンプルのコードは、HTMLとJavaScriptの2つです。順に解説していきます。
出力された記事の本文は、データを取得するサイトの元データに準じてタグが出力されるので、CSSはその情報に準ずる必要があるので割愛します。
HTML
HTMLは取得した情報を出力する為、指定したIDを付与した div タグのみ設置します。
<div id="apiPost"></div>IDは、JavaScriptの中段あたりにある apiPost.innerHTML の部分と連動するので、このHTMLとJavaScriptの2箇所の名称は一致させるようにしましょう。
JavaScript
JavaScriptは、「WP REST API」のJSON ファイルを取得してコンソールに出力する fetch を使い、それを for 文でループさせて、その中の配列を指定して出力します。
const getPosts = "https://dubdesign.net/domain/wp-json/wp/v2/posts?_embed&include[]=1386"
fetch(getPosts).then(
response => {
return response.json();
}).then(data => {
for (let i = 0; i < data.length; i++) {
apiPost.innerHTML += '<div class="posts">' // wrapper
+ '<h2>' + data[i].title.rendered + '</h2>'
+ '<img src="' + data[i]._embedded["wp:featuredmedia"][0].source_url + '" alt="' + data[i].title.rendered +'">'
+ '<div class="posts_content">'
+ data[i].content.rendered
+ '</div>'
+ '</div>'
}
}).catch(err => {
// Do something with error here
console.log('Error: ' + err)
})冒頭の getPosts で指定するURLの「posts」の末尾に、半角の？をつけて include[]=記事ID と付与すれば、その記事のみ情報を取得します。
もしも複数の記事を取得したい場合は、include[]=記事ID&include[]=記事ID のように半角の＆で繋げて記述すれば、それら複数記事を取得できます。
あと、アイキャッチ画像も出力する場合は、_embed も繋げて書くようにしましょう。
