Mit SearchWP Modal Search Form kannst du ganz einfach ein leicht zugängliches, schlankes Suchformular als Modal in deine WordPress-Website integrieren! SearchWP Modal Search Form benötigt SearchWP nicht. Aber es verwendet SearchWP, sofern es installiert und aktiviert ist! 👍
Neben den Informationen, die in dieser README zur Verfügung gestellt werden, ist auch eine vollständige Dokumentation verfügbar.
Was unterscheidet es von anderen Modals?
Die Philosophie hinter SearchWP Modal Search Form besteht darin, leicht zugängliche und schlanke Suchformulare als Modal zu implementieren und – was vielleicht noch wichtiger ist – sie zu einem großartigen Erlebnis für Entwickler (und Benutzer) zu machen.
SearchWP Modal Search Form ist direkt in WordPress integriert. Das Standard-Theme für das modale Formular baut auf den Styles deines aktiven Themes auf, um den Verbrauch von Serverressourcen so gering wie möglich zu halten. Außerdem ist ein vollständiger Template-Loader integriert, dank dem du dein SearchWP Modal Search Form mit minimalem Aufwand vollständig anpassen kannst.
Sieh dir das Standard-Template als Beispiel dafür an, wie einfach die Anpassung ist 🤓
Hinzufügen von modalen Formularen zu deiner Website
SearchWP Modal Search Form macht es dir leicht, Suchformulare als Modal überall auf deiner WordPress-Website zu implementieren. Die folgenden Methoden sind bereits integriert und stehen dir zur Verfügung:
- Als Menüpunkt
- Mithilfe eines Shortcodes
- Als Gutenberg-Block
- Innerhalb deines oder deiner Templates programmatisch
Template-Anpassung
SearchWP Modal Search Form integriert einen eigenen Template-Loader für die Anzeige von Suchformularen in einer beliebigen Anzahl von Templates. So kannst du das Aussehen des Modals je Template vollständig anpassen.
Die einfachste Möglichkeit, ein individuelles Template zu erstellen, funktioniert so:
- Erstelle einen Ordner namens
searchwp-modal-formin deinem Theme - Erstelle in diesem Ordner eine Datei namens
template.php(oder mit einem anderen Namen, der die Endung.phphat) - Kopiere den Inhalt des Standard-Templates in diese Datei
- Passe den
Namen des SearchWP Modal Formim Header-Kommentarblock an - Nimm alle weiteren von dir gewünschten Anpassungen am Markup/Stil vor und beachte dabei die Dokumentation
Es gibt (jQuery-)Ereignisse, die ausgelöst werden, wenn Modals geöffnet und geschlossen werden. jQuery ist keine Abhängigkeit, aber wenn jQuery geladen ist, werden die Ereignisse ausgelöst.
// 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!');
});
Weitere Informationen findest du in der vollständigen Dokumentation zum Template.