Live-Suche
Live Search erfordert SearchWP nicht, nutzt es aber, falls verfügbar.
Live Search ist eine leistungsstarke Funktion von SearchWP, die Echtzeit-Suchergebnisse über AJAX in einem Dropdown-Container anzeigt, während Benutzer Schlüsselwörter in ein Suchformular eingeben. Es verbessert die Benutzererfahrung, indem es sofortiges Feedback liefert und Besuchern hilft, schnell die gesuchten Inhalte zu finden.
Live Search benötigt SearchWP nicht und ist daher auf wordpress.org verfügbar. Wenn Sie SearchWP installiert und aktiviert haben, wird Live Search es automatisch nutzen. Wenn nicht, werden native WordPress-Suchergebnisse bereitgestellt.
Sie können konfigurieren und anpassen, wie Live-Suchergebnisse angezeigt werden, indem Sie zu: SearchWP → Suchformulare → Live Search im WordPress-Backend navigieren.
Es gibt eine Reihe von Optionen, um das Design, das Layout und das Verhalten der Live-Suchergebnisse zu steuern. Nachfolgend finden Sie eine detaillierte Erklärung der verfügbaren Anpassungsoptionen:
1. Allgemein
Live Search aktivieren: Sobald die Live Search-Erweiterung installiert und aktiv ist, integriert sich die Live-Suche von SearchWP automatisch mit dem Standard-WordPress-Suchformular und den SearchWP-Formularen. Sie können diese Umschaltoption verwenden, um diese Funktionalität zu aktivieren oder zu deaktivieren.
2. Layout-Thema auswählen
Dieser Abschnitt ermöglicht es Ihnen, auszuwählen, wie Ihre Live-Suchergebnisse im Dropdown-Panel unter dem Suchformular gestaltet werden. Jedes Layout-Thema bietet ein anderes Detailniveau und eine andere visuelle Darstellung.
Verfügbare Layout-Themes:
- Minimal Eine saubere und einfache Liste, die nur die Titel der Beiträge anzeigt. Ideal für Websites, die eine schnelle, textbasierte Sucherfahrung bevorzugen.
- Mittel Zeigt sowohl den Titel als auch eine kurze Beschreibung für jedes Suchergebnis an. Diese Option bietet den Benutzern mehr Kontext, ohne sie zu überfordern.
- Reichhaltig Ein visuell ansprechendes Layout, das ein Miniaturbild zur Anzeige des Beitragsbildes zusammen mit dem Titel und der Beschreibung jedes Ergebnisses enthält. Perfekt für inhaltsreiche Websites wie Blogs oder E-Commerce-Shops.
- Benutzerdefiniert Dieses Layout bietet volle Flexibilität. Sie können ein benutzerdefiniertes Ergebnisformat entwerfen, indem Sie verschiedene Elemente mithilfe des unten beschriebenen Abschnitts „Benutzerdefinierte Stile“ kombinieren.
3. Benutzerdefinierte Stile
Der Abschnitt „Benutzerdefinierte Stile“ ermöglicht es Ihnen, einzelne Komponenten jedes Live-Suchergebnisses fein abzustimmen.
Beschreibung: Eine Umschaltoption, mit der Sie die Beschreibung unter dem Ergebnis-Titel ein- oder ausblenden können. Aktivieren Sie diese Option, wenn Sie den Benutzern mehr Informationen zu jedem Ergebnis geben möchten.
Tipp: Sie können die Option Begriffe hervorheben in den SearchWP-Einstellungen aktivieren, um eine benutzerdefinierte Beschreibung zu generieren, die den Suchbegriff für jedes Ergebnis enthält.
Bild: Steuern Sie die Bildgröße, die in den Ergebnissen angezeigt wird. Verfügbare Optionen sind: klein, mittel oder groß.
Titel: Passen Sie die Textfarbe und Schriftgröße des Titels an, um sie an das Design Ihrer Website anzupassen und die Lesbarkeit zu verbessern.
Preis: Diese Option wird nur sichtbar, wenn ein E-Commerce-Plugin wie WooCommerce oder Easy Digital Downloads aktiv ist. Sie können die Farbe und Schriftgröße des Produktpreises, der in den Ergebnissen angezeigt wird, anpassen.
In den Warenkorb: Ebenfalls nur mit einem aktiven E-Commerce-Plugin verfügbar, fügt diese Einstellung jedem Produktergebnis eine Schaltfläche „In den Warenkorb“ hinzu. Sie können das Styling, wie z. B. die Hintergrundfarbe, die Schriftfarbe und die Schriftgröße der Schaltfläche, anpassen. Diese Option ist perfekt für Shops, die den Kaufprozess direkt aus dem Live-Such-Dropdown optimieren möchten.
4. Ergebnisse
Styling einschließen: Die Option „Styling einschließen“ steuert, ob die Standard-CSS- und Layout-Assets von SearchWP für den Live-Such-Dropdown auf Ihren Seiten geladen werden. Diese Asset-Dateien sind für die Anwendung von Standardstilen auf die Suchergebnisse und die korrekte Positionierung des Dropdown-Containers unter oder über dem Suchformular verantwortlich. Das Ändern dieser Option wird nur erfahrenen Benutzern empfohlen, die mit benutzerdefinierten Stilen und Code vertraut sind.
Positionierung: Wählen Sie, ob die Ergebnisse über oder unter dem Suchformular erscheinen sollen. Das Standardverhalten ist, den Dropdown unter dem Eingabefeld anzuzeigen.
Automatische Breite: Aktivieren Sie diesen Schalter, wenn der Ergebnis-Dropdown die gleiche Breite wie das Suchformular haben soll. Wenn Sie ihn deaktivieren, folgt der Container seinem eigenen Styling oder seiner Standardbreite.
Maximale Ergebnisse: Diese Option legt die maximale Anzahl der im Live-Dropdown angezeigten Ergebnisse fest. Der Standardwert ist 7. Sie können eine bestimmte Zahl (z. B. 5 oder 10) verwenden, um die Anzahl der sichtbaren Ergebnisse zu begrenzen, oder diesen Wert auf -1 setzen, um alle übereinstimmenden Ergebnisse anzuzeigen.
Nachricht bei keinen Ergebnissen: Passen Sie die Nachricht an, die angezeigt wird, wenn keine Übereinstimmungen gefunden werden. Der Standardtext lautet „Keine Ergebnisse gefunden.“. Sie können jedoch auch eine freundliche Aufforderung wie „Wir haben überall gesucht, aber nichts gefunden. Versuchen Sie, etwas anderes zu suchen“. verwenden, um die Benutzererfahrung zu verbessern.
5. Verschiedene Einstellungen
Mindestlänge der Zeichen: Definieren Sie die Mindestanzahl von Zeichen, die ein Benutzer eingeben muss, bevor Live-Suchergebnisse angezeigt werden.
Hinweis: Standardmäßig indiziert SearchWP Schlüsselwörter mit einer Mindestlänge von 3 Zeichen. Wenn Sie Suchen mit 1 oder 2 Zeichen zulassen möchten, müssen Sie die Option „Mindestlänge entfernen“ in den Haupteinstellungen von SearchWP aktivieren. Stellen Sie nach der Aktivierung sicher, dass Sie den Index in den Engine-Einstellungen neu erstellen, damit die neuen Tokens (kürzere Wörter) in die Suchergebnisse aufgenommen werden können.
Zusätzliche Tipps
- Für mehr visuelle Kontrolle mit erweiterten Stilen können Sie benutzerdefiniertes CSS in Ihrer Theme-Stylesheet oder unter Darstellung → Anpassen → Zusätzliches CSS hinzufügen.
- Live-Suche ist mit Suchformularen kompatibel. Sie können ein Kategorie-Dropdown-Formular oder Optionen im Erweiterten Suchformular verwenden, um Live-Suchergebnisse zu filtern.
- Wenn Sie das Layout von Live-Suchergebnissen anpassen oder zusätzliche Informationen anzeigen möchten, können Sie eine benutzerdefinierte Live-Suchvorlage in Ihrem Theme erstellen. Detaillierte Anweisungen finden Sie in diesem Dokument.
Nutzung
Nach dem Hochladen und Aktivieren von Live Search wird jedes Formular, das mit get_search_form() generiert wurde, automatisch mit Live Search und der Standardkonfiguration erweitert. Die Standard-Suchmaschine von SearchWP wird verwendet (oder die native WordPress-Suche, falls SearchWP nicht verfügbar ist) und das Standard-Theme angewendet. Sie können jedoch alles bis zu einem gewissen Grad anpassen.
Wenn Sie get_search_form() nicht verwenden, können Sie einfach ein Data-Attribut hinzufügen, um Live Search zu aktivieren, wie folgt:
Wenn Sie verhindern möchten, dass SearchWP Live Search automatisch für mit get_search_form() generierte Formulare aktiviert, verwenden Sie den searchwp_live_search_hijack_get_search_form Filter.
Um Live-Ergebnisse nur für ausgewählte Formulare anzuzeigen, können Sie Live Search in den Einstellungen deaktivieren und dann das folgende JS-Skript verwenden, um Live Search für bestimmte Formulare zu aktivieren:
| <script> | |
| jQuery(document).ready( function(){ | |
| jQuery("form input[type='search']").searchwp_live_search(); | |
| }); | |
| </script> |
Im obigen Code können Sie den Selektor form input[type='search'] durch das spezifische Eingabe-Selektor-Element für Ihr Formular ersetzen.
Anpassen der Suchmaschine und Konfiguration pro Suchformular
Sie können die verwendete Suchmaschine anpassen, indem Sie das Attribut data-swpengine auf Ihrem Eingabefeld auf den Namen der Suchmaschine setzen, die Sie verwenden möchten. Dies gilt nur, wenn SearchWP installiert und aktiviert ist, und hat Vorrang vor der engine, die in der entsprechenden Konfiguration definiert ist.
Sie können die verwendete Konfiguration pro Suchformular anpassen, indem Sie das Attribut data-swpconfig auf Ihrer Eingabe auf einen Schlüssel aus dem Konfigurations-Array setzen. Um diese anzupassen, verwenden Sie den searchwp_live_search_configs Filter.
Anpassen der Ergebnisse
Die Ergebnisse von Live Search werden von einem Vorlagensystem unterstützt. Sie werden feststellen, dass eine Datei mit dem Plugin geliefert wird: ~/wp-content/plugins/searchwp-live-ajax-search/templates/live-search-results.php. Diese Datei wird zur Anzeige von Suchergebnissen verwendet. Es wird empfohlen, dass Sie die folgenden Schritte ausführen, wenn Sie die Suchergebnisse anpassen möchten:
- Erstellen Sie einen Ordner in Ihrem Theme-Verzeichnis mit dem Titel
searchwp-live-ajax-search - Kopieren Sie
live-search-results.phpaus dem Verzeichnis~/wp-content/plugins/searchwp-live-ajax-search/templates/in diesen Ordner - Passen Sie die Kopie von
live-search-results.phpin Ihrem Theme an, wie Sie es mit jeder Theme-Vorlage tun würden - Erstellen Sie optional zusätzliche Dateien für jede Suchmaschine, z. B.
live-search-results-supplemental.phpfür eine Suchmaschine namenssupplemental
Positionierung
Live Search gibt einige grundlegende Stile aus, um den Ergebnis-Wrapper richtig zu positionieren. Es gibt auch ein Standard-Theme mit minimalem Aufwand aus. Sie können die Standard-Visual-Styling entfernen und die Positionierung beibehalten, indem Sie das Standard-Theme-CSS entfernen:
Wichtiger Hinweis
HINWEIS: Das Standardthema implementiert auch die Spinner-Animation. Wenn Sie das Standardthema entfernen, müssen Sie die unten stehende Keyframe-Animation zu Ihrem CSS hinzufügen.
Wenn Sie auch die CSS-Positionierung entfernen möchten, können Sie dies mit dem searchwp_live_search_base_styles Filter tun.
Sie können den Ergebniscontainer auf zwei Arten neu positionieren:
- Fügen Sie ein data-Attribut zu Ihrem Formular-Input hinzu, das den Selektor des Elternelements enthält
data-swpparentel=".masthead .my-search-results-parent" - Fügen Sie eine
parent_elEigenschaft zur Konfiguration hinzu (siehesearchwp_live_search_configs)
Filter
Die folgenden Filter stehen für die Live-Suche zur Verfügung:
searchwp_live_search_hijack_get_search_form Legt fest, ob Live Search automatisch Suchformulare verbessert, die von get_search_form() generiert wurden. Der Standardwert ist true. Zum Deaktivieren:
| <?php | |
| add_filter( 'searchwp_live_search_hijack_get_search_form', '__return_false' ); |
searchwp_live_search_get_search_form_engine Definiert die Suchmaschine, die verwendet wird, wenn die Live-Suche für Formulare, die von get_search_form() generiert wurden, automatisch aktiviert wird. Der Standardwert ist 'default'.
Hinweis: Nur anwendbar, wenn SearchWP installiert und aktiviert ist
| <?php | |
| // only applies when SearchWP is active | |
| function my_searchwp_live_search_get_search_form_engine() { | |
| return 'my_supplemental_engine'; | |
| } | |
| add_filter( 'searchwp_live_search_get_search_form_engine', 'my_searchwp_live_search_get_search_form_engine' ); |
searchwp_live_search_get_search_form_config Definiert die Konfiguration, die verwendet wird, wenn die Live-Suche für Formulare, die von get_search_form() generiert wurden, automatisch aktiviert wird. Der Standardwert ist 'default'.
Hinweis: Nur anwendbar, wenn SearchWP installiert und aktiviert ist
| <?php | |
| // only applies when SearchWP is active | |
| function my_searchwp_live_search_get_search_form_config)() { | |
| return 'my_config'; | |
| } | |
| add_filter( 'searchwp_live_search_get_search_form_config', 'my_searchwp_live_search_get_search_form_config' ); |
searchwp_live_search_configs Fügen Sie Ihre eigenen Konfigurationen hinzu, die Einstellungen für die zu verwendende Suchmaschine, die Suchverzögerung, die Mindestanzahl von Zeichen, die Positionierung des Ergebnisbereichs und die Spinner-Optionen steuern. Konfigurationen werden als assoziatives Array gespeichert, sodass Sie optional die Werte im default Schlüssel überschreiben oder eigene hinzufügen und diese beim Festlegen des data-swpconfig Attributs auf Ihrem Such-Input verwenden können.
Dies ist die Standardkonfiguration:
Hinweis: Die Standardeinstellung für die Mindestanzahl von Zeichen ist 3 (was mit SearchWP selbst identisch ist), aber die Konfigurationseinstellungen für die Live-Suche sind separate Parameter und werden nicht aktualisiert, wenn ähnliche SearchWP-Parameter angepasst wurden.
| <?php | |
| $configs = array( | |
| 'default' => array( // 'default' config | |
| 'engine' => 'default', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 500, // wait 500ms before triggering a search | |
| 'min_chars' => 3, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'parent_el' => 'body', // selector of the parent element for the results container | |
| 'results' => array( | |
| 'position' => 'bottom', // where to position the results (bottom|top) | |
| 'width' => 'auto', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 5 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ) | |
| ); |
Sie können die Werte dieser Standardeinstellungen ändern oder eigene, getrennte Konfigurationen hinzufügen und mehrere Konfigurationen für Sie verfügbar haben:
| <?php | |
| function my_searchwp_live_search_configs( $configs ) { | |
| // override some defaults | |
| $configs['default'] = array( | |
| 'engine' => 'default', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 400, // wait 500ms before triggering a search | |
| 'min_chars' => 5, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'parent_el' => 'body', // selector of the parent element for the results container | |
| 'results' => array( | |
| 'position' => 'bottom', // where to position the results (bottom|top) | |
| 'width' => 'auto', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 5 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ); | |
| // add an additional config called 'my_config' | |
| $configs['my_config'] = array( | |
| 'engine' => 'supplemental', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 300, // wait 500ms before triggering a search | |
| 'min_chars' => 2, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'results' => array( | |
| 'position' => 'top', // where to position the results (bottom|top) | |
| 'width' => 'css', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 0 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ); | |
| return $configs; | |
| } | |
| add_filter( 'searchwp_live_search_configs', 'my_searchwp_live_search_configs' ); |
searchwp_live_search_base_styles Legt fest, ob die Standard-CSS für die Positionierung des Ergebnisbereichs angewendet wird. HINWEIS: Dies ist getrennt vom visuellen Erscheinungsbild der Suchergebnisse und steuert nur die Positionierung. Der Standardwert ist true. Zum Deaktivieren:
| <?php | |
| add_filter( 'searchwp_live_search_base_styles', '__return_false' ); |
searchwp_live_search_posts_per_page Steuert, wie viele Ergebnisse zurückgegeben werden. Der Standardwert ist 7. Zum Ändern:
| <?php | |
| function my_searchwp_live_search_posts_per_page() { | |
| return 20; // return 20 results | |
| } | |
| add_filter( 'searchwp_live_search_posts_per_page', 'my_searchwp_live_search_posts_per_page' ); |
