Integrazione del Modulo di Ricerca Modale e Priorità Archivio Termini
L'estensione Modal Search Form di SearchWP ti consente di integrare rapidamente e facilmente un modulo di ricerca modale sul tuo sito.
L'estensione Term Archive Priority di SearchWP ti consente di includere i link degli archivi dei termini della tassonomia nei risultati di ricerca, ove applicabile.
Per impostazione predefinita, Term Archive Priority non è compatibile con il Motore Predefinito di SearchWP. Questo perché il Motore Predefinito è destinato a interagire direttamente con la funzionalità di ricerca nativa di WordPress durante la visualizzazione dei risultati di ricerca. WordPress non si aspetta archivi di termini di tassonomia nei risultati di ricerca.
A causa di questa limitazione, è necessario utilizzare un Motore SearchWP Supplementare quando si configura Term Archive Priority.
Inoltre, è necessario utilizzare anche un Modello Modulo di Ricerca Modale personalizzato. Il modello predefinito del Modulo di Ricerca Modale è configurato per utilizzare il Motore Predefinito, ma ciò non funzionerà per il motivo sopra indicato.
Configurazione
Inizieremo installando e attivando SearchWP, SearchWP Modal Search Form e SearchWP Term Archive Priority.
Il passo successivo è creare e configurare un Motore Supplementare.
Modello risultati Motore Supplementare
Successivamente seguiremo la documentazione sulla configurazione dei risultati del Motore Supplementare per finalizzare la visualizzazione dei nostri risultati di ricerca.
La documentazione per Term Archive Priority ha un modello di risultati supplementare funzionante che possiamo (e useremo!) qui: https://searchwp.com/extensions/term-archive-priority/#gist105037258
Quel modello di risultati può essere salvato come file chiamato template-my-searchwp-supplemental.php nella directory del tuo tema. In questo modo sarà disponibile come Modello di Pagina.
Come da documentazione dei risultati del Motore Supplementare, creeremo una nuova Pagina sul nostro sito utilizzando il Modello di Pagina che abbiamo appena creato.
Nota che il Modello che stiamo utilizzando è quello che abbiamo appena creato. Nota anche l'URL dei risultati, che utilizzeremo nei prossimi passaggi.
Creazione di un modello Modulo Modale funzionante
Con il nostro modello di risultati del Motore Supplementare in atto e collegato, il passo successivo è assicurarci che il nostro Modulo Modale sia configurato per attivare il nostro Motore Supplementare e quindi Integrarsi con Term Archive Priority.
In modo simile alla configurazione del modello di risultati del Motore Supplementare, creeremo un modello di Modulo Modale basato sul modello predefinito di Modulo Modale come da documentazione.
Questo passaggio è critico perché aggiornerà il modulo modale esistente che stiamo utilizzando per reindirizzare invece le ricerche al modello di risultati del Motore Supplementare che abbiamo appena creato.
Utilizzando il modello predefinito esistente come punto di partenza, modificheremo il markup del modulo di ricerca per inviare il modulo modale alla nostra pagina dei risultati del Motore Supplementare invece di attivare una ricerca nativa di WordPress.
Dobbiamo anche aggiornare il name del nostro campo di ricerca per farlo corrispondere a quanto previsto dal template dei risultati del Supplemental Engine, in questo caso lo abbiamo chiamato searchwp.
Ecco il template completo del Modale Form. Presta particolare attenzione a:
- Riga 11 che punta al nostro template dei risultati del Supplemental Engine
- Riga 14 che stabilisce il nostro
namedi input
| <?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> |
Il resto del template corrisponde al template predefinito e può essere personalizzato a tuo piacimento.
Impostazione del trigger del Modale Form
In questa configurazione utilizzeremo una Voci di Menu per attivare il nostro Modale Search Form, assicurandoci di utilizzare il Supplemental Engine che abbiamo appena creato:
Ora abbiamo il nostro trigger Modale nel Menu del nostro sito:
Con il nostro template Modale Form che reindirizza alla nostra Pagina dei Risultati Supplementare, che a sua volta è stata personalizzata per integrare i risultati di Term Archive Priority, abbiamo ora un flusso di lavoro che consente a un Modale Form di integrarsi con Term Archive Priority! ?
