Suche mit Blöcken

tl;dr: Die interne Suche ist tief in WordPress integriert und gibt es von Anfang an. In diesem Beitrag erfährst du, wie du am Beispiel von Twenty Twenty-Four wie du die Suche in deinem Blocktheme umsetzen kannst.

Die Suche starten
Einstellungen des Blocks Suche
Das Template Suchergebnis
Fazit

WP Suche:

Die Suche starten

Wie die WordPress interne Suche funktioniert und wie man diese mit Plugins erweitert steht im Beitrag WordPress interne Suche. Hier geht es darum wie man die Suchmaske in die Seite integriert und wie man die Ergebnisseite gestalten kann.

Unabhängig davon ob man den Block Suchen im Template-Teil Header oder in der Navigation einsetzt oder einen anderen Platz dafür findet - wer eine Suche auslöst wird beim Template Suchergebnisse landen, eine Archivseite die als Filterkriterium eben den eingegeben Suchbegriff verwendet.

Mann kann den Block Suche ebenso wie die Suchergebnisse gestalten

Der Block Suchen

Der Block Suchen ist in der Blockliste unter den Widgets zu finden. Er kann überall eingesetzt werden, häufig wird er im Template Teil Header oder auch innerhalb des Konstruktes Navigation verwendet.

Einstellungen des Blocks Suche

Im Suchfeld kann der Text Optionaler Platzhalter … überschrieben werden, wodurch ein Platzhalter angezeigt wird. Die anderen Einstellungen für den Block Suchen sind 2geteilt: in der Werkzeugleiste sind 3 Funktionen untergebracht:

Werkzeugleiste für den Block Suche

Suchbeschriftung

Blendet einen Text über dem Sucfeld ein/aus. Der Text (Suchen) kann überschrieben werden.

Buttonposition ändern

Kann 4 Einstellungen: Button außen, Button innen, Kein Button oder Nur Button. Die letzte Option blendet das Suchfeld auf Klick ein.

Button mit Icon benutzen

Stellt ein, ob der Button ein Icon oder eine Beschriftung haben soll.

Einstellungen für den Block Suche

Es gibt nur eine Einstellung im rechten Sidebar die getroffen werden kann:

Breite. Eingestellt kann ein fixer Wert in Pixel werden oder ein relativer in %, für diese gibt es 4 Vorweinstellungen 25%, 50%, 75% und 100%. Andere Einheiten sind nicht vorgesehen.

Stile für den Block Suche

Wie fast überall kann man im Tab Stile die Farben für Text und Hintergrund einstellen. Weiters gibt es einen Bereich für Typographie.

Weil es sich bei der Suche um ein Formularfeld handelt gibt es eine Option für Ränder. Setzt man hier einen Wert wird das Suchfeld entprechend formatiert.

Auch kann man einen Radius Setzen um das Feld abzurunden. Die Einstellungen des Beispiels rechts führen zu diesem Ergebnis:

RänderSuche WP — Ränder-Einstellungen für den Block Suchen.

Das Template Suchergebnis

Mit der Gestaltung des Suchfeldes ist die halbe Arbeit bereits geleistet. Die WordPress interne Suche funktioniert immer, näheres kann hier nachgelesen werden.

Um die Suchergebnisse darzustellen verwendet WordPress unter TT4 das Template

Dashboard > Design > Website-Editor > Templates > Suchergebnisse

das bearbeitet werden kann. Es lohnt sich ein Blick in die Listenansicht um das Template zu verstehen.

Titel der Suchergebnisse

Dieser Block hat - auser den üblichen Stil-Eigenschaften - nur eine Einstellmöglichkeit, den Schalter Den Suchbegriff im Titel anzeigen. Ist dieser Aktiviert, so wird im Titel:

Suchergebnis für: „ SUCHBEGRIFF " angezeigt. Wenn nicht lautet der Titel schlicht Suchergebnisse und kann auch nicht verändert werden.

Naja, man muss den Block ja nicht verwenden...

