Home
JavaScript
WP REST APIを使用してWordPress記事を外部サイトで表示する方法

WP REST APIを使用してWordPress記事を外部サイトで表示する方法

WP REST APIを使用してWordPress記事を外部サイトで表示する方法

どうも!かけちまるです!

WordPressでブログ運営をしている人で外部サイトにもブログの更新情報を載せたいという事があると思います。

WP REST APIで記事を取得する事でWordPressを更新すると自動的にWP REST APIで記事を取得したサイトも更新されるので便利です。

この記事では、

  • ・WP REST APIで取得できる情報
  • ・WP REST APIで記事を取得する方法

がわかります。

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を見るとどの情報を取得できたかわかります。

取得情報をconsoleに表示

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を見るとどの情報を取得できたかわかります。

取得情報をconsoleに表示

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

jQueryでスクロール中か否かを判定する方法

jQueryでスクロール中か否かを判定する方法

GLSLの修飾子varyingの使い方【Three.js】

GLSLの修飾子varyingの使い方【Three.js】

【雪を降らせる】particles.jsを使って簡単にアニメーション

【雪を降らせる】particles.jsを使って簡単にアニメーション

bxSliderのデザインカスタムと不具合の対処

bxSliderのデザインカスタムと不具合の対処

floatで失った要素の高さを取り戻す2つの方法

floatで失った要素の高さを取り戻す2つの方法

【GSAP入門】使い方となにができるのか

【GSAP入門】使い方となにができるのか