独自のユーザー投稿画面をWordPressで作りたいと思い、そのためにREST　API経由の投稿を試してみた。

使うライブラリ・プラグイン

jQueryでもできるのですが、とりあえずAngularJSを使えるかどうか試しました。

AngularJS for wordpress
http://roysivan.com/angularjs-for-wordpress/
https://github.com/royboy789/angularjs-for-wordpress

WP REST API (v2)　バージョン２

バージョン１は古いようなので、セキュリティ的に安心度が高そうなバージョン２でやりました。

APIの使い方プラグインを入れると使えるようになる

投稿に関係する動作の場合
(ホームのURL)/wp-json/wp/v2/posts

投稿取得
GET /wp-json/wp/v2/posts

投稿
POST /wp-json/wp/v2/posts

ハマったところ

　そのままサイトのURLに/wp-json/wp/v2/posts
をつけてもデータが取得できない。投稿もできなかった。

解決策

結局全部ドキュメントとかいろいろなサイトに書いてあったのですが

あらかじめWordPress側に書いておくのが必要なコード

認証に必要なnonceというのを生成

<?php

wp_localize_script( 'wp-api', 'WP_API_Settings', array( 'root' => esc_url_raw( rest_url() ), 'nonce' => wp_create_nonce( 'wp_rest' ) ) );

?>

リクエスト側のHTTPヘッダーにnonceを足さないといけない。

//ヘッダーの設定
options.beforeSend = function(xhr) {
    xhr.setRequestHeader('X-WP-Nonce', WP_API_Settings.nonce); //ここでnonceを設定している。

    if (beforeSend) {
        return beforeSend.apply(this, arguments);
    }
};

//POSTリクエストで投稿
$.ajax( {
    url: WP_API_Settings.root + 'wp/v2/posts/1',
    method: 'POST',
    beforeSend: function ( xhr ) {
        xhr.setRequestHeader( 'X-WP-Nonce', WP_API_Settings.nonce );
    },
    data:{
        'title' : 'Hello Moon'
    }
} ).done( function ( response ) {
    console.log( response );
} );

私はAngularJS(1.3）で同じようなのを書きました。

AngularJSのコード

main.js

var app= angular.module('mainModule',['ngResource']);

//ヘッダー設定部
app.config(function($httpProvider) {
  $httpProvider.defaults.headers.common = {
    'X-WP-Nonce': wpAngularVars.nonce　//nonce設定
  };
});

//取得、投稿をする部分
app.controller('homeController', function($scope, wpPostResource) {

//投稿取得
  function fetchPosts() {
    wpPostResource.query(function(data) {
      $scope.posts = data;
    });
  }

  fetchPosts();

//投稿する
  $scope.addPost = function(title, message) {
    if (!message || !title) return;
    wpPostResource.save({
      title: title,　//投稿のタイトル
      content: message, 　//本文
      status: 'publish'　//投稿後すぐに公開する
    }, function(result) {
      $scope.title = '';
      $scope.message='';
      fetchPosts();
      console.log(result);
    });
  };

//エンドポイントURLの設定
app.factory('wpPostResource', function($resource) {
  return $resource('http://192.168.33.10/wp-json/wp/v2/posts'); //ローカルPC上のWordPressのエンドポイント
});

これで投稿取得・投稿という基本的な動作はできました。
速度は遅いので、チューニングすればいいのか、そもそも限界なのか不明です。

AngularJSとWP REST APIを使ったWordPressへの投稿、投稿取得をやってみた

使うライブラリ・プラグイン

ハマったところ

解決策