Hur man skapar en live-sökning med automatisk komplettering i WordPress

När besökare inte hittar vad de letar efter, stannar de inte kvar – de klickar sig bort, ofta för gott.

Standard-WordPress-sökningen gör det inte enkelt. Den är långsam, klumpig och föråldrad: skriv ett nyckelord, tryck på Enter, vänta på en fullständig sidladdning... bara för att få resultat som kanske inte ens är relevanta.

Föreställ dig nu motsatsen… sökresultat som visas omedelbart, i samma ögonblick som en besökare börjar skriva. Det är magin med live autocomplete-sökning (även känd som Ajax-sökning). Det känns modernt, enkelt och håller folk engagerade på din webbplats.

I den här guiden får du lära dig hur du lägger till live-sökning med automatisk komplettering i WordPress, så att du kan leverera blixtsnabba resultat, förbättra användarupplevelsen och behålla besökare längre. 🧑‍💻

Varför lägga till Live Autocomplete-sökning i WordPress?

Live autocomplete-sökning hjälper besökare att snabbare hitta det de letar efter på din webbplats, utan att sidan laddas om. När användare skriver i sökfältet, visas resultat omedelbart i en rullgardinsmeny, så att de kan klicka och gå direkt till innehållet de behöver.

Den här typen av snabb, hjälpsam upplevelse gör att folk stannar längre på din WordPress-webbplats och minskar frustrationen.

Faktum är att forskning visar att 40 % av användarna lämnar en webbplats om sökupplevelsen är dålig eller visar irrelevanta resultat. Med sökning med automatisk komplettering behöver besökare inte gissa rätt nyckelord, vänta på en långsam resultatsida eller stöta på en återvändsgränd.

Tyvärr är WordPress-sökning ganska begränsad som standard. Den söker inte alltid igenom saker som produktdetaljer eller anpassade inläggstyper, och den kämpar med exakta matchningar.

Ibland visas till och med en sida med "inga resultat hittades", även när innehållet finns där.

Det är där live-sökning kan vara riktigt hjälpsamt. Det är särskilt användbart för bloggar, nyhetssajter och onlinebutiker, där besökare snabbt vill hitta något specifikt.

Om du vill göra det enklare för människor att upptäcka ditt bästa innehåll, är det ett enkelt och effektivt sätt att lägga till live-sök.

Hur man lägger till levande autosökning i WordPress

Det enklaste sättet att lägga till live autocomplete (Ajax) sökning på din webbplats är att använda ett plugin. I den här handledningen kommer jag att använda det kostnadsfria pluginet SearchWP Live Ajax Search, som är ett av de bästa WordPress-sökpluginsen.

Det fungerar direkt genom att automatiskt uppgradera befintliga sökformulär på din webbplats, som det i ditt temas sidhuvud eller sidofält. Detta innebär att du kan få live-sökförslag omedelbart utan att behöva koda eller ändra några inställningar.

Nu ska jag guida dig genom hur du skapar en live autocomplete-sökning i WordPress.

Här är en snabb översikt över allt jag kommer att täcka:

Låt oss börja!

Steg 1: Installera och aktivera SearchWP Live Ajax Search

Först måste du installera och aktivera tillägget SearchWP Live Ajax Search plugin.

Du hittar detta plugin direkt i din WordPress-instrumentpanel genom att gå till Plugins » Lägg till plugin.

På nästa skärm, sök efter "SearchWP Live Ajax Search".

När du hittar tillägget i sökresultaten klickar du på knappen 'Installera nu'. När installationen är klar klickar du på 'Aktivera' för att aktivera tillägget på din webbplats.

För detaljerade installationsinstruktioner, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Pluginet är helt gratis och utvecklat av samma team som ligger bakom premium-pluginet SearchWP. Det fungerar oberoende, så du behöver inte köpa något för att komma igång med live-sök-funktionalitet.

När den har aktiverats kommer ett nytt menyalternativ för ‘SearchWP’ att visas i ditt WordPress adminområde. Du använder detta för att konfigurera dina inställningar i nästa steg.

Steg 2: Konfigurera grundläggande sökinställningar

Nu när pluginet är installerat behöver du aktivera live-sökfunktionen.

Gå till SearchWP » Inställningar i din WordPress-instrumentpanel.

På inställningssidan ser du konfigurationsalternativen. Se till att du är på fliken 'Live Search' och leta efter växlingsknappen 'Enable Live Search' nära toppen av sidan.

