Hur man lägger till Ajax-taxonomifilter i WordPress-sökning

Standard-sökningen i WordPress ger besökare en enda lång lista med inlägg utan möjlighet att begränsa den.

När de inte kan filtrera efter kategori, tagg eller inläggstyp, ger de flesta upp och återvänder till Google.

Att lägga till ett Ajax-taxonomifilter i din WordPress-sökning löser det. Det låter besökare omedelbart begränsa resultat efter kategori, tagg, anpassat fält eller inläggstyp, vilket kan leda till en mer användarvänlig upplevelse.

I den här guiden visar jag hur du lägger till ett Ajax-taxonomifilter på din WordPress-webbplats. I slutet kan du ge dina besökare en snabb och intuitiv sökning.

Varför använda Ajax Taxonomifilter i WordPress-sökning?

Ajax-driven sökning är snabbare och ger en bättre användarupplevelse än standard-sökfunktionen i WordPress. Ajax innebär att resultaten uppdateras direkt på sidan i realtid, utan en fullständig sidladdning.

Till exempel kan en bilhandlarwebbplats ha anpassade taxonomier för fordonstyper, prisklasser, modeller och mer. Med Ajax-filter kan besökare snabbt begränsa sina alternativ och hitta exakt vad de behöver utan att ladda om sidan.

Du kan lägga till liknande filter på din egen WordPress-webbplats för att förbättra navigeringen och hjälpa användare att hitta innehåll enklare.

Bakom kulisserna gör WordPress-taxonomier (som kategorier och taggar) det också enklare för webbplatsägare att organisera innehåll på ett strukturerat sätt.

Men standard-sökningen i WordPress är inte så kraftfull och erbjuder inte möjligheten att filtrera innehåll baserat på taxonomier, bland annat. Om du använder anpassade taxonomier på din webbplats, presterar standard-sökningen ännu sämre.

Det är här du behöver ett WordPress-plugin som hjälper dig. I följande avsnitt kommer jag att täcka två metoder för hur du lägger till ett Ajax-taxonomifilter i en WordPress-sökning.

Den första metoden förbättrar själva WordPress-sökmotoralgoritmen så att den inkluderar taxonomier i sökningsresultaten. Den andra metoden lägger till ett synligt Ajax-filtergränssnitt som integreras naturligt med den första metoden, så att besökare kan begränsa resultat med ett klick.

Klicka bara på länkarna nedan för att hoppa till önskad sektion:

Redo? Låt oss börja.

Metod 1: Lägg till Ajax-taxonomier i WordPress-sökning med SearchWP

Det enklaste sättet att lägga till Ajax-taxonomier i WordPress-sökningen är att använda SearchWP. Det är det bästa sökpluginet för WordPress och gör det enkelt för användare att hitta det de letar efter på din webbplats.

Det går utöver att bara använda innehållet i dina blogginlägg och sidor för att slå upp saker. SearchWP använder anpassade fält, taxonomier, WooCommerce-produktegenskaper, textfiler, anpassade tabeller och mer.

För mer information om pluginet, se vår omfattande recension av SearchWP.

Steg 1: Registrera dig för SearchWP

Först besöker vi SearchWP:s webbplats och skapar ett konto. Standardplanen (99 USD/år, 1 webbplats) täcker allt du behöver för den här metoden.

Om du planerar att lägga till ett filtergränssnitt på framsidan (Metod 2 nedan använder WPFilters, också från SearchWP), inkluderar All Access-paketet (399 USD/år) båda plugins och sparar dig kostnaden för att köpa dem separat.

Efter det kan du ladda ner och installera plugin på din webbplats. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Vid aktivering måste du gå till SearchWP » Inställningar från WordPress adminpanel. Här anger du helt enkelt licensnyckeln, som du enkelt hittar i ditt kontoområde.

Steg 2: Skapa din sökalgo

Gå nu till SearchWP » Algoritm från WordPress-instrumentpanelen.

Härifrån kan du redigera sökningens relevans för din webbplats. Du kan till exempel öka vikterna för titel, innehåll, slug och utdrag för att hjälpa användare att hitta det de letar efter.

För att lägga till taxonomier i sökningens relevans kan du klicka på knappen 'Lägg till/ta bort attribut'.

Detta öppnar ett nytt fönster.

Du kan klicka på rullgardinsmenyn "Taxonomier" och välja om du vill inkludera kategorier, taggar, format eller alla av dem i WordPress-sökningen.

Efter att ha valt taxonomierna, glöm inte att klicka på knappen 'Klar'.

Du bör nu se taxonomierna för din WordPress-algoritm för blogginläggssökning. Du kan använda skjutreglaget för att öka deras relevans i WordPress-sökningar.

