Modal-Suchformular
Modal-Suchformular benötigt kein SearchWP, nutzt es aber, falls verfügbar
Die Erweiterung Search Model Form ermöglicht es Ihnen, ein Suchformular in einem modalen (Popup-)Fenster anzuzeigen, das durch einen Button oder ein Icon auf Ihrer Website ausgelöst wird. Dies bietet den Benutzern ein schlankes, ablenkungsfreies Sucherlebnis.
Entwickelt für die Integration mit jedem Theme und jeder SearchWP-Konfiguration, ist Modal Form der einfachste Weg, ein gut aussehendes Suchformular zu Ihrer Website hinzuzufügen.
Modal-Suchformular benötigt kein SearchWP, ist also auf wordpress.org verfügbar und funktioniert mit jeder WordPress-Website. Wenn Sie SearchWP installiert und aktiviert haben, wird Modal Form es automatisch nutzen. Wenn nicht, werden native WordPress-Suchergebnisse bereitgestellt.
Wenn die Erweiterung aktiv ist, können Sie die Einstellungen für Model Form unter dem Tab Search Forms > Search Model aufrufen.
1. Model Form aktivieren
Ein Schalter zum Aktivieren oder Deaktivieren der SearchWP-Modalformular-Funktionalität auf Ihrer Website.
2. Suchformular
Diese Option ermöglicht es Ihnen, auszuwählen, welches Suchformular im Modal-Popup angezeigt werden soll. Sie können ein angepasstes SearchWP Form aus der Dropdown-Liste auswählen, das im Popup angezeigt werden soll. Wenn kein benutzerdefiniertes Formular ausgewählt ist, wird das Standard-WordPress-Suchformular verwendet.
Hinweis: Wenn Sie eine benutzerdefinierte Engine in Ihrem Modal-Shortcode oder Menüpunkt auswählen, überschreibt dies die in den Suchformular-Einstellungen ausgewählte Engine.
3. Styling einschließen
Das Modalformular lädt bestimmte CSS, um benutzerdefiniertes Styling für das Laden des Popups einzuschließen. Durch die Auswahl der entsprechenden Option können Sie Positionierungs- oder visuelle Stile für das Popup laden. Bitte beachten Sie, dass, wenn Sie die Option Kein Styling wählen, keine Modalformular-CSS geladen wird. Sie müssen Ihr eigenes Styling anwenden. Diese Option wird nur erfahrenen Benutzern empfohlen.
4. Vollbildmodus
Standardmäßig wird das Modal-Popup in einem Container mit fester Breite geladen. Wenn der Vollbildmodus aktiviert ist, erweitert sich das Modalformular, um die gesamte Bildschirmbreite und -höhe einzunehmen.
5. Hintergrund-Scrollen deaktivieren
Die Aktivierung dieser Option deaktiviert die Scroll-Funktionalität im Hintergrund, wenn das Modal-Popup geöffnet ist. Dies verhindert, dass Benutzer mit den Seiteninhalten hinter dem Modal interagieren.
Was macht es anders?
Die Philosophie hinter SearchWP Modal Search Form ist es, die Implementierung von zugänglichen und leichten modalen Suchformularen zu erleichtern, aber vielleicht noch wichtiger ist es, eine großartige Entwickler- (und Benutzer-)Erfahrung zu schaffen.
SearchWP Modal Search Form integriert sich direkt in WordPress, so wie Sie es verwenden, und das Standard-Modalformular-Theme baut auf den Stilen Ihres aktiven Themes auf, wodurch der Overhead so gering wie möglich gehalten wird. Es gibt auch einen vollständigen Template-Loader, der es Ihnen ermöglicht, Ihr SearchWP Modal Search Form mit minimalem Aufwand vollständig anzupassen.
Sehen Sie sich das Standard-Template als Beispiel an, wie einfach die Anpassung ist.
Nutzung
SearchWP Modal Search Form macht es einfach, modale Suchformulare überall auf Ihrer WordPress-Website zu implementieren. Um ein Modal zu implementieren, benötigen Sie sowohl (1) einen Auslöser als auch (2) das Modal selbst.
Mit diesem Plugin ist die Implementierung beider Teile extrem einfach! Die folgenden Methoden sind integriert und stehen Ihnen zur Verfügung:
- Als Menüpunkt
- Mit einem Shortcode
- Als Gutenberg-Block
- Innerhalb Ihrer Vorlage(n) programmatisch (Code)
Sie können beliebig viele Suchformular-Modals zu Ihrer Website hinzufügen, wobei jedes seine eigenen Vorlagen- und Konfigurationsoptionen verwendet (z. B. SearchWP-Engine).
Menüpunkt Suchformular-Modal
Das Hinzufügen eines Suchformulars zur Hauptnavigation Ihrer Website ist eine großartige Idee, und SearchWP Modal Search Form macht es einfach, es in nur einem Moment hinzuzufügen.
Das Plugin fügt eine neue Gruppe hinzu, die Ihnen beim Bearbeiten Ihrer vorhandenen Menüs zur Verfügung steht. Wenn Sie eine benutzerdefinierte Modal-Vorlage in Ihrem Theme erstellt haben, wird diese unter dieser Gruppe angezeigt.
Sobald sie hinzugefügt sind, können Sie SearchWP Modal Search Form Menüpunkte wie jeden anderen Menüpunkt behandeln, einschließlich zusätzlicher Anpassungen, die Sie möglicherweise vornehmen möchten.
In den Menüeinstellungen haben Sie die Möglichkeit, entweder eine Beschriftung oder ein Symbol anzuzeigen, um das Modal-Formular auszulösen.
Shortcode Suchformular-Modal
Wenn Sie möchten, können Sie einen Shortcode verwenden, um einen Modal-Formular-Auslöser auszugeben, der beim Klicken Ihr Suchformular-Modal anzeigt.
[searchwp_modal_search_form]
Sie können zusätzliche Anpassungen anwenden, die verschiedene Attribute des Auslösers und des Modals selbst steuern, zum Beispiel:
[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="Open Search" type="button"]
Was wie folgt gerendert wird:
Die verfügbaren Shortcode-Attribute sind wie folgt:
engine Der name der zu verwendenden SearchWP-Engine (gilt nur, wenn SearchWP aktiv ist)
template Der Name der Modal-Vorlage, siehe die Vorlagendokumentation
text Steuert den Text des Auslösers
type Definiert den Auslösertyp, der entweder ein Link <a/> oder ein <button/> sein kann
Mit diesen Attributen können Sie sowohl den Auslöser als auch die verwendete Modal-Vorlage vollständig anpassen.
Gutenberg-Block Suchformular-Modal
SearchWP Modal Search Form bietet Ihnen die Möglichkeit, ein modales Suchformular mit einem Gutenberg-Block einzufügen, wenn Sie möchten:
Über das Bedienfeld für Blockeigenschaften können Sie verschiedene Attribute des Blocks anpassen, darunter:
Text Steuert den Text des Auslösers
Engine Der name der zu verwendenden SearchWP-Engine (gilt nur, wenn SearchWP aktiv ist)
Template Der Name der Modal-Vorlage. Bitte siehe die Vorlagen-Dokumentation
Typ Definiert den Trigger-Typ, der entweder ein Link <a/> oder ein <button/> sein kann
Durch Ändern einer der Blockeigenschaften können Sie in Echtzeit sehen, wie der Trigger aussehen wird.
Programmatisches Modal-Formular für die Suche
Sie haben die Möglichkeit, ein SearchWP Modal Formular direkt in Ihre Theme-Vorlagen einzufügen, wo immer Sie möchten, mit der folgenden Syntax:
Es gibt eine Reihe von Argumenten, die als Array übergeben werden können, wenn searchwp_modal_form_trigger() aufgerufen wird:
Sie können beliebig viele SearchWP Modal Suchformulare auf Ihrer Website implementieren, jedes mit seinen eigenen Konfigurationsargumenten (oder mit denselben!)
Anpassen und Erstellen von Modal-Vorlagen
SearchWP Modal Search Form wird mit einem Vorlagenlader geliefert, mit dem Sie die verfügbaren Vorlagen einfach anpassen (und erstellen) können. SearchWP Modal Form Vorlagen umfassen den Inhalt und Stil des Modals selbst, nicht den Trigger.
SearchWP Modal Search Form Trigger übernehmen Stile von Ihrem aktiven Theme und können durch Hinzufügen von benutzerdefiniertem CSS angepasst werden.
Wichtig: Wenn Sie SearchWP Modal Form Vorlagen anpassen oder erstellen, sollten Sie einen Ordner in Ihrem (Child-)Theme mit dem Titel searchwp-modal-form erstellen, der alle Ihre benutzerdefinierten Vorlagen enthält, die bei einem Update des Plugins nicht überschrieben werden.
SearchWP Modal Search Form Vorlagen basieren auf Dateien und werden durch Überprüfung der folgenden Verzeichnisse gesammelt:
~/wp-content/plugins/searchwp-modal-form/templates/*.php(nicht bearbeiten, diese werden bei nachfolgenden Plugin-Updates überschrieben!)~/wp-content/themes/your-child-theme/searchwp-modal-form/*.php(falls zutreffend)~/wp-content/themes/your-theme/searchwp-modal-form/*.php
Damit eine SearchWP Modal Form Vorlage einbezogen wird, muss sie den folgenden Header-Kommentarblock enthalten:
/**
* SearchWP Modal Form Name: My Custom Template
*/
Dies definiert den Namen der Modal-Vorlage, der bei der Angabe der zu verwendenden Vorlage beim Einfügen eines Modal-Formular-Triggers verwendet wird. Es wird empfohlen, dass alle von Ihnen erstellten benutzerdefinierten Vorlagen einen eindeutigen Namen haben, um leicht identifizierbar zu sein.
Sie sollten die Standardvorlage als Ausgangspunkt für die Anpassung oder Erstellung von Modal-Vorlagen verwenden. Sie ist zu Ihrer Information vollständig dokumentiert.
Hooks
Die folgenden Hooks wurden Ihnen zur Verfügung gestellt, um das Verhalten von SearchWP Modal Form anzupassen:
searchwp_modal_form_template_dir Passen Sie den Ordnernamen an, der zum Speichern Ihrer benutzerdefinierten Vorlagen verwendet wird (Standard ist searchwp-modal-form)
| <?php | |
| add_filter( 'searchwp_modal_form_template_dir', function( $dir ) { | |
| return 'my-searchwp-modal-forms'; | |
| } ); |
Entwicklerhinweise
Es gibt einen Build-Prozess für alle JavaScript-Bundles, der mit einem einzigen Befehl ausgeführt wird:
npm run watch
Dies führt vier gleichzeitige Prozesse aus, die auf Dateiänderungen warten und anschließend Folgendes generieren:
- Produktionsversion des SearchWP Modal Search Form-Bundles
- Entwicklungsversion des SearchWP Modal Search Form-Bundles
- Produktionsversion des SearchWP Modal Search Form-Blocks
- Entwicklungsversion des SearchWP Modal Search Form-Blocks
Sie können jeden Prozess einzeln ausführen, wenn Sie dies bevorzugen:
