MENU
CLOSE
システム Edit : 2023.10.14 Update : 2024.11.07

WordPressサイトの検索ページをajaxによる非同期通信で対応した事例とそのやり方について

弊社で制作担当させていただいた、ウイングアーク1stさんのサイト「TECH BLOG」では、記事の検索ページに、ajaxによる非同期通信での検索機能を採用しました。


そもそも、ajaxとは?

通常ページを取得するときは、Webページをリロードして読み込みますが、リロードせずに何度もHTTP通信を行えるようになる通信を指します。
そのため、同じページ(URL)を表示したまま、ページの再読み込みや別ページへの遷移を伴わずに、サーバからデータを取得し、一部の表示のみを更新できます。
これにより、Webページがまるで一つのアプリケーションかのように、シームレスな表示や素早い応答ができるようになります。

検索ぺージでajax通信を用いるメリット

今回、検索ページでは「製品のタイプ」>「製品の種類」> 「製品のタグ」での絞り込みがご要望にありました。
さらに、上記で絞り込んだのちに、「ワード」での検索も要望としてありました。
それぞれの項目をユーザーが直感的に絞り込みできるようにするというのは、最初の課題として挙がっていたために、ajaxによるアプリケーションのような仕様で、直感的な操作を可能にしました。
このように直感的に操作が可能になることは、ユーザーの検索意欲を高めて必要な情報に辿り着きやすくすることや、離脱率の低下にもつながります。

一方で、最初に考慮したほうが良い点も。

とはいえ、最初のサイトの仕様設計の際に考慮し、クライアントと相談しておいた方がいい点もあります。
①Wordpressの基本的な仕様はページ遷移での検索なので、カスタマイズする必要がある。(工数がかかる)
②「検索ワードを管理画面や裏側のデータで取得したい」等の要望がある場合、データ取得のプラグインはデフォルトのページ遷移の仕様に基づくことが多いので、プラグイン側もカスタマイズしたり、スクラッチでの制作が必要になる可能性がある。

利点と考慮した方がいい点を比較し優先順位をつけた上で、検索ページをajaxによる非同期通信での検索機能にしてみるのもオススメです。

すごく簡単にやり方を解説

今回の実装の流れを簡単に説明しようと思いますが、どのようにajax化するか、php側、js側のファイルへの詳細の記載については、とても参考になる記事がありました。
Ajaxでページ遷移なしの絞り込み検索をつくる
弊社の今回の事例は、独自のカスタマイズが多かったこともあり、汎用できる箇所も限られるので、割愛しながら説明します。

1.JSで値を取得したり、送ったり。

今回は訳あって、phpファイルに下記を記述しています。
・絞り込みでチェックされた値を取得&格納
・ajaxでphp側に値を送る
・返ってきたテンプレートを貼りつける
▼footer.php

2.渡ってきたデータを基に絞り込まれた記事を取得してテンプレートを出力する。

先ほどのjsから渡ってきたデータを受け取って、検索のクエリをなげて最終的に用意していた「parts/parts-card.php」のテンプレートに当てはめた状態で、データを戻します。 ▼functions.php こんな感じでデータを受け取ったり、それを返したりしてajaxでの表示が可能になります。
参考サイトに記載があるように、WordPressはデフォルトでAjax処理をするファイル「/wp-admin/admin-ajax.php」をもっているので、それを使うというのは最初のポイントです。

その他、絞り込みの挙動だったり、ローディングのデザインは色々と調整する必要はありますが、wordpressでもajaxでの検索が可能となりました。
TECH BLOGサイトについては、他にも評価ボタンを工夫するなど、細かい仕掛けを沢山しています。
また、その効果について触れているインタビュー記事もありますので、是非読んでみてください。

Miki Kohinata

大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。