Du kan också klicka på knappen 'Redigera regel' för att bestämma vilket innehåll som kan och inte kan visas i sökresultaten.

Till exempel kommer SearchWP att inkludera alla kategorier på din webbplats. Du kan ta bort kategorier som du inte vill att innehållet ska visas från eller lägga till flera villkor för att anpassa sökresultaten.

Glöm inte att klicka på knappen 'Klar' när du är klar.

Du kan nu redigera sökalgoritmen för dina sidor, mediefiler, WooCommerce-produkter och mer för att visas i SearchWP.

Nu, när en besökare söker efter sidor och inlägg på din webbplats, kommer SearchWP att inkludera taxonomier under sökprocessen.

Metod 2: Lägg till ett frontend-filtergränssnitt med WPFilters

Metod 1 gjorde WordPress-sökalgoritmen taxonomimedveten på backend. Metod 2 lägger till det synliga filtergränssnittet som besökare interagerar med på framsidan.

WPFilters är den naturliga partnern — den är byggd av samma SearchWP-team och integreras med SearchWP direkt. Den levereras med en dra-och-släpp-byggare, så du kan ställa in kryssrutor, rullgardinsmenyer, skjutreglage och sökfilter utan att röra kod. Den stöder också Advanced Custom Fields och alla anpassade inläggstyper, vilket gör den till ett starkt val om du har byggt ut anpassat innehåll på din webbplats.

Att placera WPFilters-elementet i sidofältet för sökresultat (eller vilket widgetområde som helst som visas på sidan med sökresultat) låter besökare begränsa SearchWPs resultat i realtid, utan sidomladdningar.

För mer information kan du kolla in vår fullständiga WPFilters-recension.

Steg 1: Installera WPFilters-pluginet

För att komma igång måste du skapa ett WPFilters-konto på SearchWP:s webbplats. WPFilters utvecklas av teamet på SearchWP, så det integreras inbyggt med SearchWP-konfigurationen du just slutförde i Metod 1.

Om du köpte SearchWP All Access-paketet i Metod 1, ingår WPFilters redan i din prenumeration — ladda bara ner WPFilters ZIP från ditt SearchWP-kontoområde och hoppa fram till steg 2.

Annars klickar du på knappen 'Get WPFilters Now' på WPFilters produktsida, väljer en plan och slutför köpprocessen. Standardplanen (49 USD/år, 1 webbplats) täcker allt du behöver för den här handledningen.

Vid registrering vill du ladda ner plugin ZIP-filen till din dator och kopiera din licensnyckel.

Därefter installerar och aktiverar du plugin på din WordPress-webbplats.

Gå till Plugins » Lägg till plugin i ditt WordPress-adminområde.

Därefter kan du klicka på knappen 'Ladda upp plugin'.

I filuppladdaren klickar du helt enkelt på knappen 'Välj fil' för att ladda upp din WPFilters zip-fil från din dator. Klicka på 'Installera nu' och sedan 'Aktivera' när den visas för att slutföra installationen.

För detaljer, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

När pluginet är aktivt guidar WPFilters dig genom en installationsguide för att slutföra den initiala konfigurationen. Jag rekommenderar att du följer varje steg noggrant så att pluginet är redo att användas innan du börjar bygga dina filter.

När det är klart kan du klicka på 'Spara och slutför'.

Steg 2: Konfigurera Ajax-taxonomifilter

Nu är det dags att skapa ditt första filter.

Från din WordPress-instrumentpanel, gå till WPFilters » Element och klicka på 'Lägg till nytt' för att skapa ett nytt filterelement.

Du kommer att uppmanas att ge ditt filterelement ett namn.

Välj något beskrivande som hjälper dig att identifiera det senare, som "Kategorifilter" eller "Produkttypfilter".

Därefter måste du välja en filtertyp.

WPFilters ger dig flera visningsalternativ att välja mellan, inklusive:

• Kryssrutor – utmärkt för att låta användare välja flera alternativ samtidigt
• Radioknappar – idealiskt när du vill att användare ska välja endast ett alternativ
• Listrutor – ett kompakt alternativ som fungerar bra när du har många filterval
• Listruta (flerval) – Låter användare välja mer än ett alternativ från en enda listruta
• Sök – Lägger till en sökruta så att användare snabbt kan hitta det de behöver
• Reglage – Idealiskt för att välja intervall, som priser eller andra numeriska värden
• Återställningsknapp – Låter användare rensa alla tillämpade filter med ett klick

För den här handledningen använder vi filtertypen Kryssrutor eftersom den tillåter användare att välja flera kategorier eller taggar samtidigt. Det ger dem mest flexibilitet när de begränsar sin sökning.

