Oavsett om du är fotograf, designer eller företagare är din portfölj det mest kraftfulla verktyget du har för att vinna nya kunder. Men det kan vara frustrerande för besökare om de måste gå igenom dussintals bilder eller projekt bara för att hitta det de letar efter.
Jag har sett hur en oorganiserad portfölj kan göra att du missar möjligheter. Om en potentiell kund vill se dina fallstudier för 'Logotypdesign' men går vilse bland dina projekt för 'Webbutveckling', kanske de helt enkelt går vidare.
Det är där en filtrerbar portfölj kommer in. Den låter besökare sortera ditt arbete efter kategori, tagg eller projekttyp med ett enda klick, vilket gör det enkelt för dem att hitta exakt det de behöver.
I den här guiden visar jag dig hur du enkelt skapar en filtrerbar portfölj i WordPress, steg för steg.
Jag kommer att täcka två metoder, så att du kan välja den som bäst passar dina behov:
- Metod 1: Envira Gallery (Rekommenderas för foton) – Bäst om du vill visa ett galleri med bilder (som ett bröllopsalbum eller en fotovisning).
- Metod 2: WPFilters (Rekommenderas för projekt) – Bäst om du vill filtrera fallstudier, blogginlägg eller WooCommerce-produkter.
Varför skapa en filtrerbar portfölj i WordPress?
De flesta fotografer och designers skapar vackra portföljer som visar deras bästa fotografier. Ibland kan dock personer som vill anlita dig vilja se om du har gjort något liknande tidigare.
Till exempel kan någon som letar efter en modefotograf vilja se ditt tidigare arbete inom mode.
Att lägga till filter i din portfölj gör att du kan visa ditt arbete under olika taggar. Det hjälper också dina användare att enkelt sortera objekt i din portfölj.
Låt oss titta på hur du enkelt skapar en filtrerbar portfölj i WordPress, utan kodning krävs.
Metod 1: Skapa en filtrerbar portfölj med Envira Gallery (Rekommenderas för foton)
Envira Gallery är det bästa pluginet för fotogallerier för WordPress. Det låter dig skapa vackra, filtrerbara bildportföljer som laddas snabbt och ser bra ut på alla enheter.
Vi har grundligt testat Envira Gallery för att se hur det jämför sig med andra lösningar. För att läsa mer om vår erfarenhet, se vår fullständiga recension av Envira Gallery.
Först måste du installera och aktivera pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Notera: Även om det finns en gratisversion av Envira Gallery, behöver du Plus-planen eller högre för att komma åt Tags Addon som krävs för den här handledningen.
Efter aktivering måste du besöka sidan Envira Gallery » Inställningar för att ange din licensnyckel. Du kan få denna information från ditt konto på Envira Gallerys webbplats.
När du har angett nyckeln bör du klicka på knappen 'Verifiera nyckel'. Du kommer att se ett meddelande om att webbplatsen nu tar emot uppdateringar.
Därefter behöver du installera tillägget för taggar. För att göra det, gå till sidan Envira Gallery » Tillägg och leta upp Taggar-tillägget.
När du hittar den behöver du klicka på knappen ‘Installera’.
Envira Gallery hämtar och installerar tillägget åt dig, och sedan behöver du klicka på knappen 'Aktivera' för att börja använda det.
Nu är du redo att skapa din filtrerbara portfölj.
Skapa din portfölj och organisera bilder
Gå till sidan Envira Gallery » Lägg till ny för att skapa ditt första galleri och ge det ett namn.
Du kan nu lägga till foton i ditt galleri. Klicka på knappen ‘Välj filer från din dator’ för att ladda upp nya bilder, eller klicka på ‘Välj filer från andra källor’ för att välja bilder som redan finns i ditt WordPress-mediabibliotek.
Om bilderna redan finns i WordPress mediabibliotek, bör du klicka på knappen 'Välj filer från andra källor'.
Envira kommer nu att ladda upp och infoga dessa filer i ditt galleri. När det är klart kan du scrolla ner för att se dina bilder.
Experttips: Högupplösta bilder kan sakta ner din webbplats prestanda. Jag rekommenderar att använda ett verktyg som EWWW Image Optimizer eller Smush för att komprimera dina portföljbilder innan du laddar upp dem till Envira.
För mer information, se vår guide om hur man lägger till bildgallerier i WordPress.
Klicka sedan på pennikonen för att redigera en bild. Detta öppnar ett popup-fönster där du kan lägga till taggar och annan metadata till dina foton.
Tänk på taggar som nyckelord eller kategorier för dina bilder. Du kan till exempel använda taggar som 'Bröllop', 'Porträtt', 'Landskap' eller 'Svartvitt'. Dessa taggar kommer att bli de klickbara filter som dina besökare använder för att sortera ditt porträttgalleri.
Ange de taggar du vill tilldela detta foto. Du kan lägga till flera taggar separerade med kommatecken. När du är klar klickar du på knappen 'Spara metadata' för att lagra dina taggar.
Nu behöver du upprepa processen för att lägga till taggar till alla bilder i ditt galleri.
Proffstips: Var konsekvent med dina taggar. Använd till exempel alltid ‘Porträtt’ istället för att växla mellan ‘Porträtt’ och ‘Porträtt’. Detta håller dina filter rena och lätta för besökare att använda.
Aktivera filterinställningarna
Efter att ha lagt till taggar i dina foton, klicka på fliken ‘Taggar’ till vänster på din gallerisida. Det är här du kan aktivera eller inaktivera taggfiltrering för ditt galleri.
Du måste kryssa i rutan ‘Aktivera taggfiltrering?’ för att aktivera taggfiltrering, och du kommer att kunna se inställningar för detta alternativ.
Du kan välja placeringen av taggarna (ovanför eller under galleriet), bestämma om du vill visa alla taggar eller bara specifika, och konfigurera andra visningsinställningar.
När du är klar klickar du helt enkelt på knappen 'Publicera' för att göra ditt galleri live. Ditt porträttgalleri är nu redo att läggas till på din webbplats.
Lägga till den filtrerbara portföljen på din WordPress-webbplats
Du kan nu skapa inlägget eller sidan där du vill visa din filtrerbara portfölj. Om du använder blockredigeraren, lägger du helt enkelt till ett Envira Gallery-block i artikeln.
Därefter bör du klicka på rullgardinsmenyn 'Sök efter ett galleri' och välja det galleri du publicerade tidigare.
Om du använder klassiska redigeraren, bör du klicka på knappen 'Lägg till galleri' som finns ovanför verktygsfältet för inläggsredigeraren.
Detta öppnar ett popup-fönster där du kan välja det galleri du precis skapade och infoga det i ditt WordPress-inlägg och sida.
Du kan nu uppdatera ditt inlägg eller din sida för att spara dina ändringar och förhandsgranska din webbplats för att se din filtrerbara portfölj i aktion.
Om du vill lära dig mer om vad du kan göra med Envira Gallery, kolla in dessa handledningar:
- Hur man skapar ett bildgalleri i WordPress (steg för steg)
- Hur man lägger till ett galleri i WordPress med en lightbox-effekt
- Hur man automatiskt lägger till vattenstämpel på bilder i WordPress
Metod 2: Skapa en filtrerbar portfölj med WPFilters (Rekommenderas för projekt)
WPFilters är det bästa pluginet för innehållsfiltrering för WordPress. Det låter dig lägga till Amazon-liknande sortering på din webbplats och fungerar perfekt för projektfallstudier och detaljerade projektsidor.
Det låter dina besökare filtrera ditt arbete efter kategori, tagg eller anpassade fält utan att ladda om sidan. Det ärver också ditt temas styling automatiskt genom inbyggda block, så du behöver inte oroa dig för manuella CSS-justeringar.
Vi har grundligt testat WPFilters för att se hur det jämför sig med andra lösningar. För att läsa mer om vår erfarenhet, se vår fullständiga recension av WPFilters.
Konfigurera plugininställningarna
Först måste du installera och aktivera pluginet WPFilters. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Vid aktivering startas installationsguiden automatiskt. Klicka på knappen ‘Låt oss komma igång’ för att börja.
Jag fann att introduktionsguiden är otroligt effektiv. Jag kunde gå från installation till ett fullt fungerande filtreringsblock på under 5 minuter.
Proffstips: Om du är en utvecklare som använder Advanced Custom Fields (ACF), kommer du att älska att WPFilters automatiskt upptäcker dina ACF-data. Detta är en enorm tidsbesparing eftersom du inte behöver mappa anpassade fält manuellt till dina filter.
På nästa skärm kommer du att tillfrågas: ‘Vilken typ av data använder din webbplats för filtrering?’ Detta talar om för plugin-programmet vilken typ av innehåll du har på din webbplats.
För en standardportfölj bör du kryssa i rutorna för ‘WordPress-kategori’ och ‘WordPress-tagg’.
Men om du bygger en produktportfölj för att sälja ditt arbete, se till att kryssa i alternativen ‘WooCommerce-kategori’ och ‘WooCommerce-pris’.
Om du har en mycket stor portfölj med djupa underkategorier, märkte jag att WPFilters hanterar hierarkisk nästning vackert genom att automatiskt indragna underkategorier. Detta förhindrar en lång textvägg och gör det mycket enklare för dina kunder att navigera komplexa projektlistor.
När du klickar på knappen ‘Spara och fortsätt’, kommer du att bli ombedd att ange din licensnyckel, som du hittar i ditt kontoområde på WPFilters webbplats.
På den sista skärmen ser du ett lyckomeddelande. Klicka helt enkelt på knappen ‘Spara och slutför’ för att avsluta installationen.
Anpassa dina portföljfilter
Installationsguiden skapar automatiskt filter åt dig baserat på dina val. Du kanske dock vill anpassa hur de ser ut.
Gå helt enkelt till WPFilters » Element från din WordPress-instrumentpanel. Här ser du de filter som installationsguiden skapade åt dig, som ‘WordPress-kategori’ och ‘WordPress-tagg’. I den här handledningen kommer vi att filtrera vår portfölj efter kategori.
Låt oss anpassa kategorifiltret. Du behöver klicka på pennikonen bredvid elementet 'WordPress-kategori' för att redigera det.
Detta öppnar filterredigeraren.
Du kan se att datakällan redan är inställd på 'Kategorier'.
Ta en stund att bekanta dig med inställningarna på den här sidan. För att göra filtret mer användbart rekommenderar jag att du aktiverar alternativet 'Antal objekt' under avsnittet Objekt.
Detta visar antalet projekt i varje kategori bredvid filter namnet (som 'Webbdesign (12)'), vilket hjälper besökare att se hur mycket innehåll du har.
När du är nöjd med dina inställningar klickar du på knappen 'Spara' i det övre högra hörnet.
Visa ditt filtrerbara portfölj
Nu när du har anpassat ditt filter behöver du lägga till det på din webbplats. Det bästa med WPFilters är att det fungerar enkelt med det inbyggda WordPress Query Loop-blocket.
Query Loop-blocket är WordPress inbyggda lösning för att visa dynamiskt innehåll. Det fungerar perfekt med WPFilters för att skapa filtrerbara innehållsvisningar.
Redigera helt enkelt sidan där du vill att din portfölj ska visas.
Lägg först till blocket 'WPFilters Element' på sidan. I blockinställningarna till höger, se till att ditt filter 'WordPress-kategori' är valt.
Lägg sedan, omedelbart under filtret, till ett Query Loop-block.
Du kan välja ett 'Rutnät' eller 'Lista'-mönster som passar din design.
I blockinställningarna till höger, hitta avsnittet 'Inställningar'. Se till att välja frågetypen 'Anpassad' och inläggstypen 'Inlägg'.
Detta säkerställer att blocket visar dina inlägg snarare än den aktuella sidan.
Experttips: Även om Query Loop-blocket är kraftfullt, kan det vara knepigt för nybörjare att konfigurera korrekt. Om du inte ser dina objekt, dubbelkolla då att du har valt rätt inläggstyp i blockinställningarna.
Det är allt! Du kan nu förhandsgranska din sida.
När du väljer en kategori i filtret uppdateras listan med inlägg omedelbart för att visa resultaten.
Notera: Filter kan även läggas till i en sidopanel som widgets eller block. När de används på detta sätt interagerar de automatiskt med andra primära sidfrågor som WooCommerce butikslister, bloggarkiv eller annat innehåll som renderas med en WP_Query-loop.
Videohandledning
Vanliga frågor om filtrerbara portföljer
Här är några av de vanligaste frågorna våra läsare ställer om att skapa filtrerbara portföljer i WordPress.
1. Vilket är det bästa WordPress-pluginet för en filtrerbar portfölj?
Det bästa pluginet beror på ditt specifika innehåll. För bildbaserade portföljer (som fotografi eller grafisk design) är Envira Gallery det bästa valet eftersom det fokuserar på högkvalitativ visuell presentation.
Men för projektbaserade portföljer (som fallstudier, blogginlägg eller fastighetslistningar) är WPFilters överlägset eftersom det låter dig filtrera befintligt WordPress-innehåll efter kategori, tagg eller anpassat fält.
2. Kan jag skapa en filtrerbar produktportfölj för WooCommerce?
Ja. WPFilters är specifikt utformat för att fungera sömlöst med WooCommerce. Det låter dig skapa en produktportfölj där kunder kan filtrera artiklar efter pris, produktegenskaper (som storlek eller färg) och kategorier, vilket ger en shoppingupplevelse som liknar Amazon.
3. Behöver användare ladda om sidan för att se filtrerade resultat?
Nej. Både Envira Gallery och WPFilters använder Ajax-teknik. När en besökare klickar på ett filter uppdateras innehållet omedelbart utan att sidan laddas om. Detta säkerställer att dina besökare får en snabb och smidig upplevelse.
4. Kan jag lägga till videor i min filtrerbara portfölj?
Ja, om du väljer Envira Gallery kan du installera det specifika Videos Addon. Den här tilläggsmodulen låter dig inkludera YouTube, Vimeo och lokalt lagrade videor i din filtrerbara portfölj tillsammans med dina bilder.
5. Fungerar dessa portföljplugins med mitt WordPress-tema?
Ja. Både Envira Gallery och WPFilters är designade för att fungera med alla korrekt kodade WordPress-teman. De integreras också enkelt med populära sidbyggare som SeedProd, Divi och Elementor, vilket gör att du kan placera din portfölj var som helst på din webbplats.
Ytterligare resurser och nästa steg
Nu när du vet hur du skapar en filtrerbar portfölj, kanske du vill utforska andra sätt att förbättra din webbplats gallerier och bilder. Kolla in dessa hjälpsamma guider:
- Bästa WordPress-plugins för fotogallerier – Se vår expertjämförelse av de bästa gallerierna för att säkerställa att du använder det bästa verktyget för jobbet.
- Hur man lägger till ett galleri med ljusboxeffekt – Få dina porträttbilder att sticka ut genom att låta användare se dem i en vacker ljusbox-överläggning.
- Hur man automatiskt lägger till en vattenstämpel på bilder – Skydda ditt hårda arbete genom att automatiskt lägga till din logotyp eller en vattenstämpel på varje foto du laddar upp.
- Hur man skapar ett produktbildgalleri för WooCommerce – Om du säljer dina foton eller konst online, kommer den här guiden att visa dig hur du skapar fantastiska produktgallerier för din butik.
- Hur man skapar ett bildgalleri i WordPress – En bra repetition av grunderna för att skapa vackra och responsiva bildgallerier.
Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Dennis Muthomi
Filtrerbara gallerier är ett måste för kreativa.
Ett hjälpsamt tips jag har lärt mig är att skapa ett standardiserat taggningssystem innan du ställer in dina Envira Gallery-taggar. Jag gör detta med alla mina fotografklienter. Jag håller mig till konsekventa taggar som "bröllop", "porträtt" och "kommersiellt" över deras arbete. Det är superhjälpsamt av två anledningar:
– Gör portföljunderhåll mycket enklare
– Skapar en bättre filtreringsupplevelse för besökare
Förresten, Taggar-tillägget du nämnde har varit perfekt för att implementera detta system!
Haim
Alla fotogallerier jag hittat hittills som stöder taggar tillåter filtrering av en tagg i taget. Jag skulle vilja implementera ett galleri där jag kan filtrera baserat på flera taggar för att få foton som har ALLA taggarna. För det bör taggvalet vara i form av kryssrutor för att tillåta att välja mer än en. Kan någon peka mig mot en sådan lösning för WP? Tack.
divp
bra jobbat fortsätt dela
Lewis
Riktigt fantastisk artikel, jag älskade det här temat och snart kommer jag att anlita en webbutvecklare för att bygga ett tema som detta åt mig. Tack!