wp-adminでWP APIをJSから扱う

wp-adminからWP APIをJSからコールする方法を試したので覚書。

WP APIをコールする際の注意点

認証が必要なAPIは、X-WP-Nonceをヘッダーで送る必要がある。

wp-api.jsのimport

nonceの生成などをよしなにしてくれるのでimportしておく。
ついでにPOSTリクエストにjqueryを使うのでこちらもいれておく。

add_action('wp_enqueue_scripts', 'add_scripts' );
add_action('admin_enqueue_scripts', 'add_scripts' );

function add_scripts() {
  if ( is_user_logged_in() ) {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'wp-api' );
    wp_enqueue_script( "custom_js", plugins_url( 'libs/scripts.js', __FILE__ ), array( 'jquery', 'wp-api' ) );
  }
}

libs/scripts.js

リクエスト処理部分。
wp-api.jsを入れていると、window.wpApiSettingsという値がwp-adminでは定義されている様子。
これにWP APIのパスとnonceが入っているので使う。

const settings = window.wpApiSettings
const requestObj = {
    url: settings.root + 'wp/v2/posts',
    method: 'POST',
    beforeSend: function ( xhr ) {
      xhr.setRequestHeader( 'X-WP-Nonce', settings.nonce );
    },
    body: { /* post params */}
}
jQuery.ajax( requestObj )
  .then( result => console.log( result ) )

wp-api.jsをちゃんと使えばjQueryもいらない気はする。
ただ、Backbone.js触ったことがないのでそれはまた時間ができたときにでも。