wprestapi
Pocket

最近よく聞くWP REST API。興味はありましたがなかなか触れずいましたが、ようやく触ってみました。

WP REST API v2

WP REST API v2を有効化

まずは以下のプラグインをインストールして有効化します。

WP REST API v2

似たような名前のプラグインがあったりv1もあるので、間違えないように!(自分が間違えてた戒め)

有効化してURL「/wp-json/wp/v2/posts/」をつけてにアクセスするとずらーっとjson形式で表示されると思います。このブログでは以下にアクセスすると見れます。

https://blog.mismithportfolio.com/wp-json/wp/v2/posts/

これを使ってあとはJavaScriptなどを使って、記事を取得すればOKです。

Reactでやってみる

今回はReactでやってみました。

ただ先ほどのURLだと何故かこんな感じのエラーでるんですよね。。。

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 100757

余計な「<」が入っていると言われてると思うんですが、これどうしたらいいんだ。。。

取得記事数を指定する

ってことで取得記事数を指定してやり直してみるといけました。「?per_page=5」をつけると、その数字分の記事を取得してくれます。

https://blog.mismithportfolio.com/wp-json/wp/v2/posts?per_page=5

React

実際に書いたコードはこちら。

import React from 'react';
import {render} from 'react-dom';

var REQUEST_URL = 'https://blog.mismithportfolio.com/wp-json/wp/v2/posts?per_page=5';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        data: []
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
          this.setState({
              data: responseData,
          });
      });
  }

  render(){
    return(
      <ul>
        {this.state.data.map((item) => {
          return (
              <li key={item.id}>{item.title.rendered}</li>
          );
        })}
      </ul>
    );
  }
}

render(<App/>, document.getElementById('app'));

記事一覧取得できました!

WP REST APIを使うと何か面白そうなことができそうですね。今回はその第一歩。

Pocket