会員限定のWordPressサイト向け検索モーダルの構築

Translated for your language. 原文を読む.

AI-assisted draft.

GyaanSetu Editorial一昨日2分で読めます

多くのWordPress検索チュートリアルは、ヘッダーにウィジェットを追加したところで終わってしまいます。

しかし、有料コースやプライベート動画のようなアクセス制限されたコンテンツがある場合、この方法では不十分です。デフォルトの検索機能では、ログインしていない訪問者にプライベートコンテンツのタイトルが漏洩してしまいます。

私は、フィットネス会員制サイト向けにライブ検索モーダルを構築しました。このサイトでは、WordPress、WooCommerce、Divi、LearnDash、およびWishList Memberを使用しています。

ペイウォール（支払い障壁）を尊重した検索機能を構築する方法を以下に紹介します。

アーキテクチャ

アクセス権限を考慮したフィルタリングを備えた統合インデックスを使用しました。これを選択した理由は、ログインしていないユーザーがメンバー限定投稿のタイトルや抜粋を絶対に目にしないようにするためです。

UIには、フルスクリーンのオーバーレイを開くアイコンを使用しています。これにより、モバイルでのスペースを節約でき、窮屈な入力バーよりもすっきりとした見た目になります。

すべては、子テーマ内の単一のカスタムRESTルートを通じて実行されます。

技術的な重要ルール：

依存関係のガード: Relevanssiのような検索プラグインを使用する場合は、関数によるチェックを行ってください。プラグインが存在しない場合でも、サイトが壊れるのではなく、WordPressのコア機能にフォールバックするようにします。
サーバーサイドでのフィルタリング: JavaScriptを使用して結果をフィルタリングしてはいけません。ブラウザ上で結果を隠したとしても、データはすでにネットワークレスポンスに含まれています。DevToolsを使える人なら誰でもそれを見ることができます。サーバーがレスポンスを送信する前にデータをフィルタリングしてください。
キャッシュの除外: 検索用のRESTルートをページキャッシュから必ず除外してください。結果をキャッシュしてしまうと、あるメンバーの検索結果がゲストに提供され、プライベートコンテンツが漏洩する可能性があります。

クライアントサイドにはバニラJavaScriptを使用しています。

UXを機能させるための3つの要素：

デバウンス (Debounce): キー入力からリクエストを送信するまで250ms待ちます。これにより、不要なサーバー負荷を防ぎます。
AbortController: ユーザーがタイピングを続けている間、前のリクエストをキャンセルします。これにより、古い結果が新しい結果を上書きするのを防ぎます。
エラー状態: fetchに失敗した場合は、明確なメッセージを表示します。止まることのない回転中のローダーは、悪いUXです。

Diviのモバイルメニューに検索ボタンを注入しようと試みました。しかし、テーマがクリックをインターセプト（横取り）してしまい、ボタンがクリックできなくなりました。

解決策は単純でした。テーマと戦うのをやめることです。

ボタンをメニューの中に入れる代わりに、独立した要素としてヘッダーに注入しました。これにより、テーマの制御外に置くことができ、タップしやすくなりました。