Klicka bara på växlingsknappen för att aktivera den, och se sedan till att klicka på 'Spara'-knappen för att lagra dina inställningar.

När den är aktiverad kommer live Ajax-sökningen automatiskt att börja fungera med dina befintliga sökformulär på din WordPress-webbplats.

Plugin använder smarta standardinställningar som fungerar bra för olika typer av webbplatser direkt ur lådan. Som standard är pluginet konfigurerat för att söka i dina inläggstitlar, sidtitlar och innehåll för att ge relevanta förslag.

Steg 3: Lägg till live-sökfältet på din webbplats (valfritt)

SearchWP Live Ajax Search-pluginet aktiverar automatiskt live-sökning på alla *befintliga* sökformulär i ditt WordPress-tema.

Du kanske dock också vill lägga till en sökfält på en ny plats, som din sidofält, sidfot eller en anpassad landningssida. Detta steg visar dig hur du gör det.

Lägg till Live Autocomplete-sökning till widget-redo områden

För att lägga till en sökruta i widgetområden som din sidofält eller sidfot, måste du gå till Utseende » Widgets i din WordPress-adminpanel.

Klicka på '+'-knappen i widgetområdet, som sidofältet eller sidfoten, sök sedan efter standardwidgeten 'Sök'.

SearchWP är utformat för att automatiskt upptäcka denna standardwidget och uppgradera den med live-autokompletteringsfunktioner. Så du behöver inte leta efter ett specifikt "SearchWP"-block.

När det har lagts till kan du anpassa platshållartexten.

Till exempel, om du driver en nyhetswebbplats, kanske du anpassar widgetens titel med något som "Sök senaste nyheter" eller "Hitta nyhetsartiklar".

Eller så kan du helt enkelt lämna det som "Sök".

Glöm inte att klicka på knappen ‘Uppdatera’ för att spara dina ändringar. Sökfältet för live-sökning kommer nu att visas i ditt widget-område.

Så här ser det ut på min demosida:

Lägg till live-sökning med automatisk komplettering med Full Site Editor (FSE)

Om du använder ett blockbaserat tema som stöder Full Site Editor, kan du lägga till sökrutor i olika delar av din webbplats, som sidhuvudet, sidofältet och mer.

Gå först till Utseende » Redigerare från din WordPress-instrumentpanel.

Detta startar Full Site Editor.

Härifrån klickar du på 'Mallar', eller så kan du gå till Mönster » Sidhuvud – beroende på ditt aktiva blocktema.

Därefter kan du välja den mall du vill redigera, till exempel ditt sidhuvud eller en sidmall.

De exakta alternativen beror på ditt tema, men jag rekommenderar att du väljer malldelen 'Sidhuvud'. Detta säkerställer att sökfältet visas på varje sida på din webbplats.

När du klickar på mallen ser du en visuell redigerare med block.

Klicka på '+'-knappen för att lägga till ett nytt block, sök sedan efter 'Sök' i blockinfogaren. Du kan sedan flytta Sök-blocket upp och ner till önskad plats inom mallen.

Härifrån kan du anpassa sökblockets utseende med panelen för blockinställningar.

Du kan till exempel justera platshållartexten.

Om du driver en WordPress-blogg, kanske du vill använda något som "Sök i bloggen" eller "Hitta hjälpsamma artiklar". Eller så kan du också helt enkelt lämna det som "Sök".

Du kan också anpassa stil- och layoutalternativen för sökfältet för att matcha din webbplatsdesign.

När du är nöjd med hur det ser ut, klicka på knappen ‘Uppdatera’ för att spara dina ändringar.

Steg 4: Testa och felsök din live-sökning

Nu är det dags att testa din nya live-sökfunktion för att se till att den fungerar korrekt.

Jag rekommenderar att du öppnar din webbplats i ett inkognitofönster och skriver några tecken i sökfältet. Om allt fungerar ser du resultat dyka upp direkt i en rullgardinsmeny. Det betyder att Ajax fungerar korrekt.

Det är en bra idé att testa din live-sökning på olika enheter som telefoner och surfplattor för att säkerställa att den är mobilvänlig. Kontrollera att tangentbordet på skärmen inte döljer rullgardinsmenyn med sökresultat när en användare skriver.

Du kan också prova det i flera webbläsare, som Chrome, Firefox och Safari, för att säkerställa att live-resultat visas konsekvent.