De andra filtertyperna passar olika jobb: använd ett Reglage för prisintervall eller numeriska värden, en Listruta när en taxonomi har 10+ termer och vertikalt utrymme är begränsat, Radioknappar för attribut med ett enda värde som sorteringsordning, och Sök när det finns för många termer att skanna visuellt.

När du är nöjd med filtertypen, scrolla ner till avsnittet ‘Datakälla’ . Det är här du kopplar ditt filter till en faktisk taxonomi på din webbplats.

Du kan välja bland alla taxonomier som finns tillgängliga på din WordPress-webbplats, som till exempel:

• Kategorier – standard WordPress-innehållskategorier
• Taggar – standard WordPress-taggar
• Anpassade taxonomier – alla anpassade taxonomier du har skapat för din webbplats

Jag rekommenderar att du tar en stund här för att fundera på vilken taxonomi som är mest meningsfull för dina besökare. Att välja rätt gör ditt filter mycket mer användbart och intuitivt för de som surfar på din webbplats.

Steg 3: Anpassa ditt filterelement

Nu när du har ställt in ditt filter och kopplat det till en taxonomi är det dags att anpassa hur det ser ut och beter sig på din webbplats. WPFilters ger dig ett bra utbud av visningsalternativ för att hjälpa dig att matcha filtret med din webbplatsdesign och dina besökares behov.

I avsnittet 'Behållare' hittar du alternativ som:

• Visningstitel – visar en rubrik ovanför ditt filter så att besökarna vet vad de filtrerar efter
• Utfällbara element – låter besökare expandera eller fälla ihop filtret, vilket är användbart om du har flera filter på en sida
• Visa mer/mindre – visa en länk för Visa Mer för att fälla ihop din lista om den är för lång
• Visa mer efter – om du aktiverar 'Visa mer/mindre', kan du ange antalet objekt att visa initialt innan länken visas
• Horisontellt layout – arrangerar dina filteralternativ sida vid sida istället för staplade, vilket kan fungera bra för bredare layouter

Fortsätt och aktivera de du vill ha.

Därefter kan du anpassa hur dina filterobjekt visas, till exempel:

• Antal objekt – visar antalet inlägg som finns tillgängliga under varje filterterm, så att besökarna vet vad de kan förvänta sig innan de klickar.
• Visa tomma – välj om du vill visa taxonomitermer som inte har något matchande innehåll.
• Hierarkisk – att aktivera hierarkisk visning gör det mycket enklare för läsare att navigera ditt innehåll, vilket kan förbättra användarupplevelsen.

Här är vad du ser på skärmen:

När du är nöjd med dina inställningar, klicka på 'Spara' för att lagra din filterkonfiguration.

Ditt filterelement kommer sedan att vara redo att läggas till i vilket inlägg eller sida som helst på din WordPress-webbplats.

Om du vill skapa ett annat WPFilters-element kan du helt enkelt upprepa processen.

Steg 4: Bädda in dina filter i WordPress

Nu när ditt filterelement är sparat är det dags att lägga till det på din webbplats så att besökarna faktiskt kan använda det.

För kombinationen SearchWP + WPFilters som vi satte upp i Metod 1, är den mest användbara placeringen sidofältswidgeten på din sökresultatsida — det är där SearchWP:s resultat visas, och filtret kommer att begränsa dem i realtid när besökarna klickar.

WPFilters ger dig tre placeringsalternativ:

• Sidofältswidget (rekommenderas för filtrering av sökresultat) – visas på varje sida som använder ditt sidofält, inklusive sökresultatsidan.
• Gutenberg-block – placera filtret på en specifik sida (bra om du också vill ha arkivsidor med filtrering, som en landningssida för 'Bläddra efter kategori').
• Kortkod – klistra in var som helst där en kortkod stöds, inklusive sidbyggare och klassiska widgets.

För att lägga till filtret i ditt sidofält, gå till Utseende » Widgets i ditt adminområde.

Härifrån, leta efter ditt temas sidofält (till exempel ett Primärt sidofält eller Sök sidofält) i listan över tillgängliga widgetområden. Klicka på det för att expandera och visa befintliga widgets.

Klicka sedan på plusikonen för att lägga till en ny widget, och lägg sedan till WPFilters Element-widgeten.

I panelen Elementinställningar, välj ditt filter från rullgardinsmenyn.

Du kan lägga till flera filterwidgets om du vill erbjuda fler filtreringsalternativ (en widget per taxonomi fungerar bra – till exempel ett Kategorifilter och ett Taggfilter sida vid sida).

