So fügen Sie einen Ajax-Taxonomie-Filter zur WordPress-Suche hinzu

Die Standard-WordPress-Suche liefert Besuchern eine lange Liste von Beiträgen, ohne Möglichkeit zur Einschränkung.

Wenn sie nicht nach Kategorie, Tag oder Beitragstyp filtern können, geben die meisten auf und kehren zu Google zurück.

Das Hinzufügen eines Ajax-Taxonomie-Filters zur WordPress-Suche behebt dieses Problem. Es ermöglicht Besuchern, Ergebnisse sofort nach Kategorie, Tag, benutzerdefiniertem Feld oder Beitragstyp einzugrenzen, was zu einer benutzerfreundlicheren Erfahrung führen kann.

In diesem Leitfaden zeige ich Ihnen, wie Sie Ihrer WordPress-Website einen Ajax-Taxonomie-Filter hinzufügen. Am Ende können Sie Ihren Besuchern eine schnelle, intuitive Sucherfahrung bieten.

Warum Ajax Taxonomies Filter in der WordPress-Suche verwenden?

Ajax-gestützte Suche ist schneller und bietet eine bessere Benutzererfahrung als die Standard-WordPress-Suchfunktion. Ajax bedeutet, dass sich die Ergebnisse in Echtzeit auf der Seite aktualisieren, ohne dass die gesamte Seite neu geladen werden muss.

Zum Beispiel könnte eine Autohaus-Website benutzerdefinierte Taxonomien für Fahrzeugtypen, Preisspannen, Modelle und mehr haben. Mit Ajax-Filtern können Besucher ihre Optionen schnell eingrenzen und genau das finden, was sie brauchen, ohne die Seite neu laden zu müssen.

Sie können ähnliche Filter zu Ihrer eigenen WordPress-Website hinzufügen, um die Navigation zu verbessern und Benutzern zu helfen, Inhalte leichter zu finden.

Hinter den Kulissen erleichtern WordPress-Taxonomien (wie Kategorien und Tags) auch Website-Besitzern die Organisation von Inhalten auf strukturierte Weise.

Die Standard-WordPress-Suche ist jedoch nicht sehr leistungsfähig und bietet unter anderem nicht die Möglichkeit, Inhalte basierend auf Taxonomien zu filtern. Wenn Sie benutzerdefinierte Taxonomien auf Ihrer Website verwenden, schneidet die Standard-Suche noch schlechter ab.

Hier benötigen Sie ein WordPress-Plugin, das Ihnen hilft. In den folgenden Abschnitten werde ich zwei Methoden behandeln, wie Sie einen Ajax-Taxonomie-Filter zu einer WordPress-Suche hinzufügen.

Die erste Methode verbessert den WordPress-Suchalgorithmus selbst, sodass er Taxonomien in die Suchergebnisse einbezieht. Die zweite Methode fügt eine sichtbare Ajax-Filter-UI hinzu, die sich nahtlos in die erste Methode integriert, sodass Besucher Ergebnisse mit einem Klick eingrenzen können.

Klicken Sie einfach auf die unten stehenden Links, um zu Ihrem bevorzugten Abschnitt zu springen:

Bereit? Legen wir los.

Methode 1: Ajax-Taxonomien zur WordPress-Suche mit SearchWP hinzufügen

Der einfachste Weg, Ajax-Taxonomien zur WordPress-Suche hinzuzufügen, ist die Verwendung von SearchWP. Es ist das beste Such-Plugin für WordPress und erleichtert es den Benutzern, auf Ihrer Website zu finden, wonach sie suchen.

Es geht über die reine Verwendung von Inhalten Ihrer Blogbeiträge und Seiten hinaus, um Dinge nachzuschlagen. SearchWP verwendet benutzerdefinierte Felder, Taxonomien, WooCommerce-Produktattribute, Textdateien, benutzerdefinierte Tabellen und mehr.

Weitere Informationen zum Plugin finden Sie in unserem ausführlichen SearchWP-Testbericht.

Schritt 1: Registrieren Sie sich bei SearchWP