Abfrage-Loop

Der wichtigste Blog ist die Abfrage-Loop. Die Voreinstellungen für diesen Block haben einen entscheidenden Schalter:

Abfrage von Template übernehmen. Dieser muß zwingend aktiviert sein, damit der Block weiss, dass er ein Suchergebnis anzuzeigen hat. Sonst wäre diese Block für eine eigene Abfrage zu konfigurieren.

Bei einer Suche gibt es 2 Möglichkeiten: entweder sie ergibt einen der mehrere Treffer oder eben nicht. Daher gibt es den Block Keine Ergebnisse. Setzt man diesen in der Abfrageloop ein wird er nur angezeigt, wenn die Sucherfolglos war. Dieser Block ist eigentlich eine Gruppe, man kann also ausser dem Text auch weitere Blöcke wie zB. Bilder anzeigen sollte die Suche zu keinem Ergebnis führen.

Gibt es aber Treffer wird er als Gruppe organisierte Bereich angezeigt. Diese Gruppe ist wiederum 2geteilt in das Beitragstemplate, welches für jeden einzelnen Treffer interpretiert wird und in die Seitennummerierung.

Beitrags-Template

Der Block hat eine wichtige Layout-Einstellung: Spalten. Hier legst du fest, in wie vielen Spalten die einzelnen Treffer des Suchergebnis angezeigt werden sollen (1 - 6)

Danach wird definiert, welche Information des einzelnen Beitrags in der Übersicht der Trefferliste angezeigt werden soll.

Beitragsbild ist der Block, der (falls vorhanden) eben das Beitragsbild anzeigt. Es kann mit dem Link zum Beitrag unterlegt werden, damit man auf Klick eben zum Beitrag kommt. Im Stil können umfangreiche Einstellungen vorgenommen werden: Overlay, Filter, Größe, Innen- und Aussenabstände, Seitenverhältnis, Skalierung, Ränder und Radius.

Titel zeigt den Beitragstitel. an. Auch hier kann Titel als Links darstellen gewählt werden.

Beitrags-Meta ist ein Template-Teil, der zur Anzeige der Metainformationen (Datum, Autor, ...) genutzt werden kann.

Textauszug zeigt eine über die Wortanzahl zu limitierende Länge des Textauszugs an.

Seitennummerierung ist ein Konstrukt, das zur voriger/nächster Seite mit Text und oder Pfeil verweisen kann.

Treffergruppe — Die Gruppenkonstruktion die für die Anzeige von Suchergebnissen verwendet wird.

Das Template besteht (wenig überraschend) aus den Template-Teilen Header und Footer sowie einer Gruppe, die hier rechts abgebildet ist. Zusammengefasst also:

Titel der Suchergebnisse
Suchen (Block, siehe oben))
Abfrage-Loop

Die Ergebnisse werden (soferne vorhanden) ein einer Gruppe angezeigt die aus einem Beitrags-Template besteht das selber wiederum aus dem Beitragsbild, dem Titel, Metainformationen und einem Textauszug besteht inkl. weiterlesen Link.

Und weil wir uns in einem Loop befinden wird dieses Beitragstemplate so oft angezeigt solange es eben Suchergebnisse gibt oder die Grenze der angezeigten Suchergebnisse erreicht wurde und die Paginierung (Seitennummerierung) schlagend wird.

WP Template Suchergebnisse — Das Template Suchergebnisse wird mit diesen Blöcken installiert.

Fazit

Die Umsetzung der internen Suche mit dem Blockeditor und dem Full-Site-Editing funktioniert genau so wie man es sich erwartet: wenige Spezielle Blöcke und ein eigenes Template für die Ergebnisse. Die Gestaltungsmöglichkeiten sind wie immer vom Theme abhängig, aber schon in der kostenlosen, aktuellen Umgebung mit dem Default-Theme Twenty Twenty-Four ausreichend gut enwtickelt und praxistauglich.

Veröffentlicht am: 14. Februar 2024
Letztes Update am: 9. September 2026