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制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【基本編】JavaScriptのマウスイベントでドラッグ&ドロップ機能を実装する

【基本編】JavaScriptのマウスイベントでドラッグ&ドロップ機能を実装する

【基本】Local by FlywheelでWordPressをローカルに構築する

【基本】Local by FlywheelでWordPressをローカルに構築する

Amazonみたいな商品の拡大プレビュー機能を実装

Amazonみたいな商品の拡大プレビュー機能を実装

【CSSのみ】指定行数を超えたテキストを非表示にする方法

【CSSのみ】指定行数を超えたテキストを非表示にする方法

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

【Google Maps API】Googleマップ埋め込みのピンを変更する

【Google Maps API】Googleマップ埋め込みのピンを変更する