Om den levande sökningen inte visas eller fungerar som förväntat, är de vanligaste orsakerna cacheproblem och konflikter med tillägg.

Cache-plugins lagrar statiska kopior av dina sidor för att snabba upp laddningen. Detta kan dock ibland förhindra att "live"-sökmanuskript körs, vilket innebär att resultaten inte visas omedelbart.

Ett bra plugin för detta är WP Rocket. Det är nybörjarvänligt och låter dig rensa cache, optimera skript och styra hur filer laddas för bättre prestanda.

För detaljer kan du se vår guide om hur du rensar WordPress-cachen.

Om det inte löser problemet, försök att inaktivera andra plugins en efter en för att kontrollera konflikter. Detta kan hjälpa dig att identifiera om ett annat plugin stör din live-sökning.

För fler felsökningstips, se vår guide om hur man fixar WordPress-sökning som inte fungerar.

Bonustips: Uppgradera för ännu smartare sökning (Fuzzy Matching)

Din nya live-sökning erbjuder en mycket bättre användarupplevelse för dina besökare. Men vad händer om någon skriver fel? Som standard kanske WordPress inte returnerar några resultat för "wordpres" istället för "wordpress".

Det är här "fuzzy search" (ungefärlig sökning) kommer in, och det är en kraftfull funktion som finns i premium SearchWP plugin.

Fuzzy sökning hjälper din webbplats att förstå vad dina användare försöker hitta, även om de stavar fel eller använder delvisa ord.

Till exempel, om någon söker efter "vntage furniture", kommer en webbplats med suddig sökning fortfarande att visa dem relevanta resultat för "vintage furniture".

Detta förhindrar att användare hamnar i en återvändsgränd utan resultat och hjälper dem att hitta innehåll, förbättrar användarupplevelsen och behåller dem på din webbplats.

För steg-för-steg-instruktioner kan du se vår guide om hur du lägger till suddig sökning i WordPress.

Vanliga frågor om att lägga till live-autofyllningssökning i WordPress

Jag får många frågor från våra läsare om WordPress sökfunktionalitet, så jag har sammanställt svar på de vanligaste.

Vilket är det bästa WordPress-sökpluginet?

För live-sökfunktionalitet rekommenderar jag SearchWP Live Ajax Search eftersom det är gratis och fungerar utmärkt direkt ur lådan.

Om du behöver mer avancerade funktioner som sökning i anpassade fält eller detaljerad analys, då är premiumpluginet SearchWP utmärkt.

Hur lägger jag till autocomplete till adressfält i WordPress?

Adressautocomplete skiljer sig från innehållssökning. Den använder tjänster som Google Places API för att föreslå verkliga adresser medan användare skriver.

Du behöver ett formulärplugin som WPForms eller Gravity Forms som inkluderar funktioner för adress autocomplete. Detta ansluter till karttjänster för att ge förslag på gatuadresser, vilket är separat från att söka i din webbplats innehåll.

Kan jag skapa ett formulär som låter användare söka inom en specifik kategori?

Om du vill lägga till en rullgardinsmeny så att användare kan söka efter kategori, behöver du pluginet SearchWP Pro.

Gratispluginet SearchWP Live Ajax Search (det vi täcker i den här guiden) visar kategorinamn i live-resultaten, men det låter dig inte skapa ett komplett sökformulär med kategorifilter.

För att få den funktionen behöver du uppgradera till den fullständiga SearchWP-pluginen och följa vår handledning om hur man söker efter kategori i WordPress.

Hur lägger jag till en sökfunktion på min WordPress-webbplats?

De flesta WordPress-teman inkluderar en inbyggd sök-widget som du kan lägga till i din meny, sidofält, header eller footer.

För detaljer, se vår guide om hur man lägger till en sökfält i din WordPress-meny.

Fler guider för att förbättra WordPress-sökning

Jag hoppas att den här guiden hjälpte dig att lägga till live autocomplete-sökning på din WordPress-webbplats. Du kanske också vill kolla in våra andra relaterade guider för att förbättra din webbplats sökfunktion:

• Hur man söker efter kategori i WordPress
• Hur man lägger till PDF-indexering och sökning i WordPress
• Hur du gör dina bloggkommentarer sökbara i WordPress
• Hur man lägger till WordPress-sökning på bloggarkivsidan
• Hur man ser sökanalyser i WordPress (enkla sätt)

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.