Egal, ob Sie Fotograf, Designer oder Geschäftsinhaber sind, Ihr Portfolio ist das mächtigste Werkzeug, um neue Kunden zu gewinnen. Aber es kann für Besucher frustrierend sein, wenn sie Dutzende von Bildern oder Projekten durchsuchen müssen, nur um das zu finden, wonach sie suchen.
Ich habe gesehen, wie ein unorganisiertes Portfolio dazu führen kann, dass Sie Chancen verpassen. Wenn ein potenzieller Kunde Ihre Fallstudien für „Logo-Design“ sehen möchte, sich aber in Ihren „Webentwicklungs“-Projekten verliert, wird er vielleicht einfach weiterziehen.
Hier kommt ein filterbares Portfolio ins Spiel. Es ermöglicht Besuchern, Ihre Arbeiten mit einem einzigen Klick nach Kategorie, Tag oder Projekttyp zu sortieren, sodass sie leicht finden, was sie brauchen.
In diesem Leitfaden zeige ich Ihnen, wie Sie Schritt für Schritt ganz einfach ein filterbares Portfolio in WordPress erstellen.
Ich werde zwei Methoden behandeln, damit Sie diejenige auswählen können, die Ihren Bedürfnissen am besten entspricht:
- Methode 1: Envira Gallery (Empfohlen für Fotos) – Am besten, wenn Sie eine Galerie mit Bildern anzeigen möchten (wie ein Hochzeitsalbum oder eine Fotopräsentation).
- Methode 2: WPFilters (Empfohlen für Projekte) – Am besten, wenn Sie Fallstudien, Blogbeiträge oder WooCommerce-Produkte filtern möchten.
Warum ein filterbares Portfolio in WordPress erstellen?
Die meisten Fotografen und Designer erstellen schöne Portfolios, die ihre besten Fotos zeigen. Manchmal möchten potenzielle Kunden jedoch sehen, ob Sie bereits etwas Ähnliches gemacht haben.
Zum Beispiel möchte jemand, der einen Modefotografen sucht, Ihre bisherigen Arbeiten im Modebereich sehen.
Das Hinzufügen von Filtern zu Ihrem Portfolio ermöglicht es Ihnen, Ihre Arbeit unter verschiedenen Tags anzuzeigen. Es hilft Ihren Benutzern auch, Elemente in Ihrem Portfolio einfach zu sortieren.
Werfen wir einen Blick darauf, wie Sie ganz einfach ein filterbares Portfolio in WordPress erstellen können, ganz ohne Code.
Methode 1: Erstellen eines filterbaren Portfolios mit Envira Gallery (Empfohlen für Fotos)
Envira Gallery ist das beste Fotogalerie-Plugin für WordPress. Es ermöglicht Ihnen, schöne, filterbare Bildportfolios zu erstellen, die schnell laden und auf allen Geräten gut aussehen.
Wir haben Envira Gallery gründlich getestet, um zu sehen, wie es im Vergleich zu anderen Lösungen abschneidet. Lesen Sie mehr über unsere Erfahrungen in unserem vollständigen Envira Gallery Testbericht.
Zuerst müssen Sie das Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.
Hinweis: Obwohl es eine kostenlose Version von Envira Gallery gibt, benötigen Sie den Plus-Tarif oder höher, um auf das Tag-Addon zuzugreifen, das für dieses Tutorial erforderlich ist.
Nach der Aktivierung müssen Sie die Seite Envira Gallery » Einstellungen besuchen, um Ihren Lizenzschlüssel einzugeben. Diese Informationen erhalten Sie von Ihrem Konto auf der Envira Gallery-Website.
Sobald Sie den Schlüssel eingegeben haben, klicken Sie auf die Schaltfläche „Schlüssel überprüfen“. Sie sehen eine Meldung, dass die Website jetzt Updates erhält.
Als Nächstes müssen Sie das Tags-Addon installieren. Gehen Sie dazu zur Seite Envira Gallery » Addons und suchen Sie das Tags-Addon.
Sobald Sie es gefunden haben, müssen Sie auf die Schaltfläche 'Installieren' klicken.
Envira Gallery holt und installiert das Addon für Sie, und dann müssen Sie auf die Schaltfläche 'Aktivieren' klicken, um es zu verwenden.
Jetzt sind Sie bereit, Ihr filterbares Portfolio zu erstellen.
Erstellen Sie Ihr Portfolio und organisieren Sie Bilder
Gehen Sie zur Seite Envira Gallery » Neu hinzufügen, um Ihre erste Galerie zu erstellen und ihr einen Namen zu geben.
Sie können nun Fotos zu Ihrer Galerie hinzufügen. Klicken Sie auf die Schaltfläche 'Dateien vom Computer auswählen', um neue Bilder hochzuladen, oder klicken Sie auf 'Dateien aus anderen Quellen auswählen', um Bilder aus Ihrer WordPress-Mediathek auszuwählen.
Wenn sich die Fotos bereits in der WordPress Mediathek befinden, sollten Sie auf die Schaltfläche „Dateien aus anderen Quellen auswählen“ klicken.
Envira wird nun diese Dateien hochladen und in Ihre Galerie einfügen. Sobald dies geschehen ist, können Sie nach unten scrollen, um Ihre Bilder zu sehen.
Experten-Tipp: Hochauflösende Bilder können die Leistung Ihrer Website verlangsamen. Ich empfehle die Verwendung eines Tools wie EWWW Image Optimizer oder Smush, um Ihre Portfoliofotos zu komprimieren, bevor Sie sie in Envira hochladen.
Weitere Details finden Sie in unserer Anleitung, wie Sie Bildgalerien in WordPress hinzufügen.
Klicken Sie als Nächstes auf das Bleistiftsymbol, um ein Bild zu bearbeiten. Daraufhin wird ein Popup angezeigt, in dem Sie die Tags und andere Metadaten zu Ihren Fotos hinzufügen können.
Betrachten Sie Tags als Schlüsselwörter oder Kategorien für Ihre Bilder. Sie könnten zum Beispiel Tags wie „Hochzeiten“, „Porträts“, „Landschaften“ oder „Schwarzweiß“ verwenden. Diese Tags werden zu den klickbaren Filtern, mit denen Ihre Besucher Ihr Portfolio sortieren können.
Geben Sie die Tags ein, die Sie dieser Fotografie zuweisen möchten. Sie können mehrere Tags durch ein Komma getrennt hinzufügen. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Metadaten speichern“, um Ihre Tags zu speichern.
Nun müssen Sie den Vorgang wiederholen, um allen Bildern in Ihrer Galerie Tags hinzuzufügen.
Profi-Tipp: Seien Sie konsistent mit Ihren Tags. Verwenden Sie zum Beispiel immer „Porträts“ anstatt zwischen „Porträt“ und „Porträts“ zu wechseln. Dies hält Ihre Filter übersichtlich und für Besucher einfach zu bedienen.
Aktivieren der Filter-Einstellungen
Nachdem Sie Ihren Fotos Tags hinzugefügt haben, klicken Sie auf die Registerkarte „Tags“ auf der linken Seite Ihrer Galerie. Hier können Sie die Tag-Filterung für Ihre Galerie aktivieren oder deaktivieren.
Sie müssen das Kontrollkästchen 'Tag-Filterung aktivieren?' aktivieren, um die Tag-Filterung zu ermöglichen, und Sie sehen die Einstellungen für diese Option.
Sie können die Position der Tags (oberhalb oder unterhalb der Galerie) wählen, entscheiden, ob alle Tags oder nur bestimmte angezeigt werden sollen, und andere Anzeigeeinstellungen konfigurieren.
Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Veröffentlichen“, um Ihre Galerie live zu schalten. Ihre Portfolio-Galerie kann nun zu Ihrer Website hinzugefügt werden.
Hinzufügen des Filterbaren Portfolios zu Ihrer WordPress-Website
Sie können nun den Beitrag oder die Seite erstellen, auf der Sie Ihr filterbares Portfolio anzeigen möchten. Wenn Sie den Block-Editor verwenden, fügen Sie einfach einen Envira Gallery-Block zum Artikel hinzu.
Danach sollten Sie auf das Dropdown-Menü 'Nach einer Galerie suchen' klicken und die zuvor veröffentlichte Galerie auswählen.
Wenn Sie den Classic Editor verwenden, klicken Sie auf die Schaltfläche „Galerie hinzufügen“ oberhalb der Werkzeugleiste des Beitragseditors.
Dies öffnet ein Popup, in dem Sie die gerade erstellte Galerie auswählen und in Ihren WordPress-Beitrag und Ihre Seite einfügen können.
Sie können Ihren Beitrag oder Ihre Seite jetzt aktualisieren, um Ihre Änderungen zu speichern und Ihre Website in der Vorschau anzuzeigen, um Ihr filterbares Portfolio in Aktion zu sehen.
Wenn Sie mehr über die Möglichkeiten von Envira Gallery erfahren möchten, sehen Sie sich diese Tutorials an:
- So erstellen Sie eine Bildergalerie in WordPress (Schritt für Schritt)
- So fügen Sie eine Galerie in WordPress mit einem Lightbox-Effekt ein
- Bilder in WordPress automatisch mit Wasserzeichen versehen
Methode 2: Erstellen eines filterbaren Portfolios mit WPFilters (Empfohlen für Projekte)
WPFilters ist das beste Inhaltsfilter-Plugin für WordPress. Es ermöglicht Ihnen, Amazon-ähnliche Sortierungen zu Ihrer Website hinzuzufügen und funktioniert perfekt für Projektfallstudien und detaillierte Projektseiten.
Es ermöglicht Ihren Besuchern, Ihre Arbeiten nach Kategorie, Tag oder benutzerdefinierten Feldern zu filtern, ohne die Seite neu zu laden. Es übernimmt auch automatisch das Styling Ihres Themes durch native Blöcke, sodass Sie sich keine Gedanken über manuelle CSS-Anpassungen machen müssen.
Wir haben WPFilters gründlich getestet, um zu sehen, wie es im Vergleich zu anderen Lösungen abschneidet. Lesen Sie mehr über unsere Erfahrungen in unserem vollständigen WPFilters Testbericht.
Konfiguration der Plugin-Einstellungen
Zuerst müssen Sie das WPFilters-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.
Nach der Aktivierung startet der Einrichtungsassistent automatisch. Klicken Sie auf die Schaltfläche „Los geht’s“, um zu beginnen.
Ich habe festgestellt, dass der Onboarding-Assistent unglaublich effizient ist. Ich konnte in weniger als 5 Minuten von der Installation zu einem voll funktionsfähigen Filterblock gelangen.
Profi-Tipp: Wenn Sie ein Entwickler sind und Advanced Custom Fields (ACF) verwenden, werden Sie begeistert sein, dass WPFilters Ihre ACF-Daten automatisch erkennt. Dies spart enorm viel Zeit, da Sie benutzerdefinierte Felder nicht manuell Ihren Filtern zuordnen müssen.
Auf dem nächsten Bildschirm werden Sie gefragt: „Welche Art von Daten verwendet Ihre Website zum Filtern?“ Dies teilt dem Plugin mit, welche Art von Inhalten Sie auf Ihrer Website haben.
Für ein Standard-Portfolio sollten Sie die Kontrollkästchen für „WordPress-Kategorie“ und „WordPress-Tag“ aktivieren.
Wenn Sie jedoch ein Produktportfolio erstellen, um Ihre Arbeiten zu verkaufen, stellen Sie sicher, dass Sie die Optionen „WooCommerce-Kategorie“ und „WooCommerce-Preis“ auswählen.
Wenn Sie ein sehr großes Portfolio mit tiefen Unterkategorien haben, habe ich festgestellt, dass WPFilters hierarchische Verschachtelungen hervorragend handhabt, indem es Unterkategorien automatisch einrückt. Dies verhindert eine lange Textwand und erleichtert Ihren Kunden die Navigation durch komplexe Projektlisten erheblich.
Wenn Sie auf die Schaltfläche „Speichern und fortfahren“ klicken, werden Sie aufgefordert, Ihren Lizenzschlüssel einzugeben, den Sie in Ihrem Konto auf der WPFilters-Website finden.
Auf dem letzten Bildschirm sehen Sie eine Erfolgsmeldung. Klicken Sie einfach auf die Schaltfläche „Speichern und abschließen“, um die Einrichtung abzuschließen.
Anpassen Ihrer Portfolio-Filter
Der Einrichtungsassistent erstellt automatisch Filter für Sie, basierend auf Ihren Auswahlmöglichkeiten. Sie möchten jedoch möglicherweise anpassen, wie diese aussehen.
Gehen Sie einfach zu WPFilters » Elemente in Ihrem WordPress-Dashboard. Hier sehen Sie die Filter, die der Einrichtungsassistent für Sie erstellt hat, wie z. B. „WordPress-Kategorie“ und „WordPress-Tag“. In diesem Tutorial filtern wir unser Portfolio nach Kategorie.
Lassen Sie uns den Kategorie-Filter anpassen. Sie müssen auf das Bleistiftsymbol neben dem Element „WordPress-Kategorie“ klicken, um es zu bearbeiten.
Dies öffnet den Filter-Editor.
Sie können sehen, dass die Datenquelle bereits auf „Kategorien“ eingestellt ist.
Nehmen Sie sich einen Moment Zeit, um sich mit den Einstellungen auf dieser Seite vertraut zu machen. Um den Filter nützlicher zu machen, empfehle ich, die Option „Elementanzahl“ im Abschnitt „Elemente“ zu aktivieren.
Dies zeigt die Anzahl der Projekte in jeder Kategorie neben dem Filternamen an (z. B. „Webdesign (12)“), was den Besuchern hilft, zu sehen, wie viele Inhalte Sie haben.
Wenn Sie mit Ihren Einstellungen zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“ in der oberen rechten Ecke.
Anzeige Ihres filterbaren Portfolios
Nachdem Sie Ihren Filter angepasst haben, müssen Sie ihn zu Ihrer Website hinzufügen. Das Beste an WPFilters ist, dass es problemlos mit dem nativen WordPress Query Loop-Block funktioniert.
Der Query Loop-Block ist die integrierte Lösung von WordPress zur Anzeige dynamischer Inhalte. Er funktioniert perfekt mit WPFilters, um filterbare Inhaltsanzeigen zu erstellen.
Bearbeiten Sie einfach die Seite, auf der Ihr Portfolio erscheinen soll.
Fügen Sie zuerst den Block „WPFilters-Element“ zur Seite hinzu. Stellen Sie in den Blockeinstellungen auf der rechten Seite sicher, dass Ihr „WordPress-Kategorie“-Filter ausgewählt ist.
Fügen Sie als Nächstes unmittelbar unter dem Filter einen Query Loop-Block hinzu.
Sie können ein „Raster“- oder „Listen“-Muster wählen, das zu Ihrem Design passt.
Suchen Sie in den Blockeinstellungen auf der rechten Seite den Abschnitt „Einstellungen“. Stellen Sie sicher, dass Sie den Abfragetyp „Benutzerdefiniert“ und den Beitragstyp „Beiträge“ auswählen.
Dies stellt sicher, dass der Block Ihre Beiträge anzeigt und nicht die aktuelle Seite.
Experten-Tipp: Obwohl der Query Loop-Block leistungsstark ist, kann es für Anfänger schwierig sein, ihn richtig zu konfigurieren. Wenn Sie Ihre Elemente nicht sehen, überprüfen Sie noch einmal, ob Sie den richtigen Beitragstyp in den Blockeinstellungen ausgewählt haben.
Das ist alles! Sie können Ihre Seite jetzt in der Vorschau anzeigen.
Wenn Sie eine Kategorie im Filter auswählen, aktualisiert sich die Liste der Beiträge sofort, um die Ergebnisse anzuzeigen.
Hinweis: Filter können auch als Widgets oder Blöcke in einer Seitenleiste hinzugefügt werden. Wenn sie auf diese Weise verwendet werden, interagieren sie automatisch mit anderen primären Seitenabfragen wie WooCommerce-Shop-Listings, Blog-Archiven oder anderen Inhalten, die mit einer WP_Query-Schleife gerendert werden.
Video-Tutorial
Häufig gestellte Fragen zu filterbaren Portfolios
Hier sind einige der am häufigsten gestellten Fragen, die unsere Leser zum Erstellen von filterbaren Portfolios in WordPress stellen.
1. Was ist das beste WordPress-Plugin für ein filterbares Portfolio?
Das beste Plugin hängt von Ihren spezifischen Inhalten ab. Für bildbasierte Portfolios (wie Fotografie oder Grafikdesign) ist Envira Gallery die beste Wahl, da es sich auf eine hochwertige visuelle Präsentation konzentriert.
Für projektbasierte Portfolios (wie Fallstudien, Blogbeiträge oder Immobilienangebote) ist WPFilters jedoch überlegen, da es Ihnen ermöglicht, vorhandene WordPress-Inhalte nach Kategorie, Tag oder benutzerdefiniertem Feld zu filtern.
2. Kann ich ein filterbares Produktportfolio für WooCommerce erstellen?
Ja. WPFilters wurde speziell entwickelt, um nahtlos mit WooCommerce zu funktionieren. Es ermöglicht Ihnen, ein Produktportfolio zu erstellen, in dem Kunden Artikel nach Preis, Produktattributen (wie Größe oder Farbe) und Kategorien filtern können, was ein Einkaufserlebnis ähnlich wie bei Amazon bietet.
3. Müssen Benutzer die Seite neu laden, um gefilterte Ergebnisse anzuzeigen?
Nein. Sowohl Envira Gallery als auch WPFilters verwenden Ajax-Technologie. Wenn ein Besucher auf einen Filter klickt, werden die Inhalte sofort aktualisiert, ohne die Seite neu zu laden. Dies stellt sicher, dass Ihre Besucher eine schnelle und reibungslose Erfahrung haben.
4. Kann ich Videos zu meinem filterbaren Portfolio hinzufügen?
Ja, wenn Sie sich für Envira Gallery entscheiden, können Sie das spezielle Videos Addon installieren. Diese Erweiterung ermöglicht es Ihnen, YouTube-, Vimeo- und lokal gehostete Videos neben Ihren Bildern in Ihrem filterbaren Portfolio einzufügen.
5. Funktionieren diese Portfolio-Plugins mit meinem WordPress-Theme?
Ja. Sowohl Envira Gallery als auch WPFilters sind so konzipiert, dass sie mit jedem ordnungsgemäß codierten WordPress-Theme funktionieren. Sie lassen sich auch einfach in beliebte Page Builder wie SeedProd, Divi und Elementor integrieren, sodass Sie Ihr Portfolio überall auf Ihrer Website platzieren können.
Zusätzliche Ressourcen und nächste Schritte
Jetzt, da Sie wissen, wie man ein filterbares Portfolio erstellt, möchten Sie vielleicht andere Möglichkeiten erkunden, um die Galerien und Bilder Ihrer Website zu verbessern. Schauen Sie sich diese hilfreichen Anleitungen an:
- Die besten WordPress-Galerie-Plugins – Sehen Sie sich unseren Expertenvergleich der Top-Galerie-Plugins an, um sicherzustellen, dass Sie das beste Werkzeug für die jeweilige Aufgabe verwenden.
- So fügen Sie eine Galerie mit Lightbox-Effekt hinzu – Lassen Sie Ihre Portfolio-Bilder hervorstechen, indem Sie es den Benutzern ermöglichen, sie in einer schönen Lightbox-Überlagerung anzuzeigen.
- So fügen Sie automatisch ein Wasserzeichen zu Bildern hinzu – Schützen Sie Ihre harte Arbeit, indem Sie Ihr Logo oder ein Wasserzeichen automatisch zu jedem hochgeladenen Foto hinzufügen.
- So erstellen Sie eine WooCommerce-Produktbildergalerie – Wenn Sie Ihre Fotos oder Kunstwerke online verkaufen, zeigt Ihnen diese Anleitung, wie Sie beeindruckende Produktgalerien für Ihren Shop erstellen.
- So erstellen Sie eine Bildergalerie in WordPress – Eine großartige Auffrischung der Grundlagen für die Erstellung schöner und reaktionsschneller Bildergalerien.
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.
Dennis Muthomi
Filterbare Galerien sind ein Muss für Kreative.
Ein hilfreicher Tipp, den ich gelernt habe, ist, ein standardisiertes Tagging-System zu erstellen, bevor Sie Ihre Envira Gallery-Tags einrichten. Das mache ich mit all meinen Fotografiekunden. Ich halte mich an konsistente Tags wie „Hochzeit“, „Porträt“ und „Werbung“ für ihre Arbeiten. Das ist aus zwei Gründen sehr hilfreich:
– Macht die Portfolio-Pflege viel einfacher
– Schafft ein besseres Filtererlebnis für Besucher
Übrigens, das von Ihnen erwähnte Tags Addon war perfekt für die Implementierung dieses Systems!
Haim
Alle bisher gefundenen Fotogalerien, die Tags unterstützen, erlauben das Filtern von jeweils einem Tag. Ich möchte eine Galerie implementieren, bei der ich nach mehreren Tags filtern kann, um die Fotos zu erhalten, die ALLE Tags haben. Dafür sollte die Tag-Auswahl in Form von Checkboxen erfolgen, um die Auswahl mehrerer Optionen zu ermöglichen. Kann mir jemand eine solche Lösung für WP empfehlen? Danke.
divp
Schön, weiter so
Lewis
Wirklich toller Artikel, ich habe dieses Thema geliebt und werde bald einen Webentwickler einstellen, der mir ein Thema wie dieses erstellt. Danke!