Benutzerdefinierte Felder sind eine leistungsstarke Möglichkeit, zusätzliche Informationen auf einer WordPress-Website anzuzeigen.
Sie können sie beispielsweise verwenden, um Details wie SKU, Farbe, Zutaten oder Immobilienpreise zu speichern.
Es ist jedoch oft eine Herausforderung, diese Daten für Besucher auf eine Weise anzuzeigen, mit der sie interagieren können.
Hier hilft die Erstellung eines Filters für Ihre benutzerdefinierten Felder den Benutzern, Ergebnisse einzugrenzen und genau das zu finden, was sie benötigen. Glücklicherweise gibt es eine einfache Möglichkeit, Benutzern das Sortieren von Inhalten basierend auf diesen benutzerdefinierten Daten zu ermöglichen.
In diesem Artikel zeigen wir Ihnen, wie Sie benutzerdefinierte Feldfilter in WordPress erstellen.
Warum sind benutzerdefinierte Feldfilter für Ihre Website wichtig?
Aus Erfahrung wissen wir, dass benutzerdefinierte Felder hervorragend zum Speichern zusätzlicher Daten geeignet sind. Aber diese Daten sind nutzlos, wenn Besucher sie nicht zum Sortieren von Inhalten verwenden können.
Stellen Sie sich vor, Sie versuchen, ein Hemd online zu kaufen, müssen aber jedes einzelne Produkt anklicken, nur um zu sehen, ob es in Ihrer Größe erhältlich ist. Genau das passiert, wenn Sie keine Filter für Ihre benutzerdefinierten Felder haben.
Betrachten wir als Beispiel eine Immobilien-Website. Sie könnten benutzerdefinierte Felder verwenden, um die Anzahl der Schlafzimmer oder die Gesamtquadratmeterzahl eines Hauses zu speichern.
Ohne einen Filter für diese Felder muss eine Familie, die ein Drei-Schlafzimmer-Haus sucht, jede einzelne Studio-Wohnung durchsuchen.
Dasselbe gilt für einen Food-Blog. Wir sehen oft benutzerdefinierte Felder, die für spezifische Details wie Kaloriengehalt oder Zubereitungszeit verwendet werden.
Wenn ein Besucher eine schnelle 30-Minuten-Mahlzeit möchte, sollte er nicht lange Slow-Cooker-Rezepte durchlesen müssen, um eine zu finden.
Besucher möchten Dinge schnell finden. Wenn sie nicht nach Preis, Standort oder bestimmten Zutaten filtern können, werden sie Ihre Website wahrscheinlich verlassen.
Das Hinzufügen dieser spezifischen Filter schließt die Lücke zwischen den zusätzlichen Daten und der Benutzererfahrung. Es verwandelt eine unübersichtliche Liste in einen organisierten Katalog.
Lassen Sie uns nun sehen, wie Sie ganz einfach einen Filter für benutzerdefinierte Felder in WordPress einrichten können.
Erstellen von Filtern für benutzerdefinierte Felder in WordPress
Die einfachste Methode, Filter für benutzerdefinierte Felder hinzuzufügen, ist die Verwendung eines Plugins wie WPFilters.
WPFilters ist das leistungsfähigste Filter-Plugin, das anfängerfreundlich ist und es Ihnen ermöglicht, Amazon-ähnliche Filter zu Ihrer WordPress-Website hinzuzufügen.
Es ermöglicht Ihnen, benutzerdefinierte Filtersätze basierend auf Kategorien, Tags oder benutzerdefinierten Daten zu erstellen und sie überall auf Ihrer Website zu platzieren.
Dadurch können Ihre Besucher Ihre Inhalte durchsuchen, um genau das zu finden, was sie brauchen, in Sekundenschnelle.
WPFilters wird vom selben Team entwickelt, das auch hinter SearchWP steht. Das gibt uns die Zuversicht, dass es perfekt mit unseren Suchergebnissen funktioniert.
Mit WPFilters können Sie ein einfaches Textfeld in Kontrollkästchen, Dropdown-Menüs, Bereichsschieberegler, Radio-Buttons und weitere Filter umwandeln. Dies gibt Ihren Besuchern die Macht Ihrer benutzerdefinierten Daten in die Hände.
Lassen Sie uns nun sehen, wie Sie es verwenden können, um Filter für benutzerdefinierte Felder auf Ihrer Website zu erstellen.
Schritt 1: WPFilters installieren und aktivieren
Zuerst müssen Sie die SearchWP-Website besuchen, um Ihre Kopie von WPFilters zu erhalten.
Nach der Anmeldung melden Sie sich in Ihrem Account-Bereich an und klicken Sie auf die Registerkarte Downloads .
Klicken Sie hier auf die Schaltfläche WPFilters herunterladen , um die Datei auf Ihrem Computer zu speichern. Wir empfehlen außerdem, Ihren Lizenzschlüssel jetzt zu kopieren, damit Sie ihn später zur Hand haben.
Als Nächstes müssen Sie das Plugin auf Ihrer Website hochladen und installieren. Wenn Sie neu hier sind, lesen Sie bitte diese Anleitung, wie man ein WordPress-Plugin installiert.
Nach der Aktivierung erscheint der Einrichtungsassistent. Klicken Sie auf die Schaltfläche „Los geht’s“, um die Ersteinrichtung abzuschließen.
Schritt 2: Erstellen Sie ein neues Filterelement
Navigieren Sie dazu einfach in Ihrem WordPress-Dashboard zu WPFilters » Elemente .
Klicken Sie dann auf die Schaltfläche Neu hinzufügen , um mit der Erstellung Ihres Filters zu beginnen.
Von hier aus sollten Sie Ihrem Filter oben einen klaren Namen geben. Dies hilft Ihnen, den Überblick zu behalten, wenn Sie später mehrere Filter erstellen möchten.
Sehen Sie sich als Nächstes den Abschnitt Feldtyp an. Sie können auswählen, wie der Filter aussehen soll, z. B. Kontrollkästchen, ein Dropdown-Menü, ein Schieberegler oder Optionsfelder.
Ein Schieberegler eignet sich beispielsweise am besten, wenn Besucher nach Preis filtern möchten, ein Kontrollkästchen eignet sich hervorragend zum Sortieren von Elementen nach mehreren Optionen, oder ein Dropdown-Menü zur Auswahl einer Marke.
Sie können Benutzern auch erlauben, nach bestimmten Schlüsselwörtern mithilfe des Suchfilterfelds zu filtern.
Schritt 3: Verbinden Sie den Filter mit einem benutzerdefinierten Feld
Nun müssen Sie dem Filter mitteilen, woher er seine Informationen beziehen soll. Scrollen Sie dazu einfach nach unten zum Abschnitt Datenquelle .
Klicken Sie dann auf das Dropdown-Menü und scrollen Sie zum Abschnitt Benutzerdefiniertes Feld. Von hier aus können Sie auswählen, welches benutzerdefinierte Feld Sie zum Erstellen eines Filters verwenden möchten.
Sie können beispielsweise Preis, Farbe, Marken, Gewicht, Länge und andere Produktattribute auswählen.
WPFilters funktioniert auch nahtlos mit benutzerdefinierten Feld-Plugins wie Advanced Custom Fields (ACF). Sie können ganz einfach einen Filter für jedes ACF auf Ihrer Website erstellen.
Schritt 4: Passen Sie die Filtereinstellungen an
Nachdem Sie die Datenquelle verbunden haben, müssen Sie den Filter für die Besucher ansprechend gestalten, indem Sie ihn anpassen.
Sie können damit beginnen, nach unten zum Abschnitt Container zu scrollen, um zu ändern, wie sich die Filterbox verhält.
Wenn Sie beispielsweise die Option „Titel anzeigen“ aktivieren, können Benutzer wissen, wonach sie filtern, z. B. „Preisspanne“ oder „Zutaten“.
Oder Sie können die Option „Einklappbar“ aktivieren, damit Benutzer den Filter ausblenden können, um Platz zu sparen. Wir verwenden auch gerne die Option „Horizontal“, um die Auswahl nebeneinander statt in einer langen vertikalen Liste anzuordnen.
Sehen Sie sich als Nächstes den Abschnitt Elemente darunter an, um die spezifischen Auswahlmöglichkeiten in der Liste zu steuern.
Hier können Sie „Elementanzahl anzeigen“ aktivieren, um genau anzuzeigen, wie viele Ergebnisse für jede Option vorhanden sind, was zur Festlegung der Erwartungen der Benutzer beiträgt. Wir empfehlen normalerweise, „Leer anzeigen“ deaktiviert zu lassen, damit Ihre Besucher keine Zeit mit dem Klicken auf Optionen verschwenden, die zu null Ergebnissen führen.
Wenn Sie mit dem Aussehen zufrieden sind, scrollen Sie einfach nach oben und klicken Sie auf die Schaltfläche Speichern oben rechts.
Sie sehen auch eine Vorschau des benutzerdefinierten Feldfilters im linken Bereich.
Schritt 5: Benutzerdefinierten Feldfilter auf Ihrer Website anzeigen
Das Beste an WPFilters ist, dass Sie Ihren neuen Filter überall auf Ihrer Website platzieren können.
Schauen wir uns an, wie Sie den Filter zu einer Seite und zur Seitenleiste Ihrer Website hinzufügen können.
1. Hinzufügen des benutzerdefinierten Feldfilters zu einer Seite
Das Plugin bietet beim Erstellen des Filters eine integrierte Einbettungsoption. Klicken Sie einfach auf die Schaltfläche „Einbetten“ in der oberen rechten Ecke.
Als Nächstes öffnet sich ein Popup-Fenster, in dem Sie aus verschiedenen Einbettungsoptionen wählen können.
Sie können zwischen dem Gutenberg-Block, einem Shortcode oder PHP-Code wählen, wenn Sie Entwickler sind.
Es gibt auch die Möglichkeit, den Filter zu einer vorhandenen Seite hinzuzufügen oder eine neue zu erstellen.
Nehmen wir zum Beispiel an, Sie möchten den „Gutenberg-Block“ verwenden und ihn zu einer neuen Seite hinzufügen.
Als Nächstes müssen Sie den Namen der neuen Seite eingeben und dann auf die Schaltfläche „Los geht’s“ klicken.
Ihr benutzerdefinierter Feldfilter wird dann auf der neuen Seite vorgeladen, und Sie können ihn im WordPress-Content-Editor anzeigen.
Als Nächstes können Sie auf die Schaltfläche „Veröffentlichen“ in der oberen rechten Ecke klicken.
Andererseits können Sie den WPFilters-Block auch manuell auf jeder Seite oder jedem Beitrag platzieren.
Öffnen Sie dazu einfach die Seite oder den Beitrag, auf der/dem der Filter erscheinen soll, klicken Sie auf das Pluszeichen (+), um einen neuen Block hinzuzufügen, und suchen Sie nach dem WPFilters Element.
Als Nächstes müssen Sie den gerade erstellten Filter im Einstellungsbereich auswählen.
Klicken Sie einfach auf das Dropdown-Menü unter der Option „Element auswählen“ und wählen Sie Ihren Filter aus.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Speichern“.
2. Hinzufügen des benutzerdefinierten Feldfilters zur Seitenleiste
Sie können den Filter auch zur Seitenleiste Ihrer Website hinzufügen. Dies ist eine großartige Möglichkeit, Filter für Benutzer sichtbar zu halten, damit sie schnell das richtige Produkt oder den richtigen Inhalt sortieren und finden können.
Klicken Sie dazu zunächst auf Darstellung » Widgets in Ihrem WordPress-Dashboard. Beachten Sie, dass dieser Schritt je nach verwendetem WordPress-Theme abweichen kann.
Scrollen Sie als Nächstes zum Abschnitt Seitenleiste und klicken Sie auf das „+“-Zeichen, um den WPFilters Element-Widget-Block hinzuzufügen.
Von hier aus können Sie den erstellten benutzerdefinierten Feldfilter im Einstellungsbereich auf der rechten Seite auswählen.
Klicken Sie einfach auf das Dropdown-Menü „Element auswählen“ und wählen Sie Ihren Filter aus.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Aktualisieren.
Besuchen Sie nun die Seite, um den benutzerdefinierten Feldfilter in Aktion zu sehen.
Hier sehen Sie zum Beispiel, wie verschiedene benutzerdefinierte Feldfilter in unserem Demo-Online-Shop aussehen.
FAQs zu benutzerdefinierten Feldfiltern
1. Kann ich Filter für Advanced Custom Fields (ACF)-Daten verwenden?
Ja, das können Sie definitiv. Wir verwenden ACF auf vielen unserer Websites, und WPFilters funktioniert perfekt damit.
2. Kann ich mehr als ein benutzerdefiniertes Feld-Filterelement auf einer Seite hinzufügen?
Absolut. Sie können separate Filterelemente für verschiedene Felder erstellen, z. B. eines für „Farbe“ und ein anderes für „Größe“. Um sie besser sichtbar zu machen, können Sie sie in Ihrer Seitenleiste stapeln, damit Benutzer die Ergebnisse Schritt für Schritt eingrenzen können.
3. Muss ich programmieren können, um dies einzurichten?
Überhaupt nicht. Der Hauptvorteil der Verwendung von WPFilters besteht darin, dass es die technische Arbeit für Sie erledigt. Es hilft Ihnen, erweiterte Filter einfach durch Klicken durch die Menüs einzurichten, ohne eine einzige PHP-Datei zu berühren.
Benutzerdefinierte Feldfilter ändern die Art und Weise, wie Besucher mit Ihren Daten interagieren.
Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie sie in WordPress ohne Programmierung erstellen. Möglicherweise möchten Sie auch unsere Anleitungen zum Hinzufügen einer Live-Suche zu Ihrer Website und zum Suchen nach Kategorie in WooCommerce sehen.
Sind Sie bereit, Ihren Besuchern eine bessere Möglichkeit zum Sortieren von Inhalten zu bieten? Sie können hier mit WPFilters loslegen.
