SearchWP Modal Search Form を使用すれば、アクセスしやすく軽量なモーダル検索フォームを WordPress サイトに簡単に統合できます ! SearchWP Modal Search Form では SearchWP は必須ではありませんが、SearchWP がインストールされ、有効化されている場合には利用します ! 👍
この README に記載されている情報に加え、詳しいドキュメンテーションもご利用いただけます。
他のモーダルとの違い
SearchWP Modal Search Form は、アクセスしやすく軽量なモーダル検索フォームを簡単に実装できるようにする、という理念に支えられています。そして、優れた開発者 (およびユーザー) エクスペリエンスの実現も重視しています。
SearchWP Modal Search は WordPress と直接統合されます。デフォルトのモーダルフォームテーマは、有効なテーマで設定されたスタイルを基に作成されるため、オーバーヘッド を最小限に抑えられます。また、万能なテンプレートローダーも組み込まれているため、SearchWP Modal Search Form を最小限の手間で「完全にカスタマイズ」することができます。
カスタマイズの簡単さを示す例として、デフォルトのテンプレートを確認してみてください 🤓
サイトにモーダルフォームを追加
SearchWP Modal Search Form を使用すると、WordPress サイトのあらゆる場所にモーダル検索フォームを簡単に実装できます。組み込み済みの次の方法をご利用いただけます。
- メニュー項目として追加
- ショートコードを使用して追加
- Gutenberg ブロックとして追加
- プログラムでテンプレート内に追加
テンプレートのカスタマイズ
SearchWP Modal Search Form には、あらゆるテンプレートに検索フォームを表示する固有のテンプレートローダーがあり、テンプレートごとにモーダルの外観を「完全にカスタマイズ」することができます。
カスタムテンプレートは、次の方法で最も簡単に作成できます。
- テーマ内に
searchwp-modal-formという名前のフォルダーを作成します - そのフォルダー内に
template.phpという名前 (または末尾が.phpの任意の名前) のファイルを作成します - デフォルトテンプレートの内容をそのファイルにコピーします
- ヘッダーコメントブロックで
SearchWP Modal Form Nameの値をカスタマイズします - ドキュメンテーションを参照しながら、マークアップやスタイルを好みに応じてカスタマイズします
モーダルの開閉時に (jQuery) イベントが発生する場合があります。jQuery は「依存関係はありません」が、jQuery が読み込まれている場合にはイベントが発生します。
// Add a callback when a modal is opened:
jQuery('body').on('searchwpModalOnShow', function(e) {
// Focus an input in the template.
e.el.find('input').focus();
});
// Add a callback when a modal is closed:
jQuery('body').on('searchwpModalOnClose', function(e) {
alert('Modal closed!');
});
詳細については、テンプレートの詳しいドキュメンテーションをご覧ください。