So fügen Sie Live-Ajax-Suche ohne Plugin zu Ihrem WordPress hinzu
Veröffentlicht: 2022-08-01Suchen Sie nach einer Möglichkeit, Ihrer WordPress-Site eine Live-Ajax-Suche ohne Plugin hinzuzufügen?
Damit können Sie Ihren Besuchern sofort Suchergebnisse liefern und ihre Benutzererfahrung verbessern.
In diesem Leitfaden sprechen wir darüber, wie Sie Ihrer Website ohne Plugin eine Live-Suche hinzufügen können und welche Nachteile diese Methode hat.
Hier ist ein Inhaltsverzeichnis, das Ihnen die Navigation erleichtert:
- Warum Live-Suche zu Ihrer Website hinzufügen?
- Nachteile des Hinzufügens von Live-Ajax-Suche ohne Plugin
- Einfachste Methode zum Hinzufügen von Live-Ajax-Suche zu Ihrer Website
- So fügen Sie Live-Ajax-Suche ohne Plugin zu Ihrem WordPress hinzu
Lass uns anfangen!
Warum Live-Suche zu Ihrer Website hinzufügen?
Das Hinzufügen einer Live-Suche zu Ihrer Website ist aus mehreren Gründen hilfreich.
Erstens ist es für Ihre Besucher viel bequemer, sofortige Suchergebnisse zu erhalten, anstatt sie auf einer neuen separaten Seite zu sehen, auf der WordPress sie standardmäßig anzeigt.
Dadurch können sie Zeit sparen und schneller herausfinden, ob sich der gesuchte Inhalt auf Ihrer Website befindet oder nicht.
Zweitens hilft es Ihnen, Ihre Seitenaufrufe zu erhöhen, da Besucher, die eine positive Sucherfahrung auf Ihrer Website gemacht haben, diese mit größerer Wahrscheinlichkeit erneut verwenden.
Es ist auch eine großartige Möglichkeit, mehr Traffic von Suchmaschinen anzuziehen, da Google der durchschnittlichen Sitzungsdauer auf einer Website große Aufmerksamkeit schenkt.
Aber das Hinzufügen einer Live-Suche ohne ein Plugin könnte ein herausforderndes Ziel sein. Schauen wir uns genauer an, warum dies nicht die beste Option ist.
Nachteile des Hinzufügens von Live-Ajax-Suche ohne Plugin
Das Hauptproblem beim Hinzufügen der Live-Suche zu Ihrer Website ohne ein Plugin besteht darin, dass Sie Ihren Themencode bearbeiten müssen.
Dieser Ansatz hat einige schwerwiegende Nachteile, die Sie kennen sollten:
- Es erfordert Programmierkenntnisse . Sie müssen über Programmiererfahrung und ein tiefes Verständnis dafür verfügen, wie WordPress funktioniert, um Ihren Theme-Code erfolgreich zu bearbeiten.
- Es braucht mehr Zeit . Im Gegensatz zur Verwendung eines Plugins dauert die Bearbeitung Ihres Designcodes ziemlich lange, um herauszufinden, welche Änderungen Sie vornehmen müssen und wo Sie sie einfügen müssen.
- Es ist nicht zuverlässig . Sie können leicht alle Ihre Code-Anpassungen verlieren, wenn Sie Ihr Design oder Ihre WordPress-Version aktualisieren.
- Es ist nicht bequem . Ein Plugin bietet Ihnen viel mehr Flexibilität, da Sie die benötigten Funktionen entsprechend Ihren Anforderungen schnell aktivieren und deaktivieren können.
Wenn Sie also kein erfahrener WordPress-Benutzer oder Webentwickler sind, sollten Sie besser eine andere Möglichkeit nutzen, um Ihrer Website eine Live-Suche hinzuzufügen.
Nachdem wir das geklärt haben, sehen wir uns an, wie Sie Ihrer Website eine Live-Suche hinzufügen können, ohne Ihre Designdateien mit einem Plugin zu bearbeiten.
Einfachste Methode zum Hinzufügen von Live-Ajax-Suche zu Ihrer Website
Der einfachste Weg, Ihrer Website eine Live-Ajax-Suche hinzuzufügen, ist die Verwendung eines Plugins wie SearchWP.
SearchWP ist mit über 30.000 aktiven Installationen das beste WordPress-Such-Plugin auf dem Markt.
Damit können Sie die Live-Suche auf Ihrer Website mit nur wenigen Klicks aktivieren und deaktivieren, ohne dass eine Programmierung erforderlich ist.
Und das ist nur eine von vielen anderen SearchWP-Funktionen. Der Hauptzweck dieses Plugins besteht darin, Ihnen die vollständige Kontrolle über die Suche auf Ihrer Website zu geben.
Mit ihm können Sie beispielsweise die Reihenfolge der Suchergebnisse ändern, Post-Tags, Kategorien und benutzerdefinierte Felder durchsuchbar machen, benutzerdefinierte Suchformulare erstellen und vieles mehr.
Hier sind einige andere SearchWP-Funktionen, die Ihnen helfen werden, Ihr Geschäft auszubauen:
- Fuzzy-Suche aktivieren . So finden Ihre Besucher die richtigen Suchergebnisse, auch wenn sie sich bei einer Suchanfrage vertippt haben.
- Verfolgen Sie Suchanfragen bei Ihren Besuchern . Sammeln Sie umfassende Daten zur Suchaktivität auf Ihrer Website, einschließlich der beliebtesten Suchanfragen, der Anzahl der Klicks und mehr.
- Schließen Sie bestimmte Seiten aus den Suchergebnissen aus . Blenden Sie unnötige Seiten aus den Suchergebnissen auf Ihrer Website aus, damit Besucher die gesuchten Inhalte schneller finden können.
- PDF-Dateien in Suchergebnisse einbeziehen . Lassen Sie Ihre Besucher PDFs und Office-Dokumente über die Suchleiste auf Ihrer Website finden.
Lassen Sie uns sehen, wie Sie mit SearchWP die Live-Suche auf Ihrer Website aktivieren können.
Schritt 1: Installieren und aktivieren Sie SearchWP auf Ihrer Website
Um loszulegen, müssen Sie sich Ihre Kopie von SearchWP besorgen.
Wenn Sie fertig sind, gehen Sie zu Ihrem SearchWP-Dashboard und klicken Sie auf Downloads .
Drücken Sie dann die Schaltfläche Download SearchWP und speichern Sie die ZIP-Datei des Plugins auf Ihrem Computer.
Kopieren Sie nach dem Herunterladen Ihren SearchWP-Lizenzschlüssel auf derselben Seite. Sie benötigen es außerdem, um das Plugin auf Ihrer Website zu aktivieren.
Jetzt müssen Sie die SearchWP-ZIP-Datei auf Ihre Website hochladen und das Plugin installieren. Sehen Sie sich das Tutorial zur Installation eines WordPress-Plugins an, wenn Sie eine Erinnerung daran benötigen, wie das geht.
Nach der Installation von SearchWP müssen Sie die Kopie Ihres Plugins mit Ihrem Lizenzschlüssel aktivieren.
Bewegen Sie dazu Ihren Mauszeiger über die SearchWP- Schaltfläche im oberen Bereich Ihres WordPress-Dashboards und klicken Sie auf Lizenz aktivieren .