Besuchen Sie zunächst die SearchWP-Website und registrieren Sie sich für ein Konto. Der Standardplan (99 $/Jahr, 1 Website) deckt alles ab, was Sie für diese Methode benötigen.

Wenn Sie eine Filter-UI im Frontend hinzufügen möchten (Methode 2 unten verwendet WPFilters, ebenfalls von SearchWP), beinhaltet das All Access Bundle (399 $/Jahr) beide Plugins und spart Ihnen die Kosten für den separaten Kauf.

Danach können Sie das Plugin herunterladen und auf Ihrer Website installieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung müssen Sie im WordPress-Admin-Bereich zu SearchWP » Einstellungen navigieren. Geben Sie hier einfach den Lizenzschlüssel ein, den Sie leicht in Ihrem Konto finden können.

Schritt 2: Erstellen Sie Ihren Suchalgorithmus

Gehen Sie nun im WordPress-Dashboard zu SearchWP » Algorithmus.

Von hier aus können Sie die Suchrelevanz für Ihre Website bearbeiten. Sie können beispielsweise die Gewichtung für Titel, Inhalt, Slug und Auszug erhöhen, damit Benutzer finden, wonach sie suchen.

Um Taxonomien zur Suchrelevanz hinzuzufügen, können Sie auf die Schaltfläche „Attribute hinzufügen/entfernen“ klicken.

Dies öffnet ein neues Fenster.

Sie können auf das Dropdown-Menü „Taxonomien“ klicken und auswählen, ob Sie Kategorien, Tags, Formate oder alle davon in die WordPress-Suche einbeziehen möchten.

Vergessen Sie nicht, nach der Auswahl der Taxonomien auf die Schaltfläche „Fertig“ zu klicken.

Sie sollten nun die Taxonomien für Ihren WordPress-Algorithmus für die Suche nach Blogbeiträgen sehen. Sie können den Schieberegler verwenden, um ihre Relevanz in WordPress-Suchen zu erhöhen.

Sie können auch auf die Schaltfläche „Regel bearbeiten“ klicken, um zu bestimmen, welche Inhalte in den Suchergebnissen angezeigt werden können und welche nicht.

Zum Beispiel wird SearchWP alle Kategorien auf Ihrer Website einschließen. Sie können Kategorien entfernen, aus denen Sie keine Inhalte anzeigen möchten, oder mehrere Bedingungen hinzufügen, um die Suchergebnisse anzupassen.

Vergessen Sie nicht, auf die Schaltfläche „Fertig“ zu klicken, wenn Sie fertig sind.

Sie können nun den Suchalgorithmus für Ihre Seiten, Mediendateien, WooCommerce-Produkte und mehr bearbeiten, damit sie in SearchWP angezeigt werden.

Wenn ein Besucher nun auf Ihrer Website nach Seiten und Beiträgen sucht, wird SearchWP Taxonomien in den Suchprozess einbeziehen.

Methode 2: Hinzufügen einer Frontend-Filter-UI mit WPFilters

Methode 1 hat den WordPress-Suchalgorithmus auf der Backend-Seite Taxonomie-bewusst gemacht. Methode 2 fügt die sichtbare Filter-UI hinzu, mit der Besucher im Frontend interagieren.

WPFilters ist die natürliche Ergänzung – es wurde vom selben SearchWP-Team entwickelt und integriert sich sofort mit SearchWP. Es verfügt über einen Drag-and-Drop-Builder, sodass Sie Checkboxen, Dropdowns, Schieberegler und Suchfilter einrichten können, ohne Code anfassen zu müssen. Es unterstützt auch Advanced Custom Fields und jeden benutzerdefinierten Post-Typ, was es zu einer guten Wahl macht, wenn Sie benutzerdefinierte Inhalte auf Ihrer Website erstellt haben.

Wenn Sie das WPFilters-Element in der Seitenleiste Ihrer Suchergebnisse platzieren (oder in einem beliebigen Widget-Bereich, der auf der Suchergebnisseite angezeigt wird), können Besucher die Ergebnisse von SearchWP in Echtzeit und ohne Seitenneuladung eingrenzen.

Weitere Details finden Sie in unserem vollständigen WPFilters-Testbericht.

