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

När besökare inte kan hitta 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 exakt 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 hålla besökarna surfande 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. De behöver inte gissa rätt nyckelord eller vänta på en långsam resultatsida. Och de är mindre benägna att 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:

• Steg 1: Installera och aktivera SearchWP Live Ajax Search
• Steg 2: Konfigurera grundläggande sökinställningar
• Step 3: Add the Live Search Bar to Your Site (Optional)
  • Lägg till Live Autocomplete-sökning till widget-redo områden
  • Lägg till live-sökning med automatisk komplettering med Full Site Editor (FSE)
• Steg 4: Testa och felsök din live-sökning
• Bonustips: Uppgradera för ännu smartare sökning (Fuzzy Matching)
• Vanliga frågor om att lägga till live-autofyllningssökning i WordPress
• Fler guider för att förbättra WordPress-sökning

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 kan hitta detta plugin direkt i din WordPress-instrumentpanel genom att gå till Plugins » Lägg till nytt och söka 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 några olika alternativ för att konfigurera din sökning.

Se till att du är i 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.

Pluginet använder smarta standardinställningar som fungerar bra för olika typer av webbplatser direkt ur lådan. Som standard söker den i dina inläggstitlar och innehåll för att ge relevanta resultat.

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

SökWP 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 widget-områden som din sidofält eller sidfot, måste du gå till Utseende » Widgets i din WordPress-instrumentpanel.

Klicka på knappen ‘+’ i widgetområdet, som sidofältet eller sidfoten. Leta sedan efter widgeten Sök.

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.

Sedan måste du öppna fliken 'Mallar'.

Härifrån klickar du på mallen du vill redigera, till exempel din sidhuvud eller en sidmall.

De exakta alternativen beror på vilket tema du använder, men jag rekommenderar att du väljer en sidhuvudsmall eller navigeringsmenyn så att sökfältet visas över hela 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 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 layoutalternativ för sökfältet för att matcha din webbplats design.

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ökrutan.

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 levande sökning på olika enheter, inklusive telefon och surfplatta, för att säkerställa att den är mobilvänlig. Prova den även i flera webbläsare, som Chrome, Firefox och Safari, för att säkerställa att levande 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.

Din webbläsare eller cache-plugin kan lagra en gammal version av din webbplats filer (en 'cachad' version) för att snabba upp laddningstiderna. Ibland kan detta förhindra att det nya live-sök-skriptet körs korrekt.

Att rensa din WordPress-cache och webbläsar-cache säkerställer att din webbplats laddar den senaste versionen av sina filer, vilket ofta löser problemet.

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-sökning med automatisk komplettering 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 inkluderar anpassade inläggstyper i WordPress-sökresultat
• Hur man exkluderar specifika sidor, författare och mer från WordPress-sökning
• Hur man lägger till WordPress-sökning på bloggarkivsidan
• Hur man lägger till en sök-växlingseffekt i WordPress
• 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.