JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

WP REST APIで特定の記事を指定してその記事の本文を表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

WP REST API

WP REST APIで特定の記事を指定してその記事の本文を表示

WP REST APIで特定の記事を指定してその記事の本文を表示

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は?

出力された記事の本文は、データを取得するサイトの元データに準じてタグが出力されるので、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 も繋げて書くようにしましょう。