Schritt 1: Installieren des WPFilters-Plugins

Um zu beginnen, müssen Sie ein WPFilters-Konto erstellen auf der SearchWP-Website. WPFilters wird vom Team bei SearchWP entwickelt, daher integriert es sich nativ in die gerade abgeschlossene SearchWP-Einrichtung in Methode 1.

Wenn Sie in Methode 1 das SearchWP All Access Bundle gekauft haben, ist WPFilters bereits in Ihrem Abonnement enthalten – laden Sie einfach die WPFilters ZIP-Datei aus Ihrem SearchWP-Konto herunter und springen Sie zu Schritt 2.

Andernfalls klicken Sie auf der WPFilters-Produktseite auf die Schaltfläche „WPFilters jetzt holen“, wählen Sie einen Plan und schließen Sie den Kauf ab. Der Standardplan (49 $/Jahr, 1 Website) deckt alles ab, was Sie für dieses Tutorial benötigen.

Nach der Registrierung sollten Sie die Plugin-ZIP-Datei auf Ihren Computer herunterladen und Ihren Lizenzschlüssel kopieren.

Als Nächstes installieren und aktivieren Sie das Plugin auf Ihrer WordPress-Website.

Gehen Sie in Ihrem WordPress-Adminbereich zu Plugins » Plugin hinzufügen.

Als Nächstes können Sie auf die Schaltfläche „Plugin hochladen“ klicken.

Klicken Sie im Datei-Uploader einfach auf die Schaltfläche „Datei auswählen“, um Ihre WPFilters-ZIP-Datei von Ihrem Computer hochzuladen. Klicken Sie auf „Jetzt installieren“ und dann auf „Aktivieren“, wenn es erscheint, um die Installation abzuschließen.

Details finden Sie in unserer Einsteigeranleitung zur Installation eines WordPress-Plugins.

Sobald das Plugin aktiv ist, führt Sie WPFilters durch einen Einrichtungsassistenten, um die Ersteinrichtung abzuschließen. Ich empfehle, jeden Schritt sorgfältig zu befolgen, damit das Plugin einsatzbereit ist, bevor Sie mit der Erstellung Ihrer Filter beginnen.

Wenn das erledigt ist, können Sie auf „Speichern und abschließen“ klicken.

Schritt 2: Einrichten von Ajax-Taxonomie-Filtern

Jetzt ist es an der Zeit, Ihren ersten Filter zu erstellen.

Gehen Sie in Ihrem WordPress-Dashboard zu WPFilters » Elemente und klicken Sie auf „Neu hinzufügen“, um ein neues Filterelement zu erstellen.

Sie werden aufgefordert, Ihrem Filterelement einen Namen zu geben.

Wählen Sie etwas Beschreibendes, das Ihnen hilft, es später zu identifizieren, wie z. B. „Kategorie-Filter“ oder „Produkttyp-Filter“.

Als Nächstes müssen Sie einen Filtertyp auswählen.

WPFilters bietet Ihnen verschiedene Anzeigeoptionen zur Auswahl, darunter:

• Kontrollkästchen – ideal, damit Benutzer mehrere Optionen gleichzeitig auswählen können
• Optionsfelder – ideal, wenn Benutzer nur eine Option auswählen sollen
• Dropdowns – eine kompakte Option, die gut funktioniert, wenn Sie viele Filterauswahlen haben
• Dropdown (Mehrfachauswahl) – Ermöglicht Benutzern die Auswahl von mehr als einer Option aus einer einzigen Dropdown-Liste
• Suche – Fügt ein Suchfeld hinzu, damit Benutzer schnell finden können, was sie brauchen
• Schieberegler – Ideal für die Auswahl von Bereichen, wie z. B. Preise oder andere numerische Werte
• Zurücksetzen-Schaltfläche – Ermöglicht Benutzern, alle angewendeten Filter mit einem Klick zu löschen

Für dieses Tutorial verwenden wir den Filtertyp Kontrollkästchen, da er es den Benutzern ermöglicht, mehrere Kategorien oder Schlagwörter gleichzeitig auszuwählen. Dies gibt ihnen die größte Flexibilität bei der Eingrenzung ihrer Suche.

