ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: So erstellen Sie ein benutzerdefiniertes WordPress-Suchformular (Schritt für Schritt)
Aktie
Benachrichtigung Zeig mehr
Neuesten Nachrichten
Gewinner und Verlierer: Das Steam Deck wird zum ersten Mal verkauft, da Microsoft sein KI-Ethikteam fallen lässt
Technische Bewertungen
Strg+Alt+Entf: Laptops sollten mehr Wert auf Personalisierung legen
Technische Bewertungen
Die 8 besten Tools zur Optimierung von Online-Inhalten für WordPress (2023)
Showcase
Schnellladung: Der Snapdragon 7 Plus Gen 2 ist in der Lage, aber werden alle Telefone ihn verwenden?
Technische Bewertungen
Apple MacBook Pro mit M2 Pro erhält einen verlockenden Rabatt
Angebote
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > Tutorials > So erstellen Sie ein benutzerdefiniertes WordPress-Suchformular (Schritt für Schritt)
Tutorials

So erstellen Sie ein benutzerdefiniertes WordPress-Suchformular (Schritt für Schritt)

Zuletzt aktualisiert: November 19, 2021 12:27 am
ThemeLocal vor 1 Jahr 11 Minuten Mindestlesezeit
Aktie
11 Minuten Mindestlesezeit
Aktie

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

Contents
Warum ein benutzerdefiniertes Suchformular für WordPress erstellen?So passen Sie das WordPress-Suchformular und die Ergebnisse anSuchergebnisse messen und Conversions verbessern

Die Suche ist die Art und Weise, wie die meisten Benutzer Inhalte auf Ihrer Website finden. Wenn sie nicht leicht finden, wonach sie suchen, wechseln sie möglicherweise zu einer anderen Website.

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

Warum ein benutzerdefiniertes Suchformular für WordPress erstellen?

Die standardmäßige WordPress-Suchfunktion ist ziemlich eingeschränkt und findet nicht immer die relevantesten Inhalte.

Wenn Sie Ihrer Website mehr Inhalt hinzufügen, benötigen Sie bessere Möglichkeiten, damit Ihre Website-Besucher die Inhalte auf Ihrer Website leichter finden können.

Dies wird umso wichtiger, wenn Sie einen Online-Shop oder eine Mitgliedschaftsseite betreiben, auf der Benutzer das richtige Produkt oder den richtigen Kurs finden sollen.

Möglicherweise möchten Sie auch den Suchalgorithmus anpassen, um bestimmte Inhalte höher als andere anzuzeigen, oder das Erscheinungsbild Ihres Suchformulars anpassen.

Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie das WordPress-Suchformular und die Ergebnisseite anpassen. Wir werden zwei Methoden behandeln, die Sie über die folgenden Links auswählen können:

So passen Sie das WordPress-Suchformular und die Ergebnisse an

SearchWP ist das beste benutzerdefinierte Such-Plugin für WordPress. Es ist einfach zu bedienen, gibt Ihnen die vollständige Kontrolle über Ihre Suchergebnisse und ist genauer als die standardmäßige WordPress-Suche.

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

Nach der Aktivierung müssen Sie die Einstellungen » SucheWP Seite und klicken Sie dann auf den Menüpunkt ‚Lizenz‘.

SearchWP-Lizenzschlüssel eingeben

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 Neue Engine hinzufügen

Dadurch wird eine neue Suchmaschine namens „supplemental“ erstellt. Um den Namen zu ändern, müssen Sie auf die Schaltfläche „Quellen & Einstellungen“ klicken.

SearchWP ergänzende Suchmaschine

Dadurch gelangen Sie zu einer Seite, auf der Sie auch auswählen können, ob Sie nach Beiträgen, Seiten, Mediendateien, Kommentaren und Benutzern suchen möchten. Wir belassen die Standardeinstellungen wie sie sind.

Wir ändern den Namen der Suchmaschine in „Benutzerdefiniert“. Fahren Sie fort und geben Sie das in das Feld „Engine Label“ ein.

SearchWP-Engine-Label

Beachten Sie, dass die Option „Keyword Stems“ für Sie ausgewählt wurde. Dadurch werden Wortendungen bei einer Suche Ihrer Nutzer ignoriert, sodass die relevantesten Suchergebnisse angezeigt werden.

Stellen Sie sicher, dass Sie auf die Schaltfläche „Fertig“ klicken, wenn Sie fertig sind.

Die Einstellungsseite für die Suchmaschine enthält Abschnitte für Beiträge, Seiten, Medien und Benutzer. In jedem Abschnitt können Sie verschiedenen Beitragsattributen Priorität einräumen oder nur bestimmte Kategorien oder Tags in Ihre Suchergebnisse aufnehmen.

Sie können dies tun, indem Sie die Schieberegler „Attributrelevanz“ anpassen.

Diese ändern, wie die Suchmaschinen Inhalte bewerten und einordnen. Wenn Sie beispielsweise den Beitragstitel höher bewerten möchten als den Inhalt, können Sie den Schieberegler entsprechend anpassen.

