Algolia を自分のブログ(静的化した WordPress サイト)にデフォルト設定のまま入れてみたよ

Algolia Advent Calendar 2020 5日目を担当します、Hiromin です。アドベントカレンダーを見ると、、、コアなトピックが多いぞ!!!! そんな中、私が書いていいのかしら?!いいのかしら?!いいの、、、ええーっい、書いちゃえ!ってことで、Algolia 愛で私からはライトな話題を書かせていただきます。
ちょっと触ってみたいな、という方の後押しになれば幸いです。

というわけで、この個人ブログに Algolia を使ってみました!

<結論>

とりあえず入れてみた」は、めちゃくちゃ簡単です!!!!

ご存知の方も多いと思いますが、Algolia は爆速検索で有名ですが、ただの検索サービスじゃないんですよね。なので、知れば知るほどすごい!って思うことが多いわけですが。それこそ、今回のアドベントカレンダーの記事を全部読むと本当に深く知れることができると思います。

私の場合、「ちょっと触ってみたい」「ノーコードでちょちょいっと簡単にやりたい」「個人ブログにちょっと入れてみたい」といったライトな気持ちでした。
そう、単純に検索機能を入れてみたいなというライトな気持ちです。

そんな軽い気持ちを余裕で超えてくれた Algolia。実際入ってる箇所はこちらです。

やったこと

Algolia のアカウントを作成

無料プランがAlgoliaにはあり、私は無料プランを使っています。
初回14日間は有料プランが無料で利用することができます。

Algolia の管理画面にログイン、左メニューの[API Keys]を選択

プラグインを設定するための以下の3つのキーをコピーします。

  • Application ID
  • Search-Only API Key
  • Admin API Key

WordPress を起動し、Algolia の WordPress プラグインをインストール

WP Search with Algolia」をインストールします。
WordPress のデフォルトの検索機能を Algolia プラグインに置き換えるために、Algolia のプラグインをインストールします。

Algolia の認証設定を行う

WordPress ダッシュボードのメニューより [Algolia search] をクリックします。
Algolia の管理画面からコピーした “Application ID” “Search-Only API Key” “Admin API Key” を入力します。

検索フォームを設定

[Search Page] で [Use Algolia with Instantsearch.js] を選択します。
[Search Page] で検索エンジンをネイティブの WordPress から Algolia に変更します。

Autocompleteの設定

[Autocomplete]で「Enable autocomplete」を有効にし、「インデックス」「最大サジェスト数」「ポジション」など設定します。

以上、終わりです。

検索フォームに文字や単語を入力すると、Algolia の Autocomplete 機能により、検索ボタンをクリックせず Enter キーを押さなくても、検索結果が表示されます。

あっという間に、すごく簡単に検索機能が設置でき、私の場合、ブログサイトなのでデフォルトで十分満足です。おまけに爆速!

また、このサイトは Shifter Static によって、WordPress サイトを静的化にして公開しており、JavaScript で実現することが基本的条件ではありますが、API を使う Algolia ならその心配もなく使うことができました!

今後は Algolia の管理画面でできることを少しずつ試していけたらと思います。

明日は、Shinohara さんの「Algolia の Personalization について」です。これまためちゃくちゃ賢い機能でして、個々のユーザー体験をより素晴らしくしてくれる機能のようです。楽しみですね!

Chao!! Hasta luego!!

この記事を書いた人

hiroramos