WP REST APIで取得できる情報

WP REST APIを使えばWordPressの投稿や固定ページの情報をJSON形式で取得することができます。

WP REST APIのエンドポイント

記事を取得するには次のURLにアクセスします。
パラメータを設定すると条件を絞って取得できます。

記事を全て取得（デフォルトでは最新10件）

• ・https://ドメイン/wp-json/wp/v2/posts

特定の記事だけを取得

• ・https://ドメイン/wp-json/wp/v2/posts/記事ID

記事4件を取得

• ・https://ドメイン/wp-json”/wp/v2/post?per_page=4

“プログラミング”という単語が含まれる投稿を検索

• ・https://ドメイン/wp-json/wp/v2/posts?search=プログラミング

アイキャッチ付き記事情報を取得

• ・https://ドメイン/wp-json/wp/v2/post?_embed

それぞれURLにアクセスすると次のような画面になると思います。

WP REST APIで記事を取得する方法【JavaScript変更】

JavaScriptで記事の情報を含めたHTMLを生成し、該当箇所に挿入する物を実装します。

まず、記事一覧を挿入するHTMLを用意します。

HTML
<div class="post_container"></div>

JavaScriptでは、new XMLHttpRequest()を使ってエンドポイントにアクセスします。

JavaScript
$.ajax({
   type: 'GET',
   url: 'https://kakechimaru.com/wp-json/wp/v2/posts?_embed', // WP REST APIのエンドポイント
   dataType: 'json',
})
.done((json) => {
   let html = '';
 
   $.each(json, (index, post) => { // 取得した記事情報からHTMLを生成
       let title = post['title']['rendered'];
       let link = post['link'];
       let thumbnail;
 
       if( post['_embedded']['wp:featuredmedia'][0]['source_url'] ) {
           thumbnail = post['_embedded']['wp:featuredmedia'][0]['source_url'];
       }else{
           //
       }
 
       html += '<a href="' + link + '" target="_blank">';
       html += '<img class="img" src="' + thumbnail + '">';
       html += '<p class="title">' + title + '</p>';
       html += '</a>';
   });
 
   $('.post_container').append(html); // 生成したHTMLを追加
})
.fail((XMLHttpRequest, textStatus, errorThrown
) => {
   console.log(errorThrown);
});

実装サンプル

記事情報を取得したらconsole.log()でJSONを見るとどの情報を取得できたかわかります。

WP REST APIで記事を取得する方法【jQuery変更】

jQueryで記事の情報を含めたHTMLを生成し、該当箇所に挿入する物を実装します。

まず、記事一覧を挿入するHTMLを用意します。
※jQueryの読み込みを忘れずに！

HTML
<div class="post_container"></div>

jQueryでは、ajaxメソッドを使ってエンドポイントにアクセスします。

JavaScript
const postContainerDOM = document.querySelector('.post_container');
let requestURL = 'https://kakechimaru.com/wp-json/wp/v2/posts?_embed'; // WP REST APIのエンドポイント
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
 
request.addEventListener('load', () => {
   const superHeroes = request.response;
   populateHeader(superHeroes, postContainerDOM);
});
 
function populateHeader(posts, target) { // 取得した記事情報からHTMLを生成
   let html = '';
   posts.forEach(post => {
       let title = post['title']['rendered'];
       let link = post['link'];
       let thumbnail;
 
       if( post['_embedded']['wp:featuredmedia'][0]['source_url'] ) {
           thumbnail = post['_embedded']['wp:featuredmedia'][0]['source_url'];
       }else{
           //
       }
 
       html += '<a href="' + link + '" target="_blank">';
       html += '<img class="img" src="' + thumbnail + '">';
       html += '<p class="title">' + title + '</p>';
       html += '</a>';
   });
 
   target.insertAdjacentHTML('afterbegin', html); // 生成したHTMLを追加
}

実装サンプル

記事情報を取得したらconsole.log()でJSONを見るとどの情報を取得できたかわかります。