WordPress (Shifter) + Algolia の活用法

WordPress (Shifter) + Algolia の活用法

Shifter + Algolia アーキテクチャ

Algolia Advent Calendar 2021 12/20(月) の記事となります。
この記事では LabWorks のサイト内検索で 利用している Algolia について WordPress(Shifter)との連携、サイト内検索での工夫をご紹介します。


Shifter で作られたサイト内を検索するには外部サービスが必要

Shifter は WordPress のコンテンツ(投稿や固定ページ、アーカイブなど)を HTML ファイルに変換した上でホスティングしています。そのため WordPress の検索フォームやお問い合わせフォーム(メール送信フォーム)を設置したい場合は外部サービス(SaaS)を利用する必要があります。
どういった SaaS があるかは Shifter ブログで紹介しています。

目的に合わせたフォーム と Shifter Static の連携でビジネスをアップグレード
https://www.getshifter.io/ja/upgrade-your-business-with-a-purpose-built-form-and-shifter-static-integration-ja/

Algolia の InstantsearchをNO Codeで WordPress サイトに埋め込めるプラグイン「Search with Algolia Instantsearch Blocks」をリリースしました
https://www.getshifter.io/ja/search-with-algolia-instantsearch-blocks/

\WordPress のコンテンツを HTML ファイルに変換できる Shifter とは?/

Algolia を採用した理由

Algolia には送信されたレコードを元にAPIで検索フォーム・検索結果を提供する「Algolia Search」とAIを活用したeコーマース向けレコメンドエンジンを提供する「Algolia Recommend」を提供する二つのサービスがあります。

Site Search & Discovery powered by AI | Algolia
https://www.algolia.com/

Algolia

LabWorks では Shifter 環境でも API と JavaScript でサイト内検索を実施可能な Algolia Search を採用しました。
WordPress デフォルトの検索機能では実現が難しい検索キーワードに基づくサジェスト、 WordPress のカテゴリーやタグでの絞り込みなど汎用性が高いことも魅力の一つです。

LabWorks での Algolia 活用法

WordPress との連携

事前に Algolia にアカウントを作成後、API キーを取得しておく必要があります。
WordPress にプラグインをインストール・有効化後、API キーの入力と Shifter の場合は Instantsearch.js を利用する設定を行います。
これらの手順については Shifter のサポートドキュメントに掲載していますのでご参照ください。

WP Search with Algolia
https://wordpress.org/plugins/wp-search-with-algolia/

Shifter: Integrating Algolia Search with WordPress
https://support.getshifter.io/en/articles/762156-integrating-algolia-search-with-wordpress

検索フォーム・結果の設置

プラグインの設定のみで WordPress の検索フォーム・検索結果テンプレートが Algolia を利用したフォーム・ページに置き換わります。ただし、Shifter の場合は検索結果テンプレートが動作しないため、別途固定ページなどで検索ページを設けるのがベストです。
Search with Algolia Instantsearch Blocks プラグインを利用することで、固定ページに検索フォーム・検索結果の表示を行うブロックを設置できます。

固定ページで Search with Algolia Instantsearch Blocks を利用

このプラグインは Shifter 以外の WordPress 環境でも利用可能です。詳しい利用方法や設定は Shifter ブログに掲載していますのでご参照ください。

Search with Algolia Instantsearch Blocks
https://wordpress.org/plugins/search-with-algolia-instantsearch-blocks/

AlgoliaのInstantsearchをNO CodeでWordPressサイトに埋め込めるプラグイン「Search with Algolia Instantsearch Blocks」をリリースしました
https://www.getshifter.io/ja/search-with-algolia-instantsearch-blocks/

検索させたいページ

WP Search with Algolia プラグインで投稿・固定ページの他にカスタム投稿タイプ、カテゴリー、タグのアーカイブを検索対象に含めることができます。

WP Search with Algolia Setting
WP Search with Algolia の設定画面

Algolia では WordPress で設定した項目毎のインデックスと全てのレコードを含めたインデックスが生成されます。
全てのレコードを検索させたい場合は インデックス wp_searchable_posts、個別に検索対象となるインデックスを指定したい場合はそれぞれの Index を利用(参照)することができます。

Algolia index
LabWorksの場合のインデックス

検索させたくないページ

LabWorks では前述の検索用の固定ページやフロントページに設定している固定ページなど、任意の投稿・固定ページを Algolia の検索結果(インデックス)から除外する機能を開発し、訪問者にとって必要なコンテンツだけを表示させるよう導線の最適化も狙いました。

仕様・設計は

  • 投稿・固定ページ・カスタム投稿タイプに「Algolia の検索結果から除外」メタボックスを作る
  • カスタムフィールドの保存(削除)
  • 「Algolia の検索結果から除外」するフラグがある投稿・固定ページは Algolia に自動同期させる時のフィルターでインデックスに送信させない

となります。

具体的な手法は下記の記事をご参照ください。

WordPress + Algoliaで、Algolia の検索対象から特定の投稿(固定ページ、カスタム投稿タイプ)を除外する
https://qiita.com/gatespace/items/7e1b379c7212b4ce8c34

データの重み付け(ランキング・ソート)

Algolia ではレコードの項目を利用してデータの重み付けを行い、検索結果の表示順に影響するように設定できます。
WP Search with Algolia プラグインを利用したときはプラグインのデフォルトで「先頭に固定表示になっているか」「日付」「インデックスされた順」を参照しています。

Algolia Ranking and Sorting
Algolia | Ranking and sorting

これ以外に投稿タイプ(post_type.label)や順序(menu_order)を指定してランキング・ソートに活用することもできます。
ランキングとソートの一例で、WordPress プラグインの Yoast SEO は 内部リンクの数値情報を Algolia と連動し、検索結果の重み付けを行う機能を有料で提供しています。

Algolia integration – Yoast SEO
https://yoast.com/features/algolia/

最後に

Algolia は今回紹介した 検索以外にもeコマースサイトをターゲットにしたレコメンドエンジンや検索・レコメンドともにAIを活用した機能など様々な機能が提供されています。
弊社では Algolia を活用した検索機能、関連記事表示などの導入支援サービスを行っていますので是非お気軽にお問い合わせください。

Algolia 導入支援・サポート
https://www.digitalcube.jp/products/algolia/

導入事例|三菱重工業様 社内向けコミュニティサイト「Growth Base」をリリース、グループ横断型デジタルコミュニティを短期間で実現
https://labworks.digitalcube.jp/blog/interview_20210702_mhi/

社内向けコミュニティサイトの制作事例
https://labworks.digitalcube.jp/showcase/20210702_mhi/

\WordPress のコンテンツを HTML ファイルに変換できる Shifter とは?/

横浜市立大学附属病院 次世代臨床研究センターリクルートダイレクトスカウト
JOLLY GOOD!エピックベース株式会社
有限会社ワグ株式会社デジタルガレージ
LegalOn Technologies日本協創投資
SmartHRSHARP
mikihouseInternet Society
INFOBAHN GROUPfreee
CanCam旭化成
横浜市立大学附属病院 次世代臨床研究センターリクルートダイレクトスカウト
JOLLY GOOD!エピックベース株式会社
有限会社ワグ株式会社デジタルガレージ
LegalOn Technologies日本協創投資
SmartHRSHARP
mikihouseInternet Society
INFOBAHN GROUPfreee
CanCam旭化成
Contact

当社へご興味をお持ちいただきありがとうございます。
「こんなことやってみたい!」と、ぜひ気軽にご相談ください。
担当者よりご連絡差し上げます。