Intégration du formulaire de recherche modal et de la priorité d'archive de termes
L'extension Formulaire de recherche modal de SearchWP vous permet d'intégrer rapidement et facilement un formulaire de recherche modal sur votre site.
L'extension Priorité d'archive de termes de SearchWP vous permet d'inclure les liens d'archive de termes de taxonomie dans les résultats de recherche, le cas échéant.
Par défaut, la Priorité d'archive de termes n'est pas compatible avec le Moteur par défaut de SearchWP. C'est parce que le Moteur par défaut est conçu pour interagir directement avec la fonctionnalité de recherche native de WordPress lors de l'affichage des résultats de recherche. WordPress ne s'attend pas à des archives de termes de taxonomie dans les résultats de recherche.
En raison de cette limitation, un moteur SearchWP supplémentaire doit être utilisé lors de la configuration de la Priorité d'archive de termes.
De plus, un modèle personnalisé de formulaire de recherche modal doit également être utilisé. Le modèle par défaut de formulaire de recherche modal est configuré pour utiliser le Moteur par défaut, mais cela ne fonctionnera pas pour la raison expliquée ci-dessus.
Configuration
Nous commencerons par installer et activer SearchWP, le formulaire de recherche modal SearchWP et la priorité d'archive de termes SearchWP.
La prochaine étape consiste à créer et configurer un moteur supplémentaire.
Modèle de résultats du moteur supplémentaire
Ensuite, nous suivrons la documentation sur la configuration des résultats du moteur supplémentaire pour finaliser l'affichage de nos résultats de recherche.
La documentation pour la Priorité d'archive de termes contient un modèle de résultats supplémentaire fonctionnel que nous pouvons (et allons !) utiliser ici : https://searchwp.com/extensions/term-archive-priority/#gist105037258
Ce modèle de résultats peut être enregistré sous le nom de fichier template-my-searchwp-supplemental.php dans votre répertoire de thème. Cela le rendra disponible en tant que modèle de page.
Conformément à la documentation sur les résultats du moteur supplémentaire, nous allons créer une nouvelle page sur notre site en utilisant le modèle de page que nous venons de créer.
Notez que le Modèle que nous utilisons est celui que nous venons de créer. Notez également l'URL des résultats, que nous utiliserons dans les étapes suivantes.
Création d'un modèle de formulaire modal fonctionnel
Avec notre modèle de résultats du moteur supplémentaire en place et lié, la prochaine étape consiste à nous assurer que notre formulaire modal est configuré pour déclencher notre moteur supplémentaire et donc s'intégrer à la priorité d'archive de termes.
D'une manière similaire à la configuration du modèle de résultats du moteur supplémentaire, nous allons créer un modèle de formulaire modal basé sur le modèle de formulaire modal par défaut conformément à la documentation.
Cette étape est critique car elle mettra à jour le formulaire modal existant que nous utilisons pour rediriger les recherches vers le modèle de résultats du moteur supplémentaire que nous venons de créer.
En utilisant le modèle par défaut existant comme point de départ, nous allons modifier le balisage du formulaire de recherche pour soumettre le formulaire modal à notre page de résultats du moteur supplémentaire au lieu de déclencher une recherche WordPress native.
Nous devons également mettre à jour le name de notre champ de recherche pour qu'il corresponde à ce qu'attend le modèle de résultats du moteur supplémentaire, dans ce cas, nous l'avons nommé searchwp.
Voici le modèle complet du formulaire modal. Portez une attention particulière à :
- Ligne 11 qui pointe vers notre modèle de résultats du moteur supplémentaire
- Ligne 14 qui établit notre
named'entrée
| <?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> |
Le reste du modèle correspond au modèle par défaut et peut être personnalisé à votre guise.
Configuration du déclencheur du formulaire modal
Dans cette configuration, nous allons utiliser un élément de menu pour déclencher notre formulaire de recherche modal, en veillant à utiliser le moteur supplémentaire que nous venons de créer :
Nous avons maintenant notre déclencheur modal dans le menu de notre site :
Avec notre modèle de formulaire modal redirigeant vers notre page de résultats supplémentaires, qui à son tour a été personnalisée pour intégrer les résultats de la priorité d'archive de termes, nous avons maintenant un flux de travail qui permet à un formulaire modal de s'intégrer à la priorité d'archive de termes ! ?
