モーダル検索フォームとタームアーカイブの優先順位の統合
SearchWP の モーダル検索フォーム拡張機能 を使用すると、サイトにモーダル検索フォームをすばやく簡単に追加できます。
SearchWP の タームアーカイブ優先度拡張機能 を使用すると、該当する場合に検索結果にタクソノミータームアーカイブリンクを含めることができます。
デフォルトでは、タームアーカイブ優先度は SearchWP のデフォルトエンジンと互換性がありません。これは、デフォルトエンジンが検索結果を表示する際に WordPress のネイティブ検索機能と直接やり取りするように設計されているためです。WordPress は検索結果にタクソノミータームアーカイブを含めることを想定していません。
その制限のため、タームアーカイブ優先度を設定する際には 補足的な SearchWP エンジン を使用する必要があります。
さらに、カスタムのモーダル検索フォームテンプレートも使用する必要があります。デフォルトのモーダル検索フォームテンプレートはデフォルトエンジンを利用するように設定されていますが、上記の理由により機能しません。
セットアップ
まず、SearchWP、SearchWP モーダル検索フォーム、および SearchWP タームアーカイブ優先度をインストールして有効化します。
次のステップは、補足的なエンジン を作成して設定することです。
補足的なエンジン結果テンプレート
次に、補足的なエンジン結果設定のドキュメント に従って、検索結果の表示を完了します。
タームアーカイブ優先度のドキュメントには、ここで使用できる（そして使用する！）動作する補足的な結果テンプレートがあります: https://searchwp.com/extensions/term-archive-priority/#gist105037258
その結果テンプレートは、テーマディレクトリに template-my-searchwp-supplemental.php という名前のファイルとして保存できます。これにより、ページテンプレートとして利用できるようになります。
補足的なエンジン結果のドキュメントに従って、作成したばかりのページテンプレートを使用してサイトに新しいページを作成します。
使用している テンプレート は、作成したばかりのものであることに注意してください。また、次のステップで使用する結果 URL にも注意してください。
動作するモーダルフォームテンプレートの作成
補足的なエンジン結果テンプレートを配置してリンクしたら、次のステップは、モーダルフォームが補足的なエンジンをトリガーするように設定し、それによってタームアーカイブ優先度と統合するようにすることです。
補足的なエンジン結果テンプレートの設定と同様に、ドキュメントに従って、デフォルトのモーダルフォームテンプレートに基づいたモーダルフォームテンプレートを作成します。
このステップは非常に重要です。なぜなら、既存のモーダルフォームを更新して、作成したばかりの補足的なエンジン結果テンプレートにリダイレクトするようにするためです。
既存のデフォルトテンプレートを出発点として、ネイティブ WordPress 検索をトリガーする代わりに、モーダルフォームを補足的なエンジン結果ページに送信するように検索フォームのマークアップを編集します。
searchwpという名前に一致させる必要があります。これは、Supplemental Engineの結果テンプレートが期待するものと一致させるためです。
ここに完全なモーダルフォームテンプレートがあります。特に注意してください：
- 11行目：Supplemental Engineの結果テンプレートを指しています
- 14行目：入力
nameを設定しています
| <?php | |
| /** | |
| * SearchWP Modal Form Name: Term Archive | |
| */ | |
| // @link https://searchwp.com/documentation/knowledge-base/integrating-modal-search-form-and-term-archive-priority/ | |
| ?> | |
| <div class="searchwp-modal-form-default"> | |
| <div class="searchwp-modal-form__overlay" tabindex="-1" data-searchwp-modal-form-close> | |
| <div class="searchwp-modal-form__container" role="dialog" aria-modal="true"> | |
| <main class="searchwp-modal-form__content"> | |
| <form role="search" method="get" class="search-form" action="/search-results/"> | |
| <label> | |
| <span class="screen-reader-text">Search for:</span> | |
| <input name="searchwp" type="search" class="search-field" placeholder="Search..." value=""> | |
| </label> | |
| <input type="submit" class="search-submit screen-reader-text" value="Search"> | |
| </form> | |
| </main> | |
| <footer class="searchwp-modal-form__footer"> | |
| <button class="searchwp-modal-form__close button" aria-label="Close" data-searchwp-modal-form-close></button> | |
| </footer> | |
| </div> | |
| </div> | |
| </div> | |
| <style type="text/css"> | |
| .searchwp-modal-form-default .searchwp-modal-form__overlay { | |
| background: rgba(45, 45, 45 ,0.6); | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999990; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__container { | |
| width: 100%; | |
| max-width: 500px; | |
| max-height: 100vh; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__content { | |
| background-color: #fff; | |
| padding: 2em; | |
| border-radius: 2px; | |
| overflow-y: auto; | |
| box-sizing: border-box; | |
| position: relative; | |
| z-index: 9999998; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__content .search-form { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__content .search-form label { | |
| flex: 1; | |
| padding-right: 0.75em; /* This may cause issues depending on your theme styles. */ | |
| /* Some common resets */ | |
| float: none; | |
| margin: 0; | |
| width: auto; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__content .search-form label input { | |
| display: block; | |
| width: 100%; | |
| margin-left: 0.75em; | |
| /* Some common resets */ | |
| float: none; | |
| margin: 0; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__footer { | |
| padding-top: 1em; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__close { | |
| line-height: 1; | |
| display: block; | |
| margin: 0 auto; | |
| background: transparent; | |
| border: 0; | |
| padding: 0.4em 0.5em; | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__close:before { | |
| content: "\00d7"; | |
| font-size: 2em; | |
| } | |
| @keyframes searchwpModalFadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes searchwpModalFadeOut { | |
| from { opacity: 1; } | |
| to { opacity: 0; } | |
| } | |
| @keyframes searchwpModalSlideIn { | |
| from { transform: translateY(15%); } | |
| to { transform: translateY(0); } | |
| } | |
| @keyframes searchwpModalSlideOut { | |
| from { transform: translateY(0); } | |
| to { transform: translateY(-10%); } | |
| } | |
| .searchwp-modal-form { | |
| display: none; | |
| } | |
| .searchwp-modal-form.is-open { | |
| display: block; | |
| } | |
| .searchwp-modal-form[aria-hidden="false"] .searchwp-modal-form-default .searchwp-modal-form__overlay { | |
| animation: searchwpModalFadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1); | |
| } | |
| .searchwp-modal-form[aria-hidden="false"] .searchwp-modal-form-default .searchwp-modal-form__container { | |
| animation: searchwpModalSlideIn .3s cubic-bezier(0, 0, .2, 1); | |
| } | |
| .searchwp-modal-form[aria-hidden="true"] .searchwp-modal-form-default .searchwp-modal-form__overlay { | |
| animation: searchwpModalFadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1); | |
| } | |
| .searchwp-modal-form[aria-hidden="true"] .searchwp-modal-form-default .searchwp-modal-form__container { | |
| animation: searchwpModalSlideOut .3s cubic-bezier(0, 0, .2, 1); | |
| } | |
| .searchwp-modal-form-default .searchwp-modal-form__container, | |
| .searchwp-modal-form-default .searchwp-modal-form__overlay { | |
| will-change: transform; | |
| } | |
| </style> |
テンプレートの残りはデフォルトテンプレートと一致しており、お好みに合わせてカスタマイズできます。
モーダルフォームトリガーの設定
このセットアップでは、メニュー項目を使用してモーダル検索フォームをトリガーし、作成したばかりのSupplemental Engineを使用します。
これで、サイトのメニューにモーダルトリガーが表示されました：
モーダルフォームテンプレートがSupplemental Results Pageにリダイレクトされ、それがTerm Archive Priorityの結果を統合するようにカスタマイズされたため、モーダルフォームがTerm Archive Priorityと統合できるワークフローができました！ ?
