Niezależnie od tego, czy jesteś fotografem, projektantem, czy właścicielem firmy, Twoje portfolio jest najpotężniejszym narzędziem, jakie masz, aby zdobyć nowych klientów. Jednak dla odwiedzających może być frustrujące, jeśli muszą przeglądać dziesiątki zdjęć lub projektów, aby znaleźć to, czego szukają.
Widziałem, jak nieuporządkowane portfolio może spowodować utratę szans. Jeśli potencjalny klient chce zobaczyć Twoje studia przypadków dotyczące „Projektowania Logo”, ale zgubi się w Twoich projektach „Tworzenia stron internetowych”, może po prostu odejść.
Właśnie dlatego przydatne jest filtrowalne portfolio. Pozwala ono odwiedzającym posortować Twoją pracę według kategorii, tagu lub typu projektu jednym kliknięciem, ułatwiając im znalezienie dokładnie tego, czego potrzebują.
W tym przewodniku pokażę Ci, jak łatwo stworzyć filtrowalne portfolio w WordPress, krok po kroku.
Omówię dwie metody, dzięki czemu możesz wybrać tę, która najlepiej odpowiada Twoim potrzebom:
- Metoda 1: Envira Gallery (Zalecane dla zdjęć) – Najlepsze, jeśli chcesz wyświetlić galerię obrazów (np. album ślubny lub pokaz fotografii).
- Metoda 2: WPFilters (Zalecane dla projektów) – Najlepsze, jeśli chcesz filtrować studia przypadków, wpisy na blogu lub produkty WooCommerce.
Dlaczego warto stworzyć filtrowane portfolio w WordPress?
Większość fotografów i projektantów tworzy piękne portfolio, prezentujące ich najlepsze fotografie. Jednak czasami osoby, które chcą Cię zatrudnić, mogą chcieć sprawdzić, czy wykonałeś wcześniej coś podobnego.
Na przykład, ktoś szukający fotografa od mody może chcieć zobaczyć Twoje poprzednie prace w tej dziedzinie.
Dodanie filtrów do Twojego portfolio pozwala na prezentowanie Twojej pracy pod różnymi tagami. Pomaga również użytkownikom w łatwym sortowaniu elementów w Twoim portfolio.
Przyjrzyjmy się, jak łatwo stworzyć filtrowane portfolio w WordPress, bez konieczności kodowania.
Metoda 1: Tworzenie filtrowalnego portfolio za pomocą Envira Gallery (Zalecane dla zdjęć)
Envira Gallery to najlepsza wtyczka do galerii zdjęć dla WordPress. Pozwala tworzyć piękne, filtrowalne portfolio obrazów, które szybko się ładują i świetnie wyglądają na wszystkich urządzeniach.
Dokładnie przetestowaliśmy Envira Gallery, aby porównać ją z innymi rozwiązaniami. Aby dowiedzieć się więcej o naszych doświadczeniach, przeczytaj naszą pełną recenzję Envira Gallery.
Najpierw musisz zainstalować i aktywować wtyczkę. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku na temat instalacji wtyczki WordPress.
Uwaga: Chociaż istnieje darmowa wersja Envira Gallery, będziesz potrzebować planu Plus lub wyższego, aby uzyskać dostęp do dodatku Tags Addon wymaganego w tym samouczku.
Po aktywacji musisz odwiedzić stronę Envira Gallery » Ustawienia, aby wprowadzić swój klucz licencyjny. Informacje te znajdziesz na swoim koncie na stronie Envira Gallery.
Po wprowadzeniu klucza kliknij przycisk „Zweryfikuj klucz”. Zobaczysz komunikat, że witryna otrzymuje teraz aktualizacje.
Następnie musisz zainstalować dodatek do tagów. Aby to zrobić, przejdź do strony Envira Gallery » Dodatki i znajdź dodatek Tags Addon.
Gdy go znajdziesz, musisz kliknąć przycisk „Zainstaluj”.
Envira Gallery pobierze i zainstaluje dodatek za Ciebie, a następnie będziesz musiał kliknąć przycisk „Aktywuj”, aby zacząć z niego korzystać.
Teraz jesteś gotowy do stworzenia swojego filtrowanego portfolio.
Tworzenie portfolio i organizowanie obrazów
Przejdź do strony Envira Gallery » Dodaj nową, aby utworzyć swoją pierwszą galerię i nadać jej nazwę.
Możesz teraz dodawać zdjęcia do swojej galerii. Kliknij przycisk „Wybierz pliki z komputera”, aby przesłać nowe obrazy, lub kliknij „Wybierz pliki z innych źródeł”, aby wybrać zdjęcia już znajdujące się w Twojej bibliotece multimediów WordPress.
Jeśli zdjęcia znajdują się już w bibliotece multimediów WordPress, kliknij przycisk „Wybierz pliki z innych źródeł”.
Envira teraz przesłać i wstawić te pliki do Twojej galerii. Gdy to się zakończy, możesz przewinąć w dół, aby zobaczyć swoje obrazy.
Wskazówka eksperta: Obrazy o wysokiej rozdzielczości mogą spowolnić działanie Twojej witryny. Zalecam użycie narzędzia takiego jak EWWW Image Optimizer lub Smush do kompresji zdjęć z portfolio przed przesłaniem ich do Envira.
Więcej szczegółów znajdziesz w naszym przewodniku na temat dodawania galerii obrazów w WordPress.
Następnie kliknij ikonę ołówka, aby edytować obraz. Spowoduje to wyświetlenie okna podręcznego, w którym możesz dodać tagi i inne metadane do swoich zdjęć.
Pomyśl o tagach jako o słowach kluczowych lub kategoriach dla Twoich obrazów. Na przykład możesz użyć tagów takich jak „Wesela”, „Portrety”, „Krajobrazy” lub „Czarno-białe”. Te tagi staną się klikalnymi filtrami, których odwiedzający będą używać do sortowania Twojego portfolio.
Wpisz tagi, które chcesz przypisać do tego zdjęcia. Możesz dodać wiele tagów oddzielonych przecinkiem. Po zakończeniu kliknij przycisk „Zapisz metadane”, aby zapisać swoje tagi.
Teraz musisz powtórzyć proces dodawania tagów do wszystkich obrazów w Twojej galerii.
Wskazówka: Bądź konsekwentny w używaniu tagów. Na przykład, zawsze używaj „Portrety” zamiast przełączać się między „Portret” i „Portrety”. Dzięki temu Twoje filtry będą czyste i łatwe w użyciu dla odwiedzających.
Włączanie ustawień filtrowania
Po dodaniu tagów do zdjęć kliknij zakładkę „Tagi” po lewej stronie strony galerii. Tutaj możesz włączyć lub wyłączyć filtrowanie po tagach dla swojej galerii.
Musisz zaznaczyć pole „Włącz filtrowanie według tagów?”, aby włączyć filtrowanie według tagów, a zobaczysz ustawienia tej opcji.
Możesz wybrać pozycję tagów (nad lub pod galerią), zdecydować, czy wyświetlać wszystkie tagi, czy tylko określone, i skonfigurować inne ustawienia wyświetlania.
Po zakończeniu po prostu kliknij przycisk „Opublikuj”, aby Twoja galeria stała się aktywna. Twoja galeria portfolio jest teraz gotowa do dodania do Twojej witryny.
Dodawanie filtrującego portfolio do Twojej witryny WordPress
Możesz teraz utworzyć wpis lub stronę, na której chcesz wyświetlić swoje filtrowalne portfolio. Jeśli używasz edytora bloków, po prostu dodaj blok Envira Gallery do artykułu.
Następnie powinieneś kliknąć na menu rozwijane „Szukaj galerii” i wybrać galerię, którą wcześniej opublikowałeś.
Jeśli używasz klasycznego edytora, kliknij przycisk „Dodaj galerię” znajdujący się nad paskiem narzędzi edytora wpisów.
Spowoduje to wyświetlenie okna podręcznego, w którym możesz wybrać utworzoną galerię i wstawić ją do swojego posta lub strony WordPress.
Możesz teraz zaktualizować swój wpis lub stronę, aby zapisać zmiany i wyświetlić podgląd swojej witryny, aby zobaczyć swoje portfolio z filtrowaniem w akcji.
Jeśli chcesz dowiedzieć się więcej o tym, co możesz zrobić z Envira Gallery, zapoznaj się z tymi samouczkami:
- Jak utworzyć galerię obrazów w WordPress (krok po kroku)
- Jak dodać galerię w WordPress z efektem lightbox
- Jak automatycznie dodać znak wodny do obrazów w WordPress
Metoda 2: Tworzenie filtrowanego portfolio za pomocą WPFilters (zalecane dla projektów)
WPFilters to najlepsza wtyczka do filtrowania treści dla WordPress. Pozwala dodawać sortowanie w stylu Amazon do Twojej witryny i doskonale sprawdza się w przypadku studiów przypadków projektów i szczegółowych stron projektów.
Umożliwia ona odwiedzającym filtrowanie Twojej pracy według kategorii, tagów lub niestandardowych pól bez przeładowywania strony. Dziedziczy również automatycznie stylizację Twojego motywu za pomocą natywnych bloków, dzięki czemu nie musisz martwić się o ręczne poprawki CSS.
Dokładnie przetestowaliśmy WPFilters, aby porównać go z innymi rozwiązaniami. Aby dowiedzieć się więcej o naszych doświadczeniach, przeczytaj naszą pełną recenzję WPFilters.
Konfiguracja ustawień wtyczki
Najpierw musisz zainstalować i aktywować wtyczkę WPFilters. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat instalacji wtyczki WordPress.
Po aktywacji kreator konfiguracji uruchomi się automatycznie. Kliknij przycisk „Rozpocznij”, aby rozpocząć.
Odkryłem, że kreator wdrażania jest niezwykle wydajny. Udało mi się przejść od instalacji do w pełni funkcjonalnego bloku filtrowania w mniej niż 5 minut.
Wskazówka Pro: Jeśli jesteś deweloperem korzystającym z Advanced Custom Fields (ACF), pokochasz to, że WPFilters automatycznie wykrywa Twoje dane ACF. Jest to ogromna oszczędność czasu, ponieważ nie musisz ręcznie mapować niestandardowych pól do swoich filtrów.
Na następnym ekranie zostaniesz zapytany: „Jakiego typu dane Twoja strona internetowa wykorzystuje do filtrowania?”. To informuje wtyczkę, jaki rodzaj treści masz na swojej stronie.
W przypadku standardowego portfolio powinieneś zaznaczyć pola „Kategoria WordPress” i „Tag WordPress”.
Jednak jeśli tworzysz portfolio produktów do sprzedaży swojej pracy, upewnij się, że zaznaczyłeś opcje „Kategoria WooCommerce” i „Cena WooCommerce”.
Jeśli masz bardzo duże portfolio z głębokimi podkategoriami, zauważyłem, że WPFilters pięknie radzi sobie z zagnieżdżaniem hierarchicznym, automatycznie wcinając podrzędne kategorie. Zapobiega to długiej ścianie tekstu i znacznie ułatwia klientom nawigację po złożonych listach projektów.
Po kliknięciu przycisku „Zapisz i kontynuuj” zostaniesz poproszony o wprowadzenie klucza licencyjnego, który znajdziesz w obszarze swojego konta na stronie WPFilters.
Na ostatnim ekranie zobaczysz komunikat o sukcesie. Po prostu kliknij przycisk „Zapisz i zakończ”, aby zakończyć konfigurację.
Dostosowywanie filtrów portfolio
Kreator konfiguracji automatycznie tworzy filtry na podstawie Twoich wyborów. Możesz jednak chcieć dostosować ich wygląd.
Po prostu przejdź do WPFilters » Elementy z panelu administracyjnego WordPress. Tutaj zobaczysz filtry utworzone przez kreatora konfiguracji, takie jak „Kategoria WordPress” i „Tag WordPress”. W tym samouczku będziemy filtrować nasze portfolio według kategorii.
Dostosujmy filtr kategorii. Musisz kliknąć ikonę ołówka obok elementu „Kategoria WordPress”, aby go edytować.
Otworzy to edytor filtrów.
Możesz zobaczyć, że Źródło danych jest już ustawione na „Kategorie”.
Poświęć chwilę na zapoznanie się z ustawieniami na tej stronie. Aby filtr był bardziej użyteczny, zalecam włączenie opcji „Liczba elementów” w sekcji Elementy.
Wyświetla to liczbę projektów w każdej kategorii obok nazwy filtra (np. „Projektowanie stron internetowych (12)”), co pomaga odwiedzającym zobaczyć, ile masz treści.
Gdy będziesz zadowolony z ustawień, kliknij przycisk „Zapisz” w prawym górnym rogu.
Wyświetlanie Twojego filtrującego portfolio
Teraz, gdy dostosowałeś swój filtr, musisz dodać go do swojej strony internetowej. Najlepsze w WPFilters jest to, że łatwo współpracuje z natywnym blokiem WordPress Query Loop.
Blok Query Loop to wbudowane rozwiązanie WordPress do wyświetlania dynamicznych treści. Doskonale współpracuje z WPFilters, tworząc filtrujące wyświetlacze treści.
Po prostu edytuj stronę, na której ma pojawić się Twoje portfolio.
Najpierw dodaj blok „Element WPFilters” do strony. W ustawieniach bloku po prawej stronie upewnij się, że wybrany jest Twój filtr „Kategoria WordPress”.
Następnie, bezpośrednio pod filtrem, dodaj blok Query Loop.
Możesz wybrać wzór „Siatka” lub „Lista”, który pasuje do Twojego projektu.
W ustawieniach bloku po prawej stronie znajdź sekcję „Ustawienia”. Upewnij się, że wybrałeś typ zapytania „Niestandardowe” i typ posta „Posty”.
Zapewni to, że blok wyświetli Twoje posty, a nie bieżącą stronę.
Wskazówka eksperta: Chociaż blok Query Loop jest potężny, jego poprawne skonfigurowanie może być trudne dla początkujących. Jeśli nie widzisz swoich elementów, sprawdź dokładnie, czy wybrałeś właściwy typ posta w ustawieniach bloku.
To wszystko! Możesz teraz wyświetlić podgląd swojej strony.
Po wybraniu kategorii w filtrze, lista postów natychmiast się zaktualizuje, aby pokazać wyniki.
Uwaga: Filtry można również dodawać do paska bocznego jako widżety lub bloki. Używane w ten sposób, będą automatycznie wchodzić w interakcję z innymi głównymi zapytaniami strony, takimi jak listy produktów WooCommerce, archiwa wpisów na blogu lub dowolne inne treści renderowane za pomocą pętli WP_Query.
Samouczek wideo
Najczęściej zadawane pytania dotyczące portfolio z filtrowaniem
Oto niektóre z najczęściej zadawanych pytań, które nasi czytelnicy zadają na temat tworzenia portfolio z filtrowaniem w WordPressie.
1. Jaki jest najlepszy wtyczka WordPress do portfolio z filtrowaniem?
Najlepsza wtyczka zależy od Twoich konkretnych treści. W przypadku portfolio opartych na obrazach (takich jak fotografia czy projektowanie graficzne) Envira Gallery jest najlepszym wyborem, ponieważ skupia się na wysokiej jakości prezentacji wizualnej.
Jednak w przypadku portfolio opartych na projektach (takich jak studia przypadków, wpisy na blogu lub oferty nieruchomości) WPFilters jest lepszy, ponieważ pozwala filtrować istniejące treści WordPress według kategorii, tagów lub niestandardowych pól.
2. Czy mogę stworzyć portfolio produktów z filtrowaniem dla WooCommerce?
Tak. WPFilters jest specjalnie zaprojektowany do bezproblemowej współpracy z WooCommerce. Pozwala tworzyć portfolio produktów, w którym klienci mogą filtrować przedmioty według ceny, atrybutów produktu (takich jak rozmiar lub kolor) i kategorii, oferując doświadczenie zakupowe podobne do Amazon.
3. Czy użytkownicy muszą przeładować stronę, aby zobaczyć przefiltrowane wyniki?
Nie. Zarówno Envira Gallery, jak i WPFilters wykorzystują technologię Ajax. Kiedy odwiedzający kliknie filtr, treść aktualizuje się natychmiast, bez przeładowywania strony. Zapewnia to odwiedzającym szybkie i płynne wrażenia.
4. Czy mogę dodawać filmy do mojego portfolio z filtrowaniem?
Tak, jeśli wybierzesz Envira Gallery, możesz zainstalować dedykowany dodatek Videos Addon. To rozszerzenie pozwala na dodawanie filmów z YouTube, Vimeo i hostowanych lokalnie do Twojego portfolio z filtrowaniem, obok Twoich obrazów.
5. Czy te wtyczki portfolio będą działać z moim motywem WordPress?
Tak. Zarówno Envira Gallery, jak i WPFilters są zaprojektowane do współpracy z każdym poprawnie zakodowanym motywem WordPress. Łatwo integrują się również z popularnymi kreatorami stron, takimi jak SeedProd, Divi i Elementor, co pozwala na umieszczenie Twojego portfolio w dowolnym miejscu na stronie.
Dodatkowe zasoby i kolejne kroki
Teraz, gdy wiesz, jak stworzyć portfolio z filtrowaniem, możesz chcieć poznać inne sposoby na ulepszenie galerii i obrazów na swojej stronie. Zapoznaj się z tymi pomocnymi poradnikami:
- Najlepsze wtyczki do galerii zdjęć WordPress – Zapoznaj się z naszą ekspercką analizą najlepszych wtyczek do galerii, aby upewnić się, że używasz najlepszego narzędzia do tego zadania.
- Jak dodać galerię z efektem lightbox – Spraw, aby obrazy w Twoim portfolio wyróżniały się, umożliwiając użytkownikom ich przeglądanie w pięknym nakładce lightbox.
- Jak automatycznie dodać znak wodny do obrazów – Chroń swoją ciężką pracę, automatycznie dodając swoje logo lub znak wodny do każdego przesyłanego zdjęcia.
- Jak stworzyć galerię obrazów produktów WooCommerce – Jeśli sprzedajesz swoje zdjęcia lub dzieła sztuki online, ten przewodnik pokaże Ci, jak stworzyć oszałamiające galerie produktów dla Twojego sklepu.
- Jak stworzyć galerię obrazów w WordPress – Świetne przypomnienie podstaw tworzenia pięknych i responsywnych galerii obrazów.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Dennis Muthomi
Galerie z możliwością filtrowania są niezbędne dla twórców.
Przydatną wskazówką, której się nauczyłem, jest stworzenie znormalizowanego systemu tagowania przed skonfigurowaniem tagów Envira Gallery. Robię to ze wszystkimi moimi klientami fotografami. Trzymam się spójnych tagów, takich jak „ślub”, „portret” i „komercyjne” w ich pracach. Jest to bardzo pomocne z dwóch powodów:
– Znacznie ułatwia utrzymanie portfolio
– Zapewnia lepsze wrażenia z filtrowania dla odwiedzających
BTW, wspomniany przez Ciebie dodatek Tags Addon doskonale nadaje się do wdrożenia tego systemu!
Haim
Wszystkie znalezione do tej pory galerie zdjęć, które obsługują tagi, pozwalają na filtrowanie po jednym tagu naraz. Chciałbym zaimplementować galerię, w której mogę filtrować na podstawie wielu tagów, aby uzyskać zdjęcia posiadające WSZYSTKIE tagi. W tym celu wybór tagów powinien być w formie pól wyboru, aby umożliwić zaznaczenie więcej niż jednego. Czy ktoś może wskazać mi takie rozwiązanie dla WP? Dzięki.
divp
dobra robota, dziel się dalej
Lewis
Naprawdę świetny artykuł, podobał mi się ten motyw i wkrótce zatrudnię programistę stron internetowych, aby zbudował mi podobny motyw. Dzięki!