WP REST APIでもmeta_queryやtax_queryを自在に書けるプラグイン “WP_Query Route To REST API”

WordPressコアにREST APIが組み込まれてから1年余りが経ちました。弊社でも少しづつ制作に取り入れており、Ajaxで取得したJSONをパースしてjQueryでDOM操作するなど、簡易的なSPAを作ったりしています。

カスタムタクソノミーやカスタムフィールドを活用したサイトの場合、様々な条件で絞り込み表示をしたり、検索機能をつけることがよくあります。PHPであればWP_Queryを利用して複雑な条件にも対応できますが、JSからREST APIを叩く場合には、あまり細かな条件指定ができません。

あらかじめAPIのカスタムエンドポイントを追加しておく、という手段も一応はあるのですが、もっと手軽に実装する方法をご紹介します。フィンランドのAucor社が開発したプラグイン WP_Query Route To REST API です。GPL2+ライセンスで公開されています。

使い方は簡単。GitHubからプラグインをダウンロード、インストールして有効化すればOKです。たとえば下記のようなJavaScriptを書くと、WP_Queryを使って記事を取得することができます。

	//イベントの地域、カテゴリ、料金などを指定して検索
	const event_search = (area, category, price_min, price_max) => {
	const api_uri = '/wp-json/wp_query/args/?_embed';
	const param = {
	'posts_per_page': -1,
	'post_type' : 'event',
	'orderby' : 'date',
	'order' : 'ASC',
	'meta_query' : {
	'relation' : 'AND',
	0: {
	'key' : 'area',
	'value' : area,
	'compare' : 'IN'
	},
	1: {
	'key' : 'category',
	'value' : category,
	'compare' : 'IN'
	},
	2: {
	'key' : 'price',
	'value' : [price_min, price_max],
	'compare' : 'BETWEEN',
	'type' : 'NUMERIC'
	}
	}
	};
	$.ajaxSetup({cache: false});
	$.getJSON(api_uri, $.param(param), function () {
	}).done(function (json) {
	//ここでJSONをパースして描画
	});
	}

by GitHub

PHPとの違いといえば、meta_queryに複数のパラメータを指定する際、配列の添え字 (0, 1, 2…) を書く部分でしょうか。それ以外は、PHPでの書き方とほとんど変わらず、すぐに慣れることができます。

JSONの取得さえできれば、あとはお好みのライブラリで処理すればOKです。私も今はjQueryを便利に使っていますが、そろそろaxiosやVue.jsを取り入れたいな、と考えているところです。

株式会社トンボロは「WordPress専門」のウェブ制作会社です。