Algolia の Instantsearch を NO Code で WordPress サイトに埋め込めるプラグイン「Search with Algolia Instantsearch Blocks」をリリースしました

*この記事は、「Algolia Advent Calendar 2020」9日目の投稿です。

カタログサイトや EC など、サイト内を検索できる機能を必要とする Web サイトは数多く存在します。そして多くの CMS が提供するサイト内検索機能は、PHP や Ruby などのサーバーサイド言語で実装されており、Shifter Static や各種 Jamstack アプリケーションではある程度自前で検索機能を実装する必要がありました。

WordPress では、WP Search with Algolia プラグインを利用することで、Algolia という検索に特化した Web サービスに記事データをインデックスすることができます。しかし、検索フォームをサイトに設置するには、やはりJavaScript などでコードを書く必要があります。

そこで私たちは、Algolia Instantsearch を利用した検索フォームを WordPress に簡単に埋め込めるプラグイン「Search with Algolia Instantsearch Blocks」をリリースしました。

検索フォーム / 検索結果の表示に特化したプラグイン

このプラグインは、WP Search with Algolia プラグインでインデックスされた記事を検索させることに特化しています。そのため、記事のインデックス機能は提供していません。

プラグインをインストールすると、「Instantsearch」ブロックがブロックエディタに追加されます。

このブロックを利用することで、サイト内に Algolia を用いた検索フォームを設置できます。

設定方法

プラグインを有効化すると、[ Settings > Reading ] に Algolia の検索 API を利用するための設定項目が追加されます。

Algolia の Dashboard に表示されている、「Application ID」と「Search-Only API Key」をそれぞれコピー＆ペーストして入力し、保存しましょう。

あとは投稿や固定ページで「Instantsearch」ブロックを配置するだけです。

ブロックを配置し、公開すると検索フォームの設置が完了します。

検索結果の表示カスタマイズ

Instantsearch ブロックで表示される検索結果一覧はある程度カスタマイズが可能です。

ブロックの設定パネルを選択すると、次のようにさまざまな設定項目が表示されます。

Search Option : 検索対象や表示件数を制御

Index name に wp_searchable_posts を指定すると Algolia に送信されている WordPress の全て投稿が含まれたレコードが検索対象となります。
複数の検索フォームを設置したい場合や投稿タイプを限定したい場合は、 Index name に Algolia のどの Index を使用するかを選択してください。

また、検索結果の表示件数についても Hit Items を変更することで調整できます。