Die anderen Filtertypen eignen sich für unterschiedliche Aufgaben: Verwenden Sie einen Schieberegler für Preisbereiche oder numerische Werte, ein Dropdown, wenn eine Taxonomie 10+ Begriffe hat und der vertikale Platz knapp ist, Optionsfelder für Attribute mit Einzelwerten wie der Sortierreihenfolge und Suche, wenn es zu viele Begriffe gibt, um sie visuell zu scannen.

Wenn Sie mit dem Filtertyp zufrieden sind, scrollen Sie nach unten zum Abschnitt „Datenquelle“. Hier verbinden Sie Ihren Filter mit einer tatsächlichen Taxonomie auf Ihrer Website.

Sie können aus allen auf Ihrer WordPress-Website verfügbaren Taxonomien auswählen, wie z. B.:

• Kategorien – die Standard-WordPress-Inhaltskategorien
• Schlagwörter – die Standard-WordPress-Schlagwörter
• Benutzerdefinierte Taxonomien – alle benutzerdefinierten Taxonomien, die Sie für Ihre Website erstellt haben

Ich empfehle, sich hier einen Moment Zeit zu nehmen, um darüber nachzudenken, welche Taxonomie für Ihre Besucher am sinnvollsten ist. Die richtige Auswahl macht Ihren Filter für die Personen, die Ihre Website durchsuchen, wesentlich nützlicher und intuitiver.

Schritt 3: Anpassen Ihres Filterelements

Nachdem Sie Ihren Filter eingerichtet und mit einer Taxonomie verbunden haben, ist es an der Zeit, anzupassen, wie er auf Ihrer Website aussieht und sich verhält. WPFilters bietet Ihnen eine gute Auswahl an Anzeigeoptionen, die Ihnen helfen, den Filter an das Design Ihrer Website und die Bedürfnisse Ihrer Besucher anzupassen.

Im Abschnitt „Container“ finden Sie Optionen wie:

• Titel anzeigen – zeigt eine Überschrift über Ihrem Filter an, damit Besucher wissen, wonach sie filtern.
• Ein-/ausklappbare Elemente – ermöglicht es Besuchern, den Filter zu erweitern oder zu reduzieren. Dies ist nützlich, wenn Sie mehrere Filter auf einer Seite haben.
• Mehr/weniger anzeigen – zeigen Sie einen Link „Mehr anzeigen“ an, um Ihre Liste zu reduzieren, wenn sie zu lang ist.
• Mehr anzeigen nach – wenn Sie „Mehr/weniger anzeigen“ aktivieren, können Sie die Anzahl der Elemente angeben, die zunächst angezeigt werden sollen, bevor der Link angezeigt wird.
• Horizontales Layout – ordnet Ihre Filteroptionen nebeneinander statt übereinander an, was gut für breitere Layouts funktionieren kann.

Schalten Sie die gewünschten Optionen ein.

Als Nächstes können Sie anpassen, wie Ihre Filter-Elemente angezeigt werden, z. B.:

• Anzahl der Elemente – zeigt die Anzahl der verfügbaren Beiträge unter jedem Filterbegriff an, damit Besucher wissen, was sie erwartet, bevor sie klicken.
• Leere anzeigen – wählen Sie aus, ob Taxonomiebegriffe angezeigt werden sollen, die keine übereinstimmenden Inhalte haben.
• Hierarchisch – die Aktivierung der hierarchischen Anzeige erleichtert den Lesern die Navigation durch Ihre Inhalte erheblich, was die Benutzererfahrung verbessern kann.

Hier ist, was Sie auf dem Bildschirm sehen:

Wenn Sie mit Ihren Einstellungen zufrieden sind, klicken Sie auf „Speichern“, um Ihre Filterkonfiguration zu speichern.

Ihr Filter-Element kann dann zu jedem Beitrag oder jeder Seite auf Ihrer WordPress-Website hinzugefügt werden.

Wenn Sie ein weiteres WPFilters-Element erstellen möchten, können Sie den Vorgang einfach wiederholen.

