WordPressのWP REST APIを活用すると、キーワード検索を非同期で行い、検索結果をリアルタイムで表示することができます。これにより、ユーザーはページをリロードすることなくスムーズに検索結果を確認できるようになります。今回は、非同期検索の実装方法についてまとめていきたいと思います。
WP REST API を活用した非同期検索には、以下のメリットがあります。
- ページのリロードが不要 → ユーザーの操作がスムーズになる。
- 検索の速度向上 → すべての検索結果を事前にロードする必要がない。
- カスタマイズが容易 → カテゴリ別検索や投稿タイプの指定が可能。
WP REST API を使った非同期検索は、以下のようなケースで有効です。
- リアルタイムで投稿を検索したい場合 → ユーザーが検索フィールドに入力すると即座に結果を表示します。
- Ajax を活用した検索機能を追加したい場合 → 検索ボタンを押すのではなく、文字を入力するだけで結果を取得できます。
- カスタム投稿タイプ（例: 商品・レビュー）の検索に対応したい場合 → 投稿タイプやカテゴリを指定した高度な検索が可能です。
WP REST API のデフォルトの検索エンドポイントは以下のとおりです。
JavaScript
https://example.com/wp-json/wp/v2/posts?search=キーワードこのエンドポイントを JavaScript のfetch()を使って呼び出し、検索結果を取得します。
JavaScript
document.getElementById('search-input').addEventListener('input', async function() {
const query = this.value.trim();
if (query.length < 2) return; // 2文字以上で検索実行
const response = await fetch(`/wp-json/wp/v2/posts?search=${encodeURIComponent(query)}`);
const posts = await response.json();
const resultsContainer = document.getElementById('search-results');
resultsContainer.innerHTML = ''; // 前の検索結果をクリア
if (posts.length === 0) {
resultsContainer.innerHTML = '<li>該当する記事がありません。</li>';
return;
}
posts.forEach(post => {
const li = document.createElement('li');
li.innerHTML = `<a href="${post.link}">${post.title.rendered}</a>`;
resultsContainer.appendChild(li);
});
});HTML
<input type="text" id="search-input" placeholder="検索..."> <!-- 検索フォーム -->
<ul id="search-results"></ul>ユーザーが inputフィールドに文字を入力すると、入力が 2 文字以上のときに REST API へリクエストを送信します。取得した投稿の一覧を<ul>内に表示し、該当する記事がない場合は「該当する記事がありません」と表示されます。
特定の投稿タイプ（例: product）を検索したい場合は、以下のように API のエンドポイントを変更します。
JavaScript
const response = await fetch(`/wp-json/wp/v2/product?search=${encodeURIComponent(query)}`);product→ 商品データを検索event→ イベント情報を検索
- ユーザーが1 文字入力するたびにリクエストを送ると負荷が高いため、 2文字以上で検索を実行しましょう。
debounceを使用し、入力後一定時間経過してから検索を実行するのもおすすめです。
HTML
let timer;
document.getElementById('search-input').addEventListener('input', function() {
clearTimeout(timer);
timer = setTimeout(() => {
searchFunction(this.value);
}, 300); // 300ms 待機
});- 公開ページの検索なら認証不要
- 非公開データを検索する場合は
JWTやOAuthで認証が必要
JavaScript
const response = await fetch(`/wp-json/wp/v2/posts?search=${query}`, {
headers: { 'Authorization': 'Bearer YOUR_ACCESS_TOKEN' }
});他のドメインから API を呼び出す場合はCORS を許可する必要あります。
PHP
function allow_cors() {
header("Access-Control-Allow-Origin: *");
}
add_action('rest_api_init', 'allow_cors');
