Integration von Modal-Suchformular und Term-Archiv-Priorit\"at
Die Modal Search Form Extension von SearchWP ermöglicht es Ihnen, schnell und einfach ein modales Suchformular auf Ihrer Website zu integrieren.
Die Term Archive Priority Extension von SearchWP ermöglicht es Ihnen, Taxonomie-Term-Archiv-Links in Suchergebnissen einzuschließen, wenn dies zutrifft.
Standardmäßig ist Term Archive Priority nicht mit der Standard-Engine von SearchWP kompatibel. Das liegt daran, dass die Standard-Engine direkt mit der nativen Suchfunktionalität von WordPress interagieren soll, wenn Suchergebnisse angezeigt werden. WordPress erwartet keine Taxonomie-Term-Archive in Suchergebnissen.
Aufgrund dieser Einschränkung muss eine ergänzende SearchWP-Engine verwendet werden, wenn Term Archive Priority eingerichtet wird.
Zusätzlich muss auch eine benutzerdefinierte Modal Search Form Vorlage verwendet werden. Die Standardvorlage für das modale Suchformular ist so eingerichtet, dass sie die Standard-Engine verwendet, aber das funktioniert aus dem oben genannten Grund nicht.
Einrichtung
Wir beginnen mit der Installation und Aktivierung von SearchWP, SearchWP Modal Search Form und SearchWP Term Archive Priority.
Der nächste Schritt ist die Erstellung und Konfiguration einer ergänzenden Engine.
Ergebnisvorlage der ergänzenden Engine
Als Nächstes folgen wir der Dokumentation zur Einrichtung von ergänzenden Engine-Ergebnissen, um die Anzeige unserer Suchergebnisse zu finalisieren.
Die Dokumentation für Term Archive Priority enthält eine funktionierende Vorlage für ergänzende Ergebnisse, die wir hier verwenden können (und werden!): https://searchwp.com/extensions/term-archive-priority/#gist105037258
Diese Ergebnisvorlage kann als Datei namens template-my-searchwp-supplemental.php in Ihrem Theme-Verzeichnis gespeichert werden. Dadurch wird sie als Seiten-Vorlage verfügbar.
Gemäß der Dokumentation für ergänzende Engine-Ergebnisse erstellen wir eine neue Seite auf unserer Website mit der gerade erstellten Seiten-Vorlage.
Beachten Sie, dass die verwendete Vorlage diejenige ist, die wir gerade erstellt haben. Beachten Sie auch die Ergebnis-URL, die wir in den nächsten Schritten verwenden werden.
Erstellung einer funktionierenden Modal-Formular-Vorlage
Nachdem unsere Ergebnisvorlage für die ergänzende Engine eingerichtet und verknüpft ist, besteht der nächste Schritt darin, sicherzustellen, dass unser modales Formular so eingerichtet ist, dass es unsere ergänzende Engine auslöst und somit mit Term Archive Priority integriert wird.
Ähnlich wie bei der Einrichtung der Ergebnisvorlage für die ergänzende Engine erstellen wir eine Vorlage für das modale Formular, basierend auf der Standardvorlage für das modale Formular gemäß der Dokumentation.
Dieser Schritt ist entscheidend, da er das bestehende modale Formular, das wir verwenden, aktualisiert, um Suchen stattdessen an die gerade erstellte Ergebnisvorlage der ergänzenden Engine weiterzuleiten.
Ausgehend von der bestehenden Standardvorlage bearbeiten wir das Markup des Suchformulars, um das modale Formular an die Ergebnis-Seite unserer ergänzenden Engine zu übermitteln, anstatt eine native WordPress-Suche auszulösen.
Wir müssen auch den Namen unseres Suchfelds aktualisieren, damit er mit dem übereinstimmt, was die Vorlage für die Ergebnisse der ergänzenden Engine erwartet. In diesem Fall haben wir ihn searchwp genannt.
Hier ist die vollständige Vorlage für das modale Formular. Achten Sie besonders auf:
- Zeile 11, die auf unsere Vorlage für die Ergebnisse der ergänzenden Engine verweist
- Zeile 14, die unseren Eingabe-
Namenfestlegt
| <?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> |
Der Rest der Vorlage entspricht der Standardvorlage und kann beliebig angepasst werden.
Einrichtung des Auslösers für das modale Formular
In dieser Einrichtung verwenden wir einen Menüpunkt, um unser modales Suchformular auszulösen, und stellen sicher, dass wir die gerade erstellte ergänzende Engine verwenden:
Wir haben jetzt unseren Modalauslöser im Menü auf unserer Website:
Mit unserer Vorlage für modale Formulare, die auf unsere Seite mit den Ergebnissen der ergänzenden Engine weiterleitet, welche wiederum angepasst wurde, um Ergebnisse der Term Archive Priority zu integrieren, haben wir jetzt einen Workflow, der es einem modalen Formular ermöglicht, sich in Term Archive Priority zu integrieren! ?