Nachdem Sie zur Lizenzseite gelangt sind, fügen Sie Ihren SearchWP -Lizenzschlüssel in das Lizenzfeld ein und klicken Sie auf Aktivieren .
Sobald Sie Ihre Lizenz aktiviert haben, können Sie mit dem nächsten Schritt fortfahren und die Live Search-Erweiterung installieren.
Schritt 2: Installieren Sie die SearchWP Live Search-Erweiterung
Durch die Installation dieser SearchWP-Erweiterung können Sie die Live-Ajax-Suche auf Ihrer Website mit wenigen Klicks aktivieren, ohne eine einzige Codezeile schreiben zu müssen.
Navigieren Sie zunächst zu SearchWP » Erweiterungen auf der linken Seite Ihres WordPress-Dashboards.
Suchen Sie dann die Live Search -Erweiterung und klicken Sie in ihrem Abschnitt auf Installieren .
Das ist es. Sie haben gerade erfolgreich eine Live-Ajax-Suche zu Ihrer Website hinzugefügt.
Mal sehen, wie es funktioniert.
Schritt 3: Testen Sie Ihre neue Suche
Gehen Sie dazu auf Ihre Website und führen Sie eine Suche durch.
So sieht beispielsweise eine Live-SearchWP-Ajax-Suche auf unserer Testseite aus:
Sehen wir uns nun an, wie Sie Ihrer Website ohne Plug-in eine Live-Suche hinzufügen können.
So fügen Sie Live-Ajax-Suche ohne Plugin zu Ihrem WordPress hinzu
Um Ihrer Website eine Live-Ajax-Suche hinzuzufügen, ohne ein Plugin zu verwenden, müssen Sie Änderungen an Ihren Designdateien vornehmen.
Erstellen Sie zunächst ein untergeordnetes Design Ihres aktuellen Designs, das Sie auf Ihrer Website verwenden.
Es ermöglicht Ihnen, schnell zu Ihrem übergeordneten Thema zu wechseln, wenn Sie etwas falsch machen und Ihre Website zum Absturz bringen.
Es empfiehlt sich auch, Ihre Website zu sichern, bevor Sie mit der Bearbeitung beginnen, nur für den Fall.
In diesem Tutorial erfahren Sie, wie Sie ein untergeordnetes WordPress-Theme erstellen, wenn Sie dabei Hilfe benötigen.
Nachdem Sie ein untergeordnetes Design erstellt haben, gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Aussehen » Designdatei-Editor .
Suchen Sie dann die Datei functions.php und klicken Sie darauf, um sie im Dateieditor zu öffnen.
Fügen Sie als Nächstes den folgenden Code in Ihre Datei functions.php ein:
<?php /* ================== Ajax Search ====================== */ // add the ajax fetch js add_action( 'wp_footer', 'ajax_fetch' ); function ajax_fetch() { ?> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20fetch()%7B%0A%0A%20%20%20%20jQuery.ajax(%7B%0A%20%20%20%20%20%20%20%20url%3A%20'%3C%3Fphp%20echo%20admin_url('admin-ajax.php')%3B%20%3F%3E'%2C%0A%20%20%20%20%20%20%20%20type%3A%20'post'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%20action%3A%20'data_fetch'%2C%20keyword%3A%20jQuery('%23keyword').val()%20%7D%2C%0A%20%20%20%20%20%20%20%20success%3A%20function(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20jQuery('%23datafetch').html(%20data%20)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <?php } // the ajax function add_action('wp_ajax_data_fetch' , 'data_fetch'); add_action('wp_ajax_nopriv_data_fetch','data_fetch'); function data_fetch(){ $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('page','post') ) ); if( $the_query->have_posts() ) : echo '<ul>'; while( $the_query->have_posts() ): $the_query->the_post(); ?> <li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></li> <?php endwhile; echo '</ul>'; wp_reset_postdata(); endif; die(); }
Wenn Sie fertig sind, drücken Sie Datei aktualisieren , um Ihre Änderungen zu speichern.
Das ist es. Sie haben Ihrer WordPress-Site erfolgreich eine Live-Ajax-Suche ohne Plugin hinzugefügt.
Es ermöglicht Ihren Besuchern, sofort Suchergebnisse zu erhalten und die Anzahl Ihrer Seitenaufrufe zu erhöhen.
Möchten Sie Ihrer Website mit wenigen Klicks eine Live-Suche ohne Programmierung hinzufügen? Hier können Sie mit SearchWP beginnen.
Sie fragen sich, wie Sie die Suche nach Post-Tags aktivieren können? Sehen Sie sich unser ausführliches Tutorial an, wie Sie Beiträge nach Tags in WordPress suchen.
Möchten Sie einige Beitragskategorien aus der Suche ausblenden? Folgen Sie der Anleitung zum Ausschließen von Kategorien aus der WordPress-Suche.