När du har valt ditt filter, klicka på 'Uppdatera' eller 'Publicera' för att spara dina ändringar.

Ditt Ajax-taxonomifilter kommer nu att visas i sidofältet på din sökträffsida, vilket gör att besökare kan begränsa SearchWPs resultat i realtid.

Bonustips: Fler saker du kan göra med SearchWP

När du har lagt till Ajax-taxonomifiltrering finns det ännu fler sätt att förbättra din WordPress-sökning med SearchWP. Här är några extra funktioner som är värda att kolla in:

🌫️ Använd suddig sökning för bättre matchning

Som standard söker WordPress bara efter exakta matchningar. Det innebär att om en besökare stavar fel på ett ord eller använder en något annorlunda fras, kanske de inte hittar det de letar efter.

Fuzzy sökning löser det problemet genom att visa resultat som är tillräckligt nära, som att fånga felskrivningar eller liknande ordformer. Det är ett enkelt sätt att anpassa din WordPress-sökning för att bli smartare.

Se vår guide om hur du lägger till fuzzy sökning i WordPress för mer information.

📄 Gör PDF-filer sökbara

Om du delar PDF-filer på din webbplats, som manualer, e-böcker eller broschyrer, kan SearchWP indexera innehållet i dessa filer. Det innebär att när någon använder din sökfält kan resultaten inkludera vad som står i PDF-filerna, inte bara filnamnen.

Det är särskilt användbart för företagswebbplatser, resursintensiva bloggar och till och med skolor.

Läs mer i vår guide om hur du lägger till PDF-indexering och sökning i WordPress.

🛍️ Förbättra produktsökning i WooCommerce

Om du driver en onlinebutik kan SearchWP även förbättra din produktsökning.

Istället för att förlita dig på WooCommerce:s standard sökning kan du skapa en smartare produktsökning som prioriterar titlar, kategorier, taggar eller till och med anpassade fält. Detta hjälper kunder att hitta rätt produkt snabbare, och det kan leda till fler försäljningar.

Se vår guide om hur du skapar en smart WooCommerce produktsökning.

Och för fler tips och tricks kan du se vår guide om hur du förbättrar WordPress-sökningen med SearchWP.

Vanliga frågor om Ajax-taxonomifilter i WordPress

Innan jag avslutar, här är några vanliga frågor som våra läsare ställer om att lägga till Ajax-taxonomifilter i WordPress.

Behöver jag kodningskunskaper för att lägga till Ajax-filter i WordPress?

Nej, du behöver inga kodningskunskaper. Båda metoderna ovan fungerar utan kod – SearchWP konfigureras via sin inställningspanel, och WPFilters använder en dra-och-släpp-byggare plus en Gutenberg-block eller widget.

Behöver jag både SearchWP och WPFilters, eller kan jag bara använda en?

De gör olika jobb. SearchWP gör WordPress-sökmotorn själv taxonomimedveten på backend. WPFilters lägger till det synliga filtergränssnittet på frontend. Du kan använda SearchWP ensam om du bara vill ha bättre sökresultat, eller para ihop båda för den fullständiga Ajax-filtreringsupplevelsen. All Access-paketet inkluderar båda till ett enda pris.

Kan jag använda taxonomifilter på WooCommerce-produkter?

Ja, taxonomifilter fungerar utmärkt för WooCommerce-butiker. Du kan låta kunder filtrera produkter efter kategorier, taggar, attribut (som storlek eller färg) och mer – liknande filtreringsupplevelsen på stora e-handelswebbplatser.

Vad är skillnaden mellan Ajax-filtrering och vanlig filtrering?

Med Ajax-filtrering uppdateras resultaten omedelbart utan att sidan laddas om. Vanlig filtrering laddar om hela sidan varje gång en användare väljer ett alternativ, vilket kan kännas långsammare.

Kommer Ajax-filter att sakta ner min webbplats?

Nej, inte nödvändigtvis. I de flesta fall förbättrar Ajax-filter användarupplevelsen genom att bara ladda de filtrerade resultaten istället för att ladda om hela sidan. Se bara till att du använder ett väloptimerat plugin.

Förbättra din WordPress-webbplats med avancerad sökning och filter

Jag hoppas att den här artikeln hjälpte dig att lägga till ett Ajax-drivet taxonomifilter till din WordPress-sökning på din webbplats.

Därefter kanske du också vill ta en titt på våra guider om:

• Hur man låter användare filtrera inlägg och sidor i WordPress
• Hur man skapar en filtrerbar portfölj i WordPress
• Hur man ställer in WooCommerce produktfilter
• Hur du fixar att WordPress-sökningen inte fungerar
• Hur man ser sökordsanalys i WordPress

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.