Schritt 4: Einbetten Ihrer Filter in WordPress

Nachdem Ihr Filter-Element gespeichert wurde, ist es an der Zeit, es zu Ihrer Website hinzuzufügen, damit Besucher es tatsächlich nutzen können.

Für die in Methode 1 eingerichtete Kombination aus SearchWP + WPFilters ist die nützlichste Platzierung das Seitenleisten-Widget auf Ihrer Suchergebnisseite – dort erscheinen die Suchergebnisse von SearchWP, und der Filter wird sie in Echtzeit eingrenzen, während die Besucher klicken.

WPFilters bietet Ihnen drei Platzierungsoptionen:

• Seitenleisten-Widget (empfohlen für die Filterung von Suchergebnissen) – erscheint auf jeder Seite, die Ihre Seitenleiste verwendet, einschließlich der Suchergebnisseite.
• Gutenberg-Block – platzieren Sie den Filter auf einer bestimmten Seite (gut, wenn Sie auch gefilterte Archivseiten wünschen, wie eine Landingpage „Nach Kategorie durchsuchen“).
• Shortcode – fügen Sie ihn überall ein, wo ein Shortcode unterstützt wird, einschließlich Page Buildern und klassischen Widgets.

Um den Filter zu Ihrer Seitenleiste hinzuzufügen, gehen Sie in Ihrem Admin-Bereich zu Darstellung » Widgets.

Suchen Sie von hier aus in der Liste der verfügbaren Widget-Bereiche nach der Seitenleiste Ihres Themes (z. B. eine primäre Seitenleiste oder eine Such-Seitenleiste). Klicken Sie darauf, um sie zu erweitern und vorhandene Widgets anzuzeigen.

Klicken Sie als Nächstes auf das Plus-Symbol, um ein neues Widget hinzuzufügen, und fügen Sie dann das WPFilters Element-Widget hinzu.

Wählen Sie im Bereich Element-Einstellungen Ihren Filter aus dem Dropdown-Menü aus.

Sie können mehrere Filter-Widgets hinzufügen, wenn Sie mehr Filteroptionen anbieten möchten (ein Widget pro Taxonomie funktioniert gut – z. B. ein Kategorie-Filter und ein Tag-Filter nebeneinander).

Nachdem Sie Ihren Filter ausgewählt haben, klicken Sie auf „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen zu speichern.

Ihr Ajax-Taxonomie-Filter wird nun in der Seitenleiste Ihrer Suchergebnisseite angezeigt und ermöglicht es Besuchern, die Ergebnisse von SearchWP in Echtzeit zu verfeinern.

Bonus-Tipps: Weitere Dinge, die Sie mit SearchWP tun können

Sobald Sie die Ajax-Taxonomie-Filterung hinzugefügt haben, gibt es noch weitere Möglichkeiten, Ihre WordPress-Suche mit SearchWP zu verbessern. Hier sind einige zusätzliche Funktionen, die einen Blick wert sind:

🌫️ Verwenden Sie Fuzzy-Suche für bessere Übereinstimmungen

Standardmäßig sucht WordPress nur nach exakten Übereinstimmungen. Das bedeutet, wenn ein Besucher ein Wort falsch schreibt oder eine leicht abweichende Formulierung verwendet, findet er möglicherweise nicht, wonach er sucht.

Fuzzy Search löst dieses Problem, indem es Ergebnisse anzeigt, die gut genug sind, wie z. B. Tippfehler oder ähnliche Wortformen. Es ist eine einfache Möglichkeit, Ihre WordPress-Suche anzupassen, um sie intelligenter zu machen.

Siehe unseren Leitfaden zur Fuzzy-Suche in WordPress für weitere Details.

📄 Machen Sie PDF-Dateien durchsuchbar

Wenn Sie PDFs auf Ihrer Website teilen, wie z. B. Handbücher, E-Books oder Broschüren, kann SearchWP den Inhalt dieser Dateien indizieren. Das bedeutet, dass Suchergebnisse, wenn jemand Ihre Suchleiste verwendet, das enthalten können, was in den PDFs steht, nicht nur die Dateinamen.

