WordPress REST API を使って jQuery 経由で投稿「POST 編集 wp_localize_script WP_API_Settings」でお困りの方へ

WordPressの管理画面が好きじゃないため、カスタマイズしようと悪戦苦闘したメモ。

結論

  1. https://ja.wordpress.org/plugins/rest-api/ のプラグイン入れる
  2. 念のため、管理画面に入って設定→パーマリンク設定→更新 しておく
  3. http://example.com/wp-json/wp/v2/posts にアクセスしてJSONが表示されるか確認。表示がおかしい場合はプラグイン有効になってるか確認
  4. テーマファイルの好きな所に前にA-1のコードを書く
  5. WordPressにログインした状態で、同一ドメインの好きなページにA-2のJavaScript(jQuery)を記載してアクセス。初投稿の記事(ID:1)のタイトルが「ブログはじめてみました」に変更されたことを確認する(既に公開中の記事でも変更になるので注意)
▼A-1
<? //なぜかREST API が正常に出力されないので無理矢理対応。 ?>
<script type='text/javascript'>
    /* <![CDATA[ */
    var wpApiSettings = {"root":"<?=esc_url_raw( rest_url())?>","nonce":"<?=wp_create_nonce( 'wp_rest' )?>"};
    /* ]]> */
</script>
▼A-2
<script>
    //WPの最初の投稿のタイトルを変更します。
    $.ajax( {
        url: wpApiSettings.root + 'wp/v2/posts/1',
        method: 'POST',
        beforeSend: function ( xhr ) {
            xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
        },
        data:{
            'title' : 'ブログはじめてみました'
        }
    } ).done( function ( response ) {
        console.log( response );
    } );
</script>

ここまでやって動けば、WordPress側の設定はほぼ完了ですね、もちろん、別ドメインからのアクセス制限であるクロスドメイン問題とか色々ありますが、そのへんはググれば色々出てくるので今回は省略。タイトル以外の変え方は公式に書いてます

以下、個人的なメモです。未解決事件多数。

2016年2月16日現在、公式ドキュメントがおかしいんですが…。

http://v2.wp-api.org/guide/authentication/

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

▼JS
$.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 );
} );

正直、何したいのか全くわからなかった…。 テーマファイルのheader.phpあたりで読んである 「wp_head();」より前に、このコードを書けば動くような雰囲気出してるんですが、何も出力されなかったんですよね。。テーマが壊れてるのかな?標準テーマも試したんですけどね。あと、WP_API_SettingsからwpApiSettingsに名前が変わってた

http://example.com/wp-json/wp/v2/posts にアクセスしてもJSONが出力されないんですが…。

管理画面に入って設定→パーマリンク設定→更新 しておく。