Suchvorlagen
Inhaltsverzeichnis
Die SearchWP-Vorlage wird zusammen mit Suchformularen verwendet, um Suchergebnisse auf einer benutzerdefinierten Ergebnisseite anzuzeigen. Mit den Vorlagenoptionen können Sie vollständig steuern, wie Ihre Ergebnisse aussehen und sich anfühlen, um sicherzustellen, dass sie zum Design Ihrer Website passen und eine großartige Benutzererfahrung bieten.
Diese Dokumentation erklärt, wie Sie die Seite Vorlagenoptionen verwenden, Layout-Themes auswählen, benutzerdefinierte Stile anwenden und Ihre SearchWP-Vorlage überall auf Ihrer Website einbetten.
Hinweis: Die Vorlagenanpassung kann nur mit der Option "SearchWP-Vorlage" in Suchformularen verwendet werden. Wenn Sie die Standardvorlage der Website anpassen möchten, müssen Sie die Standard-Suchvorlage Ihres Themes bearbeiten.
Erste Schritte mit Vorlagen
So erstellen Sie eine neue Vorlage zur Anzeige von SearchWP-Ergebnissen:
- Gehen Sie zu Ihrem WordPress-Dashboard.
- Navigieren Sie zu SearchWP > Vorlagen.
- Klicken Sie auf die Schaltfläche „Neu hinzufügen“, um ein neues Vorlagendesign zu erstellen.
Auf dem nächsten Bildschirm finden Sie zwei Hauptbereiche für die Anpassung:
- Wählen Sie ein Layout-Theme
- Benutzerdefinierte Stile
Lassen Sie uns durchgehen, was jeder Abschnitt bietet.
1. Wählen Sie ein Layout-Theme
Dieser Abschnitt ermöglicht es Ihnen, den Layoutstil für die Anzeige Ihrer Suchergebnisse auf der Vorderseite Ihrer Website auszuwählen. Sie können einfach zwischen verschiedenen Layout-Themes wechseln und jedes vor dem Speichern in der Vorschau anzeigen.
Verfügbare Layout-Themes:
- Minimal: Ein sauberes, einfaches Listenlayout, das nur den Titel und die Beschreibung jedes Ergebnisses anzeigt.
- Kompakt: Ein Listenlayout mit Titel, Beschreibung und einer kleinen Miniaturansicht.
- Spalten: Ein Rasterlayout, das Ergebnisse in mehreren Spalten anzeigt, mit Titel, Beschreibung und einem kleinen Bild.
- Mittel: Ein Listenlayout mit einem mittelgroßen Bild sowie Titel und Beschreibung.
- Reichhaltig: Ein optisch ansprechendes Listenlayout mit einem großen Bild, Titel und Beschreibung.
- Kombiniert: Diese Option ermöglicht es Ihnen, ein vollständig benutzerdefiniertes Layout zu entwerfen, indem Sie Einstellungen aus dem Abschnitt "Benutzerdefinierte Stile" mischen und anpassen.
Die Auswahl eines Themes ist ein guter Ausgangspunkt, und Sie können das Design mit den nachstehend beschriebenen Styling-Optionen weiter verfeinern.
2. Benutzerdefinierte Stile
Nachdem Sie ein Layout-Theme ausgewählt haben, verwenden Sie den Abschnitt Benutzerdefinierte Stile, um das Aussehen und Verhalten Ihrer Suchergebnisse fein abzustimmen.
Layout-Stil: Sie können wählen, wie die Ergebnisse angeordnet werden:
- Raster: Zeigt Ergebnisse in einem mehrspaltigen Layout an.
- Liste: Zeigt jedes Ergebnis untereinander in Listenform an.
Grundlegende Styling-Optionen
Die grundlegenden Styling-Optionen ermöglichen es Ihnen, das visuelle Erscheinungsbild Ihrer Suchergebnisse anzupassen, damit sie besser zum Design Ihrer Website passen. Diese Optionen bieten Flexibilität bei der Steuerung der Anzeige jedes Ergebnisses und sorgen für ein konsistentes und professionelles Erscheinungsbild.
Beschreibung: Sie können das Beschreibungsfeld in den Suchergebnissen je nach Ihren Vorlieben aktivieren oder deaktivieren. Wenn aktiviert, zeigt die Beschreibung einen kurzen Auszug aus dem Inhalt an. Zusätzlich haben Sie die Möglichkeit, die Suchbegriffe im Auszug hervorzuheben. Um einen benutzerdefinierten Auszug zu generieren, der die hervorgehobenen Schlüsselwörter enthält, aktivieren Sie einfach die Option Hervorhebung in den SearchWP-Einstellungen.
Bild: Mit der Bildoption können Sie die Größe des Bildes auswählen, das neben dem Suchergebnis angezeigt wird. Sie können aus verschiedenen vordefinierten Größen wie klein, mittel und groß wählen.
Titel: Sie können die Farbe und Schriftgröße des Ergebnistitels anpassen, um sie an die Typografie Ihrer Website anzupassen.
Preis: Die Preisoption wird verfügbar, wenn ein eCommerce-Plugin wie WooCommerce oder Easy Digital Downloads auf Ihrer Website aktiv ist. Sie ermöglicht es Ihnen, die Farbe und Schriftgröße des Produktpreises anzupassen, der in den Suchergebnissen angezeigt wird.
Button-Stil: Der Abschnitt Button-Stil ermöglicht es Ihnen, das Erscheinungsbild des Buttons „Mehr lesen“ anzupassen, der am Ende jedes Ergebnis-Auszugs erscheint.
Sie können den Text der Schaltfläche anpassen, um ihn kontextbezogener oder einladender zu gestalten, z. B. „Mehr anzeigen“ oder „Erfahren Sie mehr“. Zusätzlich können Sie die Hintergrundfarbe, Schriftfarbe und Schriftgröße der Schaltfläche ändern, damit sie hervorsticht oder nahtlos in Ihr Ergebnislayout passt.
Ergebnisse pro Seite: Diese Einstellung ermöglicht es Ihnen, die maximale Anzahl der auf einer einzelnen Seite angezeigten Suchergebnisse festzulegen.
Hinweis: Sie können die Anzahl der Ergebnisse pro Seite auch programmatisch mit dem Filter searchwp\results\per_page festlegen. Dies ist nützlich, wenn Sie die Ergebnisanzahl dynamisch basierend auf bestimmten Kriterien oder Seitentypen anpassen möchten.
Paginierungsstil: Die Option Paginierungsstil ermöglicht es Ihnen, die Navigation der Benutzer durch mehrere Seiten von Suchergebnissen zu steuern.
Verfügbare Paginierungstypen:
- AJAX Mehr laden
Diese Option lädt dynamisch weitere Suchergebnisse, ohne die Seite neu zu laden. Diese Methode bietet ein nahtloses Surferlebnis, da Benutzer mehr Ergebnisse anzeigen können, ohne die aktuelle Seite zu verlassen. Sie können die Beschriftung und das Styling (Hintergrund, Schriftfarbe und -größe) des Buttons anpassen. - Default Pagination (Number-Based)
The Default Pagination method displays traditional page numbers, allowing users to navigate through result pages manually. You can select from the following styles:- Keine Box: Dieser Stil präsentiert die Seitenzahlen neben den Links „vorherige/nächste“ ohne Box oder kreisförmige Formatierung. Sie haben auch die Möglichkeit, die Beschriftungen für die Schaltflächen „Vorherige“ und „Nächste“ anzupassen.
- Boxed: Zeigt Seitenzahlen mit Box-Formatierung an.
- Kreisförmig: Zeigt Seitenzahlen mit kreisförmiger Rahmenformatierung an.
Einbetten Ihrer Vorlage
Genau wie bei Suchformularen kann Ihre SearchWP-Vorlage mit einer der folgenden Methoden in jede Seite Ihrer WordPress-Website eingebettet werden:
1. Gutenberg-Block
Die Gutenberg-Block-Methode ermöglicht es Ihnen, SearchWP-Ergebnisse einfach direkt in jeden Beitrag oder jede Seite Ihrer WordPress-Website einzubetten. Diese Methode ist besonders nützlich für Benutzer, die es vorziehen, mit dem Gutenberg-Editor zu arbeiten und Suchergebnisse nahtlos in ihren Inhalt einzufügen möchten.
- Suchen Sie beim Bearbeiten eines Beitrags oder einer Seite nach dem Block „SearchWP Results“.
- Fügen Sie den Block dort ein, wo Ihre Ergebnisse angezeigt werden sollen.
- Die Ergebnisse werden gemäß der im Suchformular-Einstellungsmenü zugewiesenen Engine und Vorlage angezeigt. Unter den Blockeinstellungen haben Sie die Möglichkeit, eine andere Vorlage und die Engine für die Anzeige der Ergebnisse auszuwählen. Dies ist normalerweise nicht erforderlich und sollte nur verwendet werden, wenn die vom Suchformular festgelegte Einstellung überschrieben werden muss.
2. Shortcode: Jede Vorlage bietet einen eindeutigen Shortcode. Kopieren Sie ihn und fügen Sie ihn in jede Seite, jeden Beitrag oder jeden Widget-Bereich ein, um die Ergebnisse anzuzeigen.
3. PHP-Code: Verwenden Sie den bereitgestellten PHP-Snippet, um Ihre Suchergebnisse direkt in Ihre Theme-Dateien oder über ein Code-Snippet-Plugin einzufügen.
4. Embed Terms: Sie können einen Results Template-Block ganz einfach zu einer vorhandenen Seite hinzufügen, indem Sie ihn aus dem Dropdown-Menü auswählen, oder Sie können eine neue Seite speziell für den Block erstellen.
Tipps zur Verwendung von Vorlagen
- Sie können mehrere Vorlagen für verschiedene Bereiche Ihrer Website erstellen. Zum Beispiel ein Layout für die Suche in Ihrem Blog und ein anderes für die Suche nach Produkten.
- Sie können auch eine einzelne Vorlage wiederverwenden auf mehreren Seiten.
- Jede Vorlage ist vollständig anpassbar, sodass Sie die volle Kontrolle über Layout, Farben, Stile und die Anzeige von Inhalten haben.
