So erstellen Sie ein benutzerdefiniertes Suchformular in WordPress

Last updated 18. Oktober 2021

Inhalt

Erstellen Sie ein benutzerdefiniertes Suchformular

Möchten Sie ein benutzerdefiniertes Suchformular auf einer WordPress-Website erstellen? Früher haben wir Themen von Grund auf neu erstellt, damit wir den Abschnitten auf der Website unser eigenes Styling hinzufügen können. Vielleicht haben Sie ein ansprechendes Suchformular entworfen und möchten es nun in WordPress einfügen.

WordPress bietet eine Methode get_search_form(), die das Suchformular rendert. Wenn Sie diese Methode in Ihrem benutzerdefinierten Thema verwenden, erhalten Sie ein im WordPress-Core erstelltes Standardsuchformular. Und Sie möchten nicht das Standardsuchformular, da Ihr Formularentwurf anders ist. Um diese Situation zu umgehen, müssen Sie ein benutzerdefiniertes Suchformular erstellen, das das Standardformular überschreibt.

Durch das Erstellen eines benutzerdefinierten Suchformulars können Sie Ihr eigenes Markup und Styling hinzufügen. In diesem Artikel zeige ich Ihnen, wie Sie ein benutzerdefiniertes Suchformular in WordPress erstellen.

Die Methode get_search_form()sucht nach einer searchform.phpDatei im Verzeichnis Ihres aktiven Themes. Wenn diese Datei nicht existiert, verwendet WordPress das Standardsuchformular, das im Kern enthalten ist.

Erstellen Sie ein benutzerdefiniertes Suchformular

Erstellen Sie eine searchform.phpDatei im Verzeichnis Ihres aktiven Themas. Fügen Sie in dieser Datei Ihr Markup des Suchformulars hinzu. Zum Beispiel sieht in meinem Fall das Suchformular wie folgt aus.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/') ); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
    <input type="submit" value="Search">
</form>

Der obige Code enthält nichts Ausgefallenes oder Komplexes. Ich habe dem Formular-Tag die ID ‘searchform’ und dem Suchtextfeld die Klasse ‘search-field’ gegeben. Mit dieser ID und Klasse kann ich dem Suchformular Styling hinzufügen. So müssen Sie in Ihrem Fall Ihr eigenes Markup verwenden.

Suchformular anzeigen

Der nächste Schritt ist die Anzeige des Suchformulars auf der Website. Sie können das Suchformular in der Seitenleiste, in der Kopfzeile, neben dem Menü usw. platzieren.

Mit der Funktion get_search_form()kann man sein Suchformular überall auf der Website anzeigen. Sie müssen diese Methode lediglich an der Stelle aufrufen, an der Sie das Suchformular anzeigen möchten.

<?php get_search_form(); ?>

Nachdem Sie den obigen Code an der gewünschten Stelle platziert haben, gehen Sie zum Browser. Sie sollten nun Ihr Suchformular auf der Website sehen.

Suchergebnis anpassen

Es kann sein, dass Ihre Website mehr Ressourcen wie Bücher, Zeitschriften, E-Books, PDFs usw. enthält und Sie Inhalte aus all diesen Ressourcen im Suchergebnis anzeigen müssen. Es kann leicht gemacht werden.

Angenommen, Sie haben benutzerdefinierte Beitragstypen für all diese Ressourcen, müssen Sie im Suchformular für jeden Beitragstyp ein ausgeblendetes Feld hinzufügen.

Angenommen, Sie haben für die oben genannten Ressourcen benutzerdefinierte Beitragstypen Buch, Zeitschrift, E-Book, PDF erstellt. Dann sehen Ihre ausgeblendeten Felder wie folgt aus.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/') ); ?>">
    <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>">
    <input type="hidden" name="post_type[]" value="book" />
    <input type="hidden" name="post_type[]" value="magazine" />
    <input type="hidden" name="post_type[]" value="ebook" />
    <input type="hidden" name="post_type[]" value="pdf" />
    <input type="submit" value="Search">
</form>

Wenn nun jemand ein Schlüsselwort in das Suchformular eingibt, sucht WordPress in allen oben genannten Beitragstypen nach diesem Schlüsselwort, um das Ergebnis abzugleichen.

Ich hoffe, Sie verstehen, wie Sie ein benutzerdefiniertes Suchformular in WordPress erstellen. Ich würde gerne Ihre Gedanken und Vorschläge im Kommentarbereich unten hören.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net