loader image

Radiboxes Server machen WordPress Websites bis zu 4x schneller - ohne zusätzliche Optimierung. Raidboxes migriert deine Website und du kannst selbst vergleichen. Wenn du zufrieden bist, wähle einfach das passende Paket in deren Preistabelle.

4.97

Sehr gut

trustedshops.de

Autor

duckducknews

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.

Wie man ein benutzerdefiniertes WordPress-Suchformular erstellt (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.

SearchWP Lizenzschlüssel eingebenEnter SearchWP License Key

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.

SearchWP Add New Engine

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.

SearchWP Engine Label

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.

SearchWP Edit Rules

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.

Klicken Sie auf die Schaltfläche 'Suchmaschinen speichern'Click the Save Engines Button

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“.

SearchWP Shortcodes Extension herunterladen

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.

Einen benutzerdefinierten HTML-Block hinzufügenAdd a Custom HTML Block

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[searchwp_search_form engine="custom" var="searchvar" button_text="Benutzerdefinierte Suche"]

class="search-results-wrapper">

[searchwp_search_results engine="custom" var="searchvar" posts_per_page=4]


[searchwp_search_result_link direct="true"]


[searchwp_search_result_excerpt]

[/searchwp_search_results]


class="no-search-results-found">

[searchwp_search_results_none]

Keine Ergebnisse gefunden, bitte suchen Sie erneut.

[/searchwp_search_results_none]


class="search-results-pagination">

[searchwp_search_results_pagination direction="prev" link_text="Vorherige" var="searchvar" engine="custom"]

[searchwp_search_results_pagination direction="next" link_text="Weiter" var="searchvar" engine="custom"]




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.

Klicke auf Veröffentlichen oder Aktualisieren, um deinen Beitrag zu speichern

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.

Live Search Page Example

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.

SearchWP Erweiterte EinstellungenSearchWP Advanced Settings

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.searchform {
font-family:arial;
font-size:16px;
hintergrund:#ace5e3;
farbe:#ffffff;
border:1px solid #61c3c0;
padding:10px;
höhe:90px;
width:600px;
}
.search-results {
font-family:arial;
schriftgröße:16px;
hintergrund:#ace5e3;
farbe:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

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.

SearchWP Custom CSS Preview

SearchWP MetricsSearchWP Metrics

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.

Die beliebtesten Beiträge

Wie man den ungültigen JSON-Fehler in WordPress behebt (Anleitung für Anfänger)

Versuchen Sie, den ungültigen JSON-Fehler in WordPress zu beheben? Dieser Fehler tritt auf, wenn Sie WordPress-Beiträge oder -Seiten auf Ihrer Website bearbeiten. Sie erhalten die Meldung "Die Antwort ist keine gültige JSON-Antwort" und die Aktualisierung der Seite schlägt fehl. In diesem Artikel zeigen wir Ihnen, wie Sie den ungültigen JSON-Fehler ...

So beheben Sie den Fehler „Verbindung ist nicht privat“ (Anleitung für Website-Besitzer)

Sehen Sie die Fehlermeldung "Ihre Verbindung ist nicht privat" auf Ihrer WordPress-Website? Dies ist die Fehlermeldung, die Sie in Google Chrome sehen. Der gleiche Fehler wird auf allen modernen Browsern mit leicht unterschiedlichen Meldungen angezeigt und kann für Anfänger bei der Fehlerbehebung etwas verwirrend sein. In dieser Anleitung für Website-Besitzer ...

Wie man eine Seite in voller Breite in WordPress erstellt (Anleitung für Anfänger)

Möchten Sie eine Seite in voller Breite in WordPress erstellen, so dass Sie Ihren Inhalt über den Bildschirm strecken können? Die meisten WordPress-Themes verfügen bereits über eine integrierte Vorlage für eine Seite in voller Breite, die Sie verwenden können. Wenn Ihr Theme jedoch keine hat, dann ist es einfach, sie ...
DSGVO Cookie-Einwilligung mit Real Cookie Banner