3 Möglichkeiten, ein großartiges benutzerdefiniertes WordPress-Suchformular zu erstellen

Veröffentlicht: 2022-11-23

WordPress ist das weltweit beliebteste Content-Management-System (CMS). Es ist nicht nur ein leistungsstarkes und superflexibles Werkzeug, sondern auch extrem einfach zu bedienen. Personen ohne Erfahrung in Webdesign oder Programmierung können WordPress verwenden, um ihre Website in wenigen Minuten zu starten.

Benutzer besuchen Ihre WordPress-Site, um nach den Inhalten zu suchen, an denen sie interessiert sind. Eine Suchleiste kann ihnen dabei helfen. Wenn Ihre Website keine hat, wird es für die Leute schwierig sein, die Inhalte zu finden, nach denen sie suchen. Diese Frustration führt dazu, dass Leute Ihre Website verlassen und woanders hingehen.

Das geht nicht!

In diesem Artikel zeigen wir Ihnen, wie Sie ein benutzerdefiniertes WordPress-Suchformular in Ihre Website integrieren.

  • Was ist ein benutzerdefiniertes WordPress-Suchformular?
  • #1 Wenden Sie ein Plugin an
  • #2 Code ändern
  • #3 Verwenden Sie benutzerdefiniertes CSS, um das Suchformular und die Ergebnisseite zu gestalten

Was ist ein benutzerdefiniertes WordPress-Suchformular?

WordPress hat bereits eine native Suchfunktion eingebaut. Das Standard-Suchwerkzeug ist jedoch ziemlich eingeschränkt und nicht sehr „intelligent“. Es findet nicht immer den Inhalt, nach dem Sie suchen möchten.

Die standardmäßige WordPress-Suchfunktion reicht für neue oder kleine Webseiten mit wenig Inhalt aus.

Aber wenn Ihre Inhaltsdatenbank wächst, ist die Installation eines besseren Suchwerkzeugs wichtig, um Besuchern die Navigation auf Ihrer Website zu erleichtern. Wenn Sie eine E-Commerce-Website betreiben, ist ein gutes Suchwerkzeug noch wichtiger. Es hilft, potenzielle Kunden zu den Produkten zu führen, die für sie geeignet sind.

Möglicherweise möchten Sie auch, dass Ihr Suchtool die Ergebnisse in einer bestimmten Reihenfolge anzeigt. Zum Beispiel die beliebtesten Artikel oder Artikel zuerst. Das Standard-Suchwerkzeug lässt dies nicht zu. Stattdessen müssen Sie den Suchalgorithmus manuell bearbeiten.

Zu guter Letzt kann ein benutzerdefiniertes Suchwerkzeug stilisiert werden, um die Ästhetik oder Marke Ihrer Website widerzuspiegeln!

pfo-benutzerdefiniertes-wordpress-suchformular-beispiel

Was ist die get_search_form-Funktion?

get_search_form bezieht sich auf eine Funktion, die das Suchformular auf Ihrer Website anzeigt. Sie finden es auf der Registerkarte „ Darstellung “ > „ Widgets “ in Ihrem WordPress-Adminbereich.

Es regelt das Suchformular-Widget und jede andere Seite Ihrer Website, die eine Suchfunktion benötigt. Ohne diese Funktion ist Ihre Website so gut wie ohne Suchfunktion.

So passen Sie das Suchformular in WordPress an

Es gibt viele verschiedene Ansätze, mit denen Sie das Suchformular in WordPress anpassen können. Es hängt von Ihren Programmierkenntnissen ab und davon, wie viel Zeit Sie bereit sind, für diese Aufgabe aufzuwenden.

#1 Wenden Sie ein Plugin an

Ein Plugin ist der einfachste und schnellste Weg, um ein benutzerdefiniertes WordPress-Suchformular auf Ihrer Website zum Laufen zu bringen. Ivory Search zum Beispiel ist ein kostenloses Plugin, das speziell entwickelt wurde, um die Funktion des WordPress-Suchwerkzeugs zu verbessern. Sie können neue Suchformulare hinzufügen und bearbeiten und verschiedene Arten von Suchen durchführen.

Außerdem können Sie mit Shortcodes die Suchleiste an einer beliebigen Stelle auf der Website positionieren (z. B. in der Kopfzeile, Fußzeile, Menüleiste usw.).

pfo-ivory-search-plugin

Es ist ein einfaches Tool, das wir sehr empfehlen, wenn Sie nicht viel Programmiererfahrung haben. Obwohl es nicht so vielseitig ist wie das Programmieren eines Suchwerkzeugs, sollte es für die grundlegende Verwendung ausreichen.

#2 Code ändern

Es gibt zwei Möglichkeiten, ein Suchformular von Grund auf direkt in den .php-Kerndateien Ihrer WordPress-Site zu erstellen: entweder mit einer Funktion oder mit einer Vorlage.

Mit einer Funktion