Sie sollten jeden Abschnitt durcharbeiten und die gewünschten Anpassungen an den Schiebereglern vornehmen.

SearchWP-Attributrelevanz-Schieberegler

Sie können auch für jeden Abschnitt Regeln erstellen, die bestimmen, ob bestimmte Inhalte in den Suchergebnissen enthalten oder davon ausgeschlossen werden.

Sie können Ihren Besuchern beispielsweise ermöglichen, ganz einfach nach Inhalten zu demselben Thema zu suchen, über das sie gerade gelesen haben. Oder in einem Online-Shop können Sie Ihren Kunden helfen, schnell andere Produkte in derselben Kategorie zu finden.

Fahren Sie fort und klicken Sie im Abschnitt „Beiträge“ auf die Schaltfläche „Regeln bearbeiten“.

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

SearchWP-Bearbeitungsregeln

Möglicherweise möchten Sie Ihren Besuchern die Suche nach bestimmten Website-Kategorien ermöglichen. Sie können Ihren Archivseiten beispielsweise eine Kategoriesuchfunktion hinzufügen, damit Ihre Besucher schnell finden, wonach sie suchen.

Um zu erfahren, wie das geht, lesen Sie Methode 1 in unserer Schritt-für-Schritt-Anleitung zur Suche nach Kategorien in WordPress.

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

Klicken Sie auf die Schaltfläche Engines speichern

Hinzufügen des Suchformulars mit Shortcode

Die SearchWP Shortcodes Extension vereinfacht das Hinzufügen Ihres neuen benutzerdefinierten Post-Suchformulars zu Ihrer WordPress-Site.

Besuchen Sie einfach die SearchWP Shortcodes-Erweiterung Website und klicken Sie dann auf die Schaltfläche „Download mit aktiver Lizenz verfügbar“.

SearchWP Shortcodes-Erweiterung herunterladen

Danach müssen Sie die Erweiterung auf die gleiche Weise installieren und aktivieren, wie Sie das Plugin oben installiert haben.

Jetzt können Sie Ihren Beiträgen, Seiten und Widgets mithilfe von Shortcodes ein benutzerdefiniertes Suchformular hinzufügen. Wenn Sie noch keine Shortcodes verwendet haben, können Sie in unserem Anfängerleitfaden mehr darüber erfahren, wie Sie einen Shortcode in WordPress hinzufügen.

Bearbeiten Sie einfach einen Beitrag und platzieren Sie Ihren Cursor dort, wo Sie das Suchformular hinzufügen möchten. Klicken Sie danach auf das Plus ‚+‚ Blocksymbol hinzufügen, um das Blockmenü aufzurufen.

Einen benutzerdefinierten HTML-Block hinzufügen

Geben Sie als Nächstes „html“ in das Suchfeld ein und klicken Sie dann auf den Block „Benutzerdefiniertes HTML“, um es zum Beitrag hinzuzufügen.

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

[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>

Dieser Code fügt dem Beitrag Ihr benutzerdefiniertes Suchformular hinzu, erstellt einen Abschnitt zum Anzeigen der Suchergebnisse, zeigt bei Bedarf eine Meldung ohne Ergebnisse an und fügt eine Paginierung hinzu, wenn die Ergebnisse auf mehrere Seiten gehen.

Wenn Sie Ihrer Suchmaschine einen anderen Namen gegeben haben, müssen Sie ihn ändern engine=“custom” an vier Stellen zu Ihrem eigenen Motornamen.

Sie können den Text auf der Suchschaltfläche auch durch Bearbeiten in einen aussagekräftigeren Text ändern button_text=“Custom Search”. Der Rest des Codes kann gleich bleiben.

Stellen Sie sicher, dass Sie auf Veröffentlichen oder Aktualisieren klicken, um Ihren Beitrag zu speichern und zu veröffentlichen.

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

Um das Suchformular in Aktion zu sehen, sehen Sie sich einfach den Beitrag auf Ihrer WordPress-Website an. So sieht es auf unserer Demoseite mit dem Thema Twenty Twenty-One aus.

Vorschau des benutzerdefinierten Suchformulars von SearchWP

Hinzufügen von Live-Ajax-Suche

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

Beispiel für eine Live-Suchseite

Der einfachste Weg, um die Ajax-Live-Suche zu WordPress hinzuzufügen, ist die kostenlose SearchWP Live Ajax Lite Search-Plugin, da es die Live-Suche automatisch aktiviert.

Eine Schritt-für-Schritt-Anleitung zur Installation finden Sie in unserer Anleitung zum Hinzufügen einer Live-Ajax-Suche zu Ihrer WordPress-Site.

Verwenden der erweiterten Einstellungen für SearchWP

Nun sollten Sie zu navigieren Einstellungen » SucheWP und klicken Sie auf die Registerkarte Erweitert. Auf dieser Seite können Sie einige Einstellungen aktivieren, die es Ihren Benutzern erleichtern, das Gesuchte zu finden.

SearchWP Erweiterte Einstellungen

Aktivieren Sie eine dieser Optionen, die Sie möchten:

  • Bei teilweisen Übereinstimmungen werden auch Ergebnisse angezeigt, die nicht ganz mit dem gesuchten Begriff übereinstimmen.
  • Automatisch „Meinten Sie?“ Korrekturen schlagen einen etwas anderen Suchbegriff vor, der mehr Beiträgen auf Ihrer Website entspricht.
  • Die Unterstützung von „Suchen nach Zitaten/Phrasen“ ermöglicht es Ihren Benutzern, Anführungszeichen zu verwenden, wenn sie nach genauen Phrasen suchen.
  • Durch Hervorheben von Begriffen in den Ergebnissen können Ihre Besucher in den Suchergebnissen leichter finden, wonach sie suchen.

Das Suchformular und die Ergebnisseite gestalten

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

Sie können Ihr eigenes benutzerdefiniertes CSS hinzufügen, um die Stilregeln Ihres Themes zu überschreiben.

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

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

.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}

