SWELLの検索フォームはヘッダーとウィジェットに用意されていますが、検索キーワードの候補があると入力を助けられます。
そこで入力欄にフォーカスした時点で候補キーワードのサジェストを表示するようにしてみました。
その備忘録です。掲載の画像は2025年4月に当サイトの環境で撮影したもので、SWELLや他のプラグインの更新で見た目や動作が変わる場合があります。
SWELLで検索サジェストを表示するカスタマイズ
PHPでJavaScriptを出力し、CSSで見た目を整えます。掲載のPHPコードは子テーマの functions.php、またはCode Snippetsに追加します。PHPをSWELLの「高度な設定」のコード欄へそのまま貼り付けないでください。
サジェストに出す候補は、このコードでは固定のキーワード一覧として持たせています。投稿タイトルや検索履歴から自動で生成する方式ではありません。
ヘッダーの検索とウィジェットの検索で同じように出るか、スマホのメニュー内の検索フォームでも動くかは、導入先の設定で変わります。他のプラグインが検索フォームを置き換えている環境での動作は確認していません。
戻すときは追記したPHPコード（JavaScriptの出力）とCSSを外します。テーマやプラグインの設定は変更しないため、コードを外せば元の検索フォームに戻ります。
以下コードです。
SWELLの検索まわりのカスタマイズは、検索結果に件数を表示する方法、検索結果が見つからない時の文言を変える方法、投稿の絞り込み検索も参照してください。フックの基本はSWELLのフック一覧と使い方にまとめています。
この記事だけ読みたい方は単品購入、ほかの有料記事も読みたい方は購読プランをご確認ください。
購読対象の記事・料金は、下のプラン案内で確認できます。
役に立った記事を、ブログやSNSで紹介しませんか？
紹介制度の対象記事・購読プランを購入した方は、codocで専用リンクと報酬条件を確認できます。
専用リンク経由で購入されると、設定された紹介報酬が発生します。
購読プランの紹介報酬は初回課金のみが対象です。
紹介時は、広告・PRであることが読者に分かるように明記してください。