Sie können das standardmäßige WordPress-Suchwerkzeug durch ein benutzerdefiniertes ersetzen, indem Sie den add_filter- Hook verwenden. Fügen Sie in Ihrer Datei functions.php den folgenden Code zum Stack hinzu:

 Funktion custom_search_form( $form ) {
$form = '<form role="search" method="get" class="searchform" action="' . home_url( '/' ) . '" >
<div class="custom-form"><label class="screen-reader-text" for="s">' . __( 'Suche:' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" />
<input type="submit" value="'. esc_attr__( 'Search' ) .'" />
</div>
</form>';
$form zurückgeben;
}

add_filter( 'get_search_form', 'custom_search_form', 40 );

Dieser Code speichert Ihr benutzerdefiniertes Formular in der $form- Variablen, die dank des add_filter -Hooks das standardmäßige WordPress-Suchtool ersetzt.

Sie können den obigen Code weiter anpassen, indem Sie die Beschriftungen, Texte, IDs und andere Elemente im Wert der $form- Variablen bearbeiten.

Mit Schablone

Wenn Sie die Datei functions.php nicht ändern können, können Sie alternativ eine Vorlage für das Suchformular verwenden. Erstellen Sie ein benutzerdefiniertes WordPress-Suchformular und fügen Sie es dann als searchform.php in Ihrem Hauptverzeichnis hinzu. WordPress verwendet automatisch das benutzerdefinierte Suchformular anstelle des Standardformulars.

Öffnen Sie dazu die IDE Ihrer Wahl und erstellen Sie eine neue Datei. Nennen Sie es „Suchformular.php“ . Fügen Sie den folgenden Code in den Editor ein:

 <?php
/* Benutzerdefiniertes Suchformular */
?>
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3">
<div class="input-group">
<input type="search" class="form-control border-0" placeholder="Search" aria-label="search nico" name="s" value="<?php echo esc_attr( get_search_query() ); ? >">
<div class="input-group-append">
<span class="input-group-append p-0">
<i class="fas fa-search text-muted"></i>
</span>
</div>
</div>
</form>

Ändern Sie den obigen Code nach Ihren Wünschen!

#3 Verwenden Sie benutzerdefiniertes CSS, um das Suchformular und die Ergebnisseite zu gestalten

Nachdem Sie Ihre benutzerdefinierte Suchfunktion eingerichtet und ausgeführt haben, besteht der nächste Teil darin, sie zu gestalten. Der Standard-Look ist ziemlich langweilig mit den weißen Textfeldern in 08/15-Sans-Serif-Schriftarten.

Wenn Sie das ändern möchten, gehen Sie am besten durch ein paar CSS-Codezeilen.

Diese CSS-Codevorlage ist mit der überwiegenden Mehrheit der WordPress-Designs kompatibel. Kopieren Sie es einfach und fügen Sie es über Ihr WordPress-Admin-Panel ein.

 .Suchformular {
Schriftfamilie: Arial;
Schriftgröße: 16px;
Hintergrund:#ace5e3;
Farbe:#ffffff;
Rand: 1px fest #61c3c0;
Polsterung: 10px;
Höhe: 90px;
Breite: 600 Pixel;
}

.Suchergebnisse {
Schriftfamilie: Arial;
Schriftgröße: 16px;
Hintergrund:#ace5e3;
Farbe:#000000;
Rand: 1px fest #61c3c0;
Polsterung: 10px;
Breite: 600 Pixel;
}

Ändern Sie die Variablen im Code nach Ihren Wünschen. Sie können Schriftart, Schriftgröße, Hintergrundfarbe, Rahmen usw. auswählen. Wenn Sie ein Element im Code nicht ändern möchten, löschen Sie einfach diese Zeile.

Wenn Sie zum Beispiel die Schriftfamilie Ihres Suchformulars nicht ändern möchten, dann löschen Sie einfach das „font-family:arial;“ Linie.

Erstellen Sie noch heute Ihr eigenes benutzerdefiniertes WordPress-Suchformular!

Die meisten Menschen kommen mit einem einfachen Suchformular aus, das von einem Plugin generiert wird. Wenn Sie jedoch etwas geschickter im Programmieren sind und erweiterte Funktionen in das Suchformular Ihrer Website integrieren möchten, können sich die obigen Codevorlagen als nützlich erweisen.

Ein benutzerdefiniertes WordPress-Suchformular ist eine ziemlich einfache Funktion, die jedoch sehr effektiv ist, um Ihre Website benutzerfreundlicher zu machen. Eine Formularsuche nach benutzerdefinierten Feldern in WordPress kann Ihnen dabei helfen, mehr Besucher anzuziehen, sie in Stammkunden umzuwandeln und – wenn Sie eine E-Commerce-Website betreiben – in zahlende Kunden.

Hier erfahren Sie mehr über das Hinzufügen einer intelligenten WooCommerce-Produktsuche.

Wir hoffen, dass dieser Leitfaden hilfreich war und dass Sie Ihr benutzerdefiniertes Suchformular bereits zum Laufen gebracht haben, wenn Sie dies lesen!