.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

Sie können die Formatierung im Code an Ihre eigene Site anpassen. Sie können auch alle Zeilen löschen, die Sie nicht ändern möchten. Wenn Sie beispielsweise die Höhe und Breite des Suchformulars nicht ändern möchten, löschen Sie diese Zeilen einfach.

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

SearchWP benutzerdefinierte CSS-Vorschau

Suchergebnisse messen und Conversions verbessern

Sobald Sie Ihr benutzerdefiniertes WordPress-Suchformular eingerichtet haben, besteht der nächste Schritt darin, die Ergebnisse zu messen.

SearchWP kommt mit a Erweiterung für Suchmetriken die Ihnen genau zeigt, wie Ihre Website-Suche abschneidet.

SearchWP-Metriken

Sie können die Suchmetriken auch verwenden, um die Suchergebnisse automatisch zu verbessern, indem Sie Ergebnisse mit mehr Klicks nach oben fördern.

E-Commerce-Websites implementieren auch Exit-Intent-Popups und gamifizierte Spin-A-Wheel-Kampagnen, um Benutzer auf Suchseiten anzusprechen, damit sie sich in E-Mail-Abonnenten und dann kurz darauf in Kunden verwandeln können.

OptinMonster-Spin, um Popup-Beispiel zu gewinnen

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, ein benutzerdefiniertes WordPress-Suchformular zu erstellen. Vielleicht möchten Sie auch unsere Expertenauswahl der besten geschäftlichen Telefondienste für kleine Unternehmen und unseren Vergleich der besten Domain-Registrare sehen.

Verwandter Beitrag

Die 8 besten Tools zur Optimierung von Online-Inhalten für WordPress (2023)

Die 2023 Apple Watch Series 9: Was Sie diesen Herbst von Apple erwarten können

So ersetzen Sie die Joystick-Kappen am DualSense Edge

NordVPN Standard vs. NordVPN Complete: Welches Bundle ist das Richtige für dich?

So erhalten Sie ChatGPT auf Ihrer Apple Watch

MARKIERTE: benutzerdefiniertes, ein, erstellen, für, Schritt, Sie, WordPressSuchformular
ThemeLocal November 19, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel So erstellen Sie zusätzliche Bildgrößen in WordPress
Nächster Artikel So fügen Sie rotierende Testimonials in WordPress hinzu (3 Möglichkeiten)
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Berühmter Post

Apple MacBook Pro mit M2 Pro erhält einen verlockenden Rabatt
Angebote
So drucken Sie Google Docs von iPhone und iPad – schnell und einfach (2023)
Wie man
Philips Serie 9000 Prestige im Test
Technische Bewertungen
So springen Sie mit dieser einfachen Geste zum Anfang einer App
Wie man
Currys hat gerade einen unumgänglichen iPad-Deal veröffentlicht
Angebote
Acer Aspire 3 im Test
Technische Bewertungen

También podría gustarte

Showcase

Die 8 besten Tools zur Optimierung von Online-Inhalten für WordPress (2023)

vor 24 Stunden 12 Minuten Mindestlesezeit
Guides

Die 2023 Apple Watch Series 9: Was Sie diesen Herbst von Apple erwarten können

vor 2 Tagen 5 Minuten Mindestlesezeit
Wie man

So ersetzen Sie die Joystick-Kappen am DualSense Edge

vor 2 Tagen 3 Minuten Mindestlesezeit
Gegen

NordVPN Standard vs. NordVPN Complete: Welches Bundle ist das Richtige für dich?

vor 2 Tagen 4 Minuten Mindestlesezeit
Wie man

So erhalten Sie ChatGPT auf Ihrer Apple Watch

vor 2 Tagen 2 Minuten Mindestlesezeit
Wie man

So laden Sie einen Film in eine Instax Mini-Kamera

vor 2 Tagen 2 Minuten Mindestlesezeit
Wie man

So fügen Sie AirPods hinzu, um mein iPhone einfach zu finden (2023)

vor 3 Tagen 5 Minuten Mindestlesezeit
Wie man

So fügen Sie Live-Fotos Looping- und Bouncing-Effekte hinzu

vor 3 Tagen 2 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?