Es ist besonders nützlich für Geschäfts-Websites, inhaltsreiche Blogs und sogar Schulen.

Erfahren Sie mehr in unserem Leitfaden zur Indizierung und Suche von PDFs in WordPress.

🛍️ Verbessern Sie die Produktsuche in WooCommerce

Wenn Sie einen Online-Shop betreiben, kann SearchWP auch Ihre Produktsuche verbessern.

Anstatt sich auf die Standard-Suche von WooCommerce zu verlassen, können Sie eine intelligentere Produktsuche erstellen, die Titel, Kategorien, Tags oder sogar benutzerdefinierte Felder priorisiert. Dies hilft Kunden, das richtige Produkt schneller zu finden, und das kann zu mehr Verkäufen führen.

Siehe unseren Leitfaden zur intelligenten WooCommerce-Produktsuche.

Und für weitere Tipps und Tricks finden Sie unseren Leitfaden zur Verbesserung der WordPress-Suche mit SearchWP.

Häufig gestellte Fragen zu Ajax-Taxonomie-Filtern in WordPress

Bevor ich zum Ende komme, hier sind einige häufig gestellte Fragen unserer Leser zum Hinzufügen von Ajax-Taxonomie-Filtern in WordPress.

Benötige ich Programmierkenntnisse, um Ajax-Filter in WordPress hinzuzufügen?

Nein, Sie benötigen keine Programmierkenntnisse. Beide oben genannten Methoden funktionieren ohne Code – SearchWP wird über sein Einstellungsfenster konfiguriert, und WPFilters verwendet einen Drag-and-Drop-Builder plus einen Gutenberg-Block oder ein Widget.

Benötige ich sowohl SearchWP als auch WPFilters, oder kann ich nur eines verwenden?

Sie erfüllen unterschiedliche Aufgaben. SearchWP macht die WordPress-Suchmaschine selbst auf Backend-Ebene Taxonomie-bewusst. WPFilters fügt die sichtbare Filter-Benutzeroberfläche im Frontend hinzu. Sie können SearchWP allein verwenden, wenn Sie nur bessere Suchergebnisse wünschen, oder beide für das vollständige Ajax-Filtererlebnis kombinieren. Das All Access Bundle enthält beide zu einem einzigen Preis.

Kann ich Taxonomie-Filter für WooCommerce-Produkte verwenden?

Ja, Taxonomie-Filter eignen sich hervorragend für WooCommerce-Shops. Sie können Kunden Produkte nach Kategorien, Tags, Attributen (wie Größe oder Farbe) und mehr filtern lassen – ähnlich wie das Filtererlebnis auf großen E-Commerce-Websites.

Was ist der Unterschied zwischen Ajax-Filterung und regulärer Filterung?

Bei der Ajax-Filterung werden die Ergebnisse sofort aktualisiert, ohne die Seite neu zu laden. Bei der regulären Filterung wird die gesamte Seite jedes Mal neu geladen, wenn ein Benutzer eine Option auswählt, was sich langsamer anfühlen kann.

Verlangsamen Ajax-Filter meine Website?

Nein, nicht unbedingt. In den meisten Fällen verbessern Ajax-Filter die Benutzererfahrung, indem sie nur die gefilterten Ergebnisse laden, anstatt die gesamte Seite neu zu laden. Stellen Sie einfach sicher, dass Sie ein gut optimiertes Plugin verwenden.

Verbessern Sie Ihre WordPress-Website mit erweiterter Suche und Filterung

Ich hoffe, dieser Artikel hat Ihnen geholfen, einen Ajax-gesteuerten Taxonomie-Filter zu Ihrer WordPress-Suche auf Ihrer Website hinzuzufügen.

Als Nächstes möchten Sie vielleicht auch unsere Leitfäden zu folgenden Themen lesen:

• So lassen Sie Benutzer Beiträge und Seiten in WordPress filtern
• So erstellen Sie ein filterbares Portfolio in WordPress
• Einrichtung des WooCommerce-Produktfilters
• So beheben Sie, dass die WordPress-Suche nicht funktioniert
• So sehen Sie die Suchanalysen in WordPress

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.