Wie man ein benutzerdefiniertes WordPress-Suchformular erstellt (Schritt für Schritt)

Müssen Sie ein eigenes Suchformular für Ihre WordPress-Website erstellen?

Über die Suche finden die meisten Nutzer die Inhalte Ihrer Website. Wenn sie nicht leicht finden können, was sie suchen, gehen sie vielleicht auf eine andere Website.

In diesem Artikel zeigen wir Ihnen, wie Sie die Suche auf Ihrer Website verbessern können, indem Sie ein benutzerdefiniertes WordPress-Suchformular erstellen, Schritt für Schritt.

Vielleicht möchten Sie auch den Suchalgorithmus so anpassen, dass bestimmte Inhalte höher angezeigt werden als andere, oder Sie möchten das Aussehen Ihres Suchformulars anpassen.

Schauen wir uns also an, wie Sie das WordPress-Suchformular und die Ergebnisseite anpassen können. Wir stellen Ihnen zwei Methoden vor, die Sie über die unten stehenden Links auswählen können:

Anpassen des WordPress-Suchformulars und der SuchergebnisseSearchWP ist das beste benutzerdefinierte Suchplugin für WordPress. Es ist einfach zu bedienen, gibt Ihnen die vollständige Kontrolle über Ihre Suchergebnisse und ist genauer als die Standard-WordPress-Suche.

Der erste Schritt ist die Installation des SearchWP-Plugins. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung WordPress-Plugins installieren.

Nach der Aktivierung müssen Sie die Seite Einstellungen “ SearchWP besuchen und dann auf den Menüpunkt „Lizenz“ klicken.

Geben Sie dann Ihren Lizenzschlüssel in das Feld „Lizenz“ ein und klicken Sie auf die Schaltfläche „Aktivieren“. Sie finden diese Informationen in Ihrem Konto auf der SearchWP-Website.

Anpassen der Suchmaschine

Sobald Sie dies getan haben, müssen Sie auf die Menüoption „Engines“ klicken. Dort sollten Sie auf die Schaltfläche „Neu hinzufügen“ klicken, um eine neue Suchmaschine zu erstellen.

Dies führt Sie zu einer Seite, auf der Sie auch auswählen können, ob Sie Beiträge, Seiten, Mediendateien, Kommentare und Benutzer durchsuchen möchten. Wir belassen die Standardeinstellungen so, wie sie sind.

Wir ändern den Namen der Suchmaschine in „Benutzerdefiniert“. Geben Sie diesen Namen in das Feld „Bezeichnung der Suchmaschine“ ein.

Sie können auch Regeln für jeden Bereich erstellen, die festlegen, ob bestimmte Inhalte in den Suchergebnissen enthalten sind oder nicht.

So können Sie beispielsweise Ihren Besuchern die Möglichkeit geben, auf einfache Weise nach Inhalten zu suchen, die dasselbe Thema betreffen, über das sie gerade gelesen haben. Oder in einem Online-Shop könnten Sie Ihren Kunden helfen, schnell andere Produkte in derselben Kategorie zu finden.

Klicken Sie auf die Schaltfläche „Regeln bearbeiten“ im Abschnitt „Beiträge“.

Sie werden feststellen, dass Sie Regeln für die Kategorien, Tags und das Format des Beitrags, das Veröffentlichungsdatum und die Beitrags-ID erstellen können.

Wie das geht, erfahren Sie unter Methode 1 in unserer Schritt-für-Schritt-Anleitung zur Suche nach Kategorien in WordPress.

Sobald Sie Ihre Standard-Suchmaschineneinstellungen angepasst haben, klicken Sie auf die Schaltfläche „Suchmaschinen speichern“ oben auf der Seite, um Ihre benutzerdefinierte Suchmaschine zu erstellen.

Hinzufügen des Suchformulars mit Shortcode

Die SearchWP Shortcodes-Erweiterung vereinfacht das Hinzufügen Ihres neuen benutzerdefinierten Suchformulars zu Ihrer WordPress-Website.

Besuchen Sie einfach die SearchWP Shortcodes Extension Website und klicken Sie dann auf die Schaltfläche „Download available with active license“.

Bearbeiten Sie einfach einen Beitrag und setzen Sie den Cursor an die Stelle, an der Sie das Suchformular hinzufügen möchten. Klicken Sie dann auf das Plus-Symbol „+„, um das Menü „Blöcke“ aufzurufen.

Geben Sie als Nächstes „html“ in das Suchfeld ein und klicken Sie dann auf den „Custom HTML“-Block, um ihn dem Beitrag hinzuzufügen.

Sobald Sie den neuen Block hinzugefügt haben, sollten Sie die folgenden Shortcodes und HTML in den Block einfügen.

Dieser Code fügt Ihr benutzerdefiniertes Suchformular zum Beitrag hinzu, erstellt einen Abschnitt zur Anzeige der Suchergebnisse, zeigt bei Bedarf eine Meldung über fehlende Ergebnisse an und fügt eine Paginierung hinzu, wenn die Ergebnisse mehrere Seiten umfassen.

Wenn Sie Ihrer Suchmaschine einen anderen Namen gegeben haben, müssen Sie engine="custom" an vier Stellen in den Namen Ihrer eigenen Suchmaschine ändern.

Sie können auch den Text auf der Suchschaltfläche in etwas Beschreibendes ändern, indem Sie button_text="Custom Search" ändern. Der Rest des Codes kann unverändert bleiben.

Klicken Sie auf Veröffentlichen oder Aktualisieren, um Ihren Beitrag zu speichern und zu aktivieren.

Hinzufügen der Live Ajax Suche

Die Live-Ajax-Suche verbessert Ihr Suchformular, indem sie automatisch Dropdown-Suchergebnisse liefert, während der Benutzer seine Anfrage eingibt.

Eine Schritt-für-Schritt-Anleitung zur Installation finden Sie in unserer Anleitung Wie Sie Ihrer WordPress-Website eine Live-Ajax-Suche hinzufügen.

Erweiterte Einstellungen für SearchWP verwendenEinstellungen “ SearchWP navigieren und auf den Reiter Erweitert klicken. Auf dieser Seite können Sie einige Einstellungen aktivieren, die es Ihren Nutzern leichter machen, das zu finden, was sie suchen.

Kreuzen Sie eine der Optionen an, die Sie wünschen:

• Bei Teiltreffern werden auch Ergebnisse angezeigt, die nicht ganz mit dem gesuchten Begriff übereinstimmen.
• Automatische „Meinten Sie?“-Korrekturen schlagen einen leicht abweichenden Suchbegriff vor, der zu mehr Beiträgen auf Ihrer Website passt.
• Die Unterstützung von „Anführungszeichen/Phrasensuche“ ermöglicht es Ihren Nutzern, bei der Suche nach exakten Begriffen Anführungszeichen zu verwenden.
• Die Hervorhebung von Begriffen in den Ergebnissen erleichtert es Ihren Besuchern, in den Suchergebnissen zu finden, wonach sie suchen.

Gestaltung des Suchformulars und der Ergebnisseite

Ihr WordPress-Theme steuert das Aussehen Ihrer Website, einschließlich des Suchformulars und der Suchergebnisseite. Sie speichern die Formatierungsregeln für alle Elemente Ihrer WordPress-Website in einem CSS-Stylesheet.

Sie können Ihr eigenes benutzerdefiniertes CSS hinzufügen, um die Stilregeln Ihres Themes außer Kraft zu setzen.

Wenn Sie dies noch nicht getan haben, lesen Sie unseren Artikel über das Hinzufügen von benutzerdefiniertem CSS in WordPress für Anfänger.

Hier ist zum Beispiel ein benutzerdefiniertes CSS, das mit den meisten Themes funktioniert. Der erste Abschnitt ändert den Stil des Suchformulars und der zweite Abschnitt passt die Suchergebnisse an.

Sie können die Formatierung im Code ändern, um sie an Ihre eigene Website anzupassen. Sie können auch alle Zeilen löschen, die Sie nicht ändern möchten. Wenn Sie zum Beispiel die Höhe und Breite des Suchformulars nicht ändern wollen, löschen Sie diese Zeilen einfach.

Hier sind Screenshots unserer Demo-Website vor und nach dem Hinzufügen der benutzerdefinierten CSS.

Sie können die Suchmetriken auch verwenden, um die Suchergebnisse automatisch zu verbessern, indem Sie die Ergebnisse, die mehr Klicks erhalten, an die Spitze setzen.