モーダル検索フォーム
モーダル検索フォームはSearchWPを必要としませんが、利用可能な場合は使用します
Search Model Form拡張機能を使用すると、サイト上のボタンまたはアイコンによってトリガーされるモーダル（ポップアップ）ウィンドウに検索フォームを表示できます。これにより、ユーザーはすっきりとした、気を散らすことのない検索体験を得られます。
あらゆるテーマやSearchWP構成に統合できるように設計されたModal Formは、サイトに見た目の良い検索フォームを追加する最も簡単な方法です。
モーダル検索フォームはSearchWPを必要としないため、wordpress.orgで利用可能であり、あらゆるWordPressサイトで機能します。SearchWPがインストールされ有効になっている場合、Modal Formは自動的にそれを利用します。そうでない場合は、WordPressのネイティブ検索結果が提供されます。
拡張機能がアクティブな場合、Search Forms > Search Modelタブの下にあるModel Form設定にアクセスできます。
1. モデルフォームを有効にする
ウェブサイトでSearchWPモーダルフォーム機能を有効または無効にするためのトグル。
2. 検索フォーム
このオプションを使用すると、モーダルポップアップ内に表示する検索フォームを選択できます。ドロップダウンリストからカスタマイズされたSearchWP Formを選択してポップアップに表示できます。カスタムフォームが選択されていない場合は、デフォルトのWordPress検索フォームが使用されます。
注意: モーダルショートコードまたはメニュー項目でカスタムエンジンを選択した場合、それは検索フォーム設定で選択されたエンジンを上書きします。
3. スタイリングを含める
モデルフォームは、ポップアップの読み込みにカスタムスタイリングを含めるための特定のCSSをロードします。適切なオプションを選択することで、ポップアップの位置決めまたは視覚的なスタイルを読み込むことができます。スタイルなしオプションを選択した場合、モーダルフォームのCSSはロードされないことに注意してください。独自のスタイリングを適用する必要があります。このオプションは、上級ユーザーにのみ推奨されます。
4. フルスクリーンモード
デフォルトでは、モーダルポップアップは固定幅のコンテナで読み込まれます。フルスクリーンモードが有効になると、モーダルフォームは画面全体の幅と高さを占めるように拡張されます。
5. 背景スクロールを無効にする
このオプションを有効にすると、モーダルポップアップが開いているときに背景のスクロール機能が無効になります。これにより、ユーザーがモーダルの背後にあるページコンテンツを操作することを防ぐのに役立ちます。
何が違うのか？
SearchWPモーダル検索フォームの背後にある哲学は、アクセシブルで軽量なモーダル検索フォームを簡単に実装できるようにすることですが、おそらくそれ以上に、優れた開発者（およびユーザー）体験を提供することです。
SearchWPモーダル検索フォームは、あなたが使用する方法でWordPressと直接統合され、デフォルトのモーダルフォームテーマはアクティブなテーマによって設定されたスタイルを基盤としているため、オーバーヘッドは可能な限り小さくなっています。テンプレートローダーも組み込まれているため、最小限の手間でSearchWPモーダル検索フォームを完全にカスタマイズできます。
カスタマイズの容易さの例として、デフォルトのテンプレートをご覧ください。
使用方法
SearchWPモーダル検索フォームを使用すると、WordPressウェブサイトのどこにでもモーダル検索フォームを簡単に実装できます。モーダルを実装するには、（1）トリガーと（2）モーダル自体が必要です。
このプラグインを使用すると、これら2つの要素の実装が非常に簡単になります。次の方法が組み込まれており、利用可能です：
- メニュー項目として
- ショートコードを使用
- Gutenbergブロックとして
- テンプレート内でプログラムで（コード）
サイトに検索フォームモーダルをいくつでも追加できます。それぞれが独自のテンプレートと設定オプション（例：SearchWPエンジン）を使用します。
メニュー項目検索フォームモーダル
メインサイトナビゲーションに検索フォームを追加することは良いアイデアであり、SearchWPモーダル検索フォームを使用すると、わずかな時間で簡単に追加できます。
このプラグインは、既存のメニューを編集する際に利用できる新しいグループを追加します。テーマにカスタムモーダルテンプレートを作成した場合、それはこのグループの下に表示されます。
追加したら、SearchWPモーダル検索フォームメニュー項目を、追加したいその他のカスタマイズを含め、他のメニュー項目と同様に扱うことができます。
メニュー設定では、モーダルフォームをトリガーするためにラベルまたはアイコンのいずれかを表示するオプションがあります。
ショートコード検索フォームモーダル
ご希望の場合は、ショートコードを使用してモーダルフォームトリガーを出力できます。クリックすると検索フォームモーダルが表示されます。
[searchwp_modal_search_form]
トリガーとモーダル自体のさまざまな属性を制御する追加のカスタマイズを適用できます。たとえば：
[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="検索を開く" type="button"]
これは次のようにレンダリングされます：
利用可能なショートコード属性は次のとおりです：
engine 使用するSearchWPエンジンの名前（SearchWPがアクティブな場合にのみ適用されます）
template モーダルテンプレート名。 テンプレートドキュメントを参照してください。
text トリガーのテキストを制御します
type トリガータイプを定義します。リンク<a/>または<button/>のいずれかになります。
これらの属性を使用すると、使用中のトリガーとモーダルテンプレートの両方を完全にカスタマイズできます。
Gutenbergブロック検索フォームモーダル
SearchWPモーダル検索フォームは、必要に応じてGutenbergブロックを使用してモーダル検索フォームを挿入するオプションを提供します。
ブロックプロパティパネルを使用すると、ブロックのさまざまな属性をカスタマイズできます。これには以下が含まれます：
テキスト トリガーのテキストを制御します
エンジン 使用するSearchWPエンジンのname（SearchWPがアクティブな場合にのみ適用されます）
テンプレート モーダルテンプレート名。 テンプレートドキュメントを参照してください。
タイプ トリガータイプを定義します。リンク<a/>または<button/>のいずれかになります。
ブロックプロパティのいずれかを変更すると、トリガーがどのように見えるかをリアルタイムで確認できます。
プログラムによる検索フォームモーダル
次の構文を使用して、SearchWPモーダルフォームをテーマテンプレートに直接挿入するオプションがあります。
searchwp_modal_form_trigger()を呼び出す際に配列として渡すことができる引数がいくつかあります。
サイト全体に多数のSearchWPモーダル検索フォームを実装できます。それぞれに独自の構成引数（または同じものを共有）があります。
モーダルテンプレートのカスタマイズと作成
SearchWPモーダル検索フォームはテンプレートローダーを備えており、利用可能なテンプレートを簡単にカスタマイズ（および作成）できます。SearchWPモーダルフォームテンプレートは、トリガーではなく、モーダル自体のコンテンツとスタイルを包含します。
SearchWPモーダル検索フォームのトリガーは、アクティブなテーマからスタイルを継承し、カスタムCSSを追加することでカスタマイズできます。
重要：SearchWPモーダルフォームテンプレートをカスタマイズまたは作成する場合、（子）テーマ内にsearchwp-modal-formというタイトルのフォルダを作成する必要があります。このフォルダには、プラグインが更新されても上書きされないすべてのカスタムテンプレートが含まれます。
SearchWPモーダル検索フォームテンプレートはファイルベースであり、次のディレクトリをチェックして収集されます。
~/wp-content/plugins/searchwp-modal-form/templates/*.php（これらは編集しないでください。後続のプラグインアップデートで上書きされます！）~/wp-content/themes/your-child-theme/searchwp-modal-form/*.php（該当する場合）~/wp-content/themes/your-theme/searchwp-modal-form/*.php
SearchWPモーダルフォームテンプレートを含めるには、次のヘッダーコメントブロックが必要です。
/**
* SearchWP Modal Form Name: My Custom Template
*/
これはモーダルテンプレート名を定義します。これは、モーダルフォームトリガーを挿入する際に使用するテンプレートを定義する際に使用されます。作成するカスタムテンプレートには、簡単に識別できるように一意の名前を付けることをお勧めします。
モーダルテンプレートのカスタマイズまたは作成を開始する際には、デフォルトテンプレートを使用してください。参照用に完全に文書化されています。
フック
SearchWPモーダルフォームの動作をカスタマイズするために、次のフックが利用可能になりました。
searchwp_modal_form_template_dirカスタムテンプレートを格納するために使用されるフォルダ名をカスタマイズします（デフォルトはsearchwp-modal-form）。
| <?php | |
| add_filter( 'searchwp_modal_form_template_dir', function( $dir ) { | |
| return 'my-searchwp-modal-forms'; | |
| } ); |
開発者向けメモ
単一のコマンドに含まれるすべてのJavaScriptバンドルにはビルドプロセスがあります。
npm run watch
これにより、4つの同時プロセスが実行され、ファイル変更を監視し、 subsequently は以下を生成します。
- SearchWPモーダル検索フォームバンドルの本番バージョン
- SearchWPモーダル検索フォームバンドルの開発バージョン
- SearchWPモーダル検索フォームブロックの本番バージョン
- SearchWPモーダル検索フォームブロックの開発バージョン
必要に応じて、各プロセスを個別に実行することもできます。
