Hur man markerar söktermer i resultat i WordPress (2 metoder)

Tänk på senaste gången du sökte efter något på en webbplats. Du skannade förmodligen resultaten efter dina nyckelord, eller hur? 🔍

Det är precis vad dina webbplatsbesökare gör när de söker på din webbplats. Förutom att WordPress inte markerar dessa termer som standard.

Att ställa in markerade söktermer är en av de där enkla förbättringarna som omedelbart får din webbplats att kännas mer polerad och användarvänlig.

När besökare snabbt kan se varför varje resultat matchar deras sökning, är de mer benägna att klicka sig vidare och engagera sig i ditt innehåll.

Under åren av att bygga och hantera WordPress-webbplatser har jag upptäckt att dessa små justeringar av användarupplevelsen kan ha stor inverkan. 📝

Därför kommer jag att guida dig genom 2 enkla sätt att få söktermmarkering på din WordPress-webbplats, oavsett om du föredrar att använda ett plugin eller lägga till lite anpassad kod.

Varför ska jag markera söktermer på min webbplats?

Framhävning av söktermer hjälper besökare att snabbt hitta det innehåll de letar efter.

När användare skriver ett nyckelord i din webbplatsens sökfält, skannar de resultaten efter exakt de orden. Om inget sticker ut kanske de hoppar över användbart innehåll utan att inse det.

Genom att betona deras söktermer gör du resultaten lättare att läsa och visar omedelbart vilka artiklar som är mest relevanta.

Detta förbättrar användarupplevelsen, hjälper besökare att hitta information snabbare och försäkrar dem att de är på rätt plats. Det kan till och med uppmuntra användare att stanna kvar på din webbplats längre.

På WPBeginner gör vi de matchande nyckelorden fetstilta i våra sökresultat — det fungerar precis som markering. Det är en liten detalj, men den hjälper verkligen folk att hitta det de letar efter snabbare.

Med det sagt, låt oss visa dig hur du enkelt markerar söktermer i WordPress. Jag kommer att diskutera 2 metoder. Du kan använda länkarna nedan för att hoppa till den metod du väljer.

• Metod 1: Framhäv söktermer med SearchWP – Rekommenderas
• Metod 2: Markera söktermer med anpassad kod – gratis
• Bonus: Gör din sökning ännu snabbare med Live Ajax Search 🚀
• Vanliga frågor: Framhävning av söktermer i WordPress

Metod 1: Framhäv söktermer med SearchWP – Rekommenderas

Om du letar efter ett snabbt, problemfritt sätt att markera söktermer i dina WordPress-resultat, då är det bäst att använda SearchWP.

Enligt min åsikt är SearchWP ett av de bästa verktygen för att förbättra din webbplats sökfunktion.

Det ger dig mycket mer relevanta resultat än standard-WordPress-sökningen, och det bästa? Det gör det otroligt enkelt att markera söktermer. Du växlar bara en omkopplare, och det är klart.

Jag har grundligt testat SearchWP på vår demosida, och resultaten var imponerande. Det fungerar sömlöst, och den inbyggda markeringsfunktionen sparar massor av tid jämfört med manuell installation.

Vi har också en fullständig recension av SearchWP om du vill se alla dess funktioner och hur det fungerar.

Först måste du installera och aktivera SearchWP-pluginet. För steg-för-steg-instruktioner, se vår handledning om hur man installerar ett WordPress-plugin.

När du har aktiverat pluginet, gå till sidan SearchWP » Inställningar i din WordPress-instrumentpanel.

Här behöver du ange din licensnyckel.

Du hittar den här licensnyckeln under ditt konto på SearchWP:s webbplats. Kopiera och klistra helt enkelt in den.

Skrolla sedan ner till ‘Allmänna inställningar’ och växla omkopplaren ‘Markera termer’ till ‘På’.

Så fort det är aktiverat kommer alla nyckelord som dina besökare använder automatiskt att markeras i sökresultaten, vilket gör det superenkelt att hitta relevant innehåll.

I det här avsnittet hittar du också ytterligare inställningar som kan förbättra dina sökresultat.

Funktioner som Fuzzy Search och Quoted Search är särskilt användbara för WordPress-bloggar med mycket innehåll.

Den här funktionen gör det möjligt för besökare att hitta rätt innehåll även om de gör ett litet stavfel. Detta kan förhindra att de hamnar på en frustrerande sida med "inga resultat hittades".

Å andra sidan tillåter Quoted Search användare att söka efter en exakt fras genom att sätta den inom citattecken, precis som på Google.

Tänk på att alla dina inställningar sparas automatiskt.

När du är nöjd med dina allmänna inställningar är det en bra idé att utforska resten av SearchWPs anpassningsalternativ.

Du kan gå till sidan SearchWP » Algoritm i din instrumentpanel för att finjustera hur sökresultaten rangordnas.

Det här avsnittet är verkligen hjälpsamt eftersom det låter dig styra vikten (betydelsen) av olika delar av ditt innehåll — tänk på det som ett poängsystem för dina sökresultat.

Att ge mer vikt åt titlar, till exempel, innebär att träffar i inläggstiteln kommer att visas högre än träffar i brödtexten. På så sätt visas det mest relevanta innehållet först.

När du klickar på knappen ‘Källor & inställningar’ kan du också bestämma vad som ska inkluderas i ditt sökindex.

Istället för bara inlägg och sidor kan du lägga till kommentarer, anpassade inläggstyper, WooCommerce-produkter, SKU:er och mer.

Om du driver en blogg eller en onlinebutik, gör detta din sökning mycket mer användbar.

Till exempel kan det hjälpa en kund att hitta en produkt med dess SKU, som ‘TSHIRT-BLUE-LG’, vilket standard WordPress-sökning inte skulle kunna göra.

Vi har också satt ihop en komplett guide om hur du förbättrar WordPress-sökning med SearchWP om du vill fördjupa dig.

När du har sparat dina inställningar tar SearchWP automatiskt över ditt befintliga sökformulär. Inga extra steg krävs.

Gå bara till din webbplats och kör en snabb sökning. Du kommer att se de markerade nyckelorden direkt.

Om du inte redan har lagt till ett sökformulär på din webbplats än, oroa dig inte. Du kan följa vår steg-för-steg-handledning om hur man lägger till ett sökformulär i WordPress.

När det väl är inställt är du helt klar, och dina besökare kommer att njuta av en mycket bättre sökupplevelse från början.

Metod 2: Markera söktermer med anpassad kod – Gratis

Om du har en begränsad budget, kanske SearchWP inte är rätt val eftersom deras gratisplan inte inkluderar den här funktionen.

Den goda nyheten är att du fortfarande kan markera söktermer genom att lägga till ett PHP-kodavsnitt i din webbplats functions.php-fil.

Den största skillnaden ligger i långsiktigt underhåll. Ett plugin som SearchWP uppdateras regelbundet av sina utvecklare för att säkerställa kompatibilitet med nya versioner av WordPress.

Med ett anpassat kodavsnitt är du dock ansvarig för att se till att det fortsätter att fungera korrekt efter framtida uppdateringar.

Med det sagt kan det också vara riskabelt att redigera temafiler direkt.

Även ett litet misstag kan krascha din webbplats och låsa dig ute från administratörspanelen. Detta kallas ofta för 'White Screen of Death', och det kan vara stressande att fixa om du inte är utvecklare.

Därför rekommenderar jag att använda WPCode istället. Det är det bästa pluginet för kodavsnitt i WordPress och det säkraste sättet att lägga till anpassad kod utan att röra dina temafiler.

Detta beror på att WPCode kör dina kodsnuttar i en separat, säker miljö. Detta förhindrar att ett stavfel kraschar din webbplats och gör det enkelt att slå på eller av kodsnuttar med en omkopplare.

Dessutom fungerar dess gratis plan perfekt för denna metod.

Jag har grundligt testat WPCode i olika konfigurationer, och det fungerar pålitligt varje gång. Om du är nyfiken på allt det erbjuder, har vi också en detaljerad WPCode-recension som du kan titta på senare.

Men för nu, låt oss gå igenom hur man använder det för att markera söktermer på din webbplats.

Först måste du installera och aktivera pluginet WPCode. För detaljerade instruktioner kan du se vår guide om att installera ett WordPress-plugin.

Efter att du har aktiverat pluginet, besök sidan Kodavsnitt » + Lägg till avsnitt från instrumentpanelen.

Klicka här på knappen ' + Lägg till anpassat avsnitt' under alternativet 'Lägg till din anpassade kod (nytt avsnitt)'.

Du kommer nu att tas till en ny skärm där du måste välja 'PHP Snippet' som kodtyp. När det är gjort, ge ditt kodavsnitt ett namn.

Det här namnet kommer inte att vara synligt för dina besökare — det är bara för din egen referens. Därför rekommenderar jag att använda något beskrivande som Markera söktermer eller något annat som gör det lätt att känna igen.

Det hjälper dig att snabbt hitta och hantera kodavsnittet senare om du någonsin vill redigera eller inaktivera det.

Kopiera och klistra sedan in följande anpassade kod i rutan ‘Kodförhandsgranskning’.

Den här koden fungerar genom att hitta de nyckelord som din besökare sökte efter. Sedan slår den in dessa nyckelord i en speciell tagg som lägger till en färgad bakgrund.

// Highlight terms in titles
add_filter('the_title', 'highlight_search_terms_in_title', 10, 2);

// Highlight terms in excerpts
add_filter('the_excerpt', 'highlight_search_terms_in_excerpt');

// Optional: Highlight terms in content (if you're using the_content() in search results)
add_filter('the_content', 'highlight_search_terms_in_excerpt');

// Common highlight logic
function highlight_search_terms($text) {
    if (!is_admin() && is_search() && is_main_query()) {
        $search_query = get_search_query();

        // Output the CSS only once
        if (!defined('HIGHLIGHT_SEARCH_TERM_CSS')) {
            define('HIGHLIGHT_SEARCH_TERM_CSS', true);
            add_action('wp_head', function () {
                echo '<style>
                    strong.search-excerpt {
                        background-color: yellow;
                        color: black;
                        font-weight: bold;
                        padding: 0 2px;
                        border-radius: 2px;
                    }
                </style>';
            });
        }

        if (!empty($search_query)) {
            $keys = preg_split('/\s+/', $search_query);
            foreach ($keys as $key) {
                if (!empty($key)) {
                    $text = preg_replace('/(' . preg_quote($key, '/') . ')/iu', '<strong class="search-excerpt">$1</strong>', $text);
                }
            }
        }
    }

    return $text;
}

// Apply highlight logic to title and excerpt/content
function highlight_search_terms_in_title($title, $post_id) {
    return highlight_search_terms($title);
}

function highlight_search_terms_in_excerpt($excerpt) {
    return highlight_search_terms($excerpt);
}

Efter att ha klistrat in koden, scrolla ner i kodavsnittet för att hitta stylingsektionen. Du kommer att se den inuti echo '<style> ... </style>'; blocket. Den specifika raden du vill ändra är:

                        background-color: yellow;

Som standard ställer pluginet in bakgrundsfärgen för den markerade termen till gul med svart text. Men du kan enkelt anpassa detta genom att redigera den raden.

Byt bara ut yellow mot hexkoden för valfri färg du föredrar. För att till exempel ändra markeringen till ljusblått kan du använda #aeeffc. Se till att behålla semikolonet i slutet!

Jag rekommenderar att välja en bakgrunds- och textfärg som passar ditt varumärkes stil så att den smälter in fint med resten av din webbplats.

Du kan också justera teckensnittsvikt, rundade hörn och stoppning i det här avsnittet för att finjustera utseendet på markeringsrutan.

När du är nöjd med stilen, scrolla tillbaka till toppen, byt omkopplaren från 'Inaktiv' till 'Aktiv' och klicka på knappen 'Spara kodavsnitt' för att spara dina inställningar.

Om din webbplats redan har ett sökformulär kommer utdraget att börja fungera direkt och markera söktermer automatiskt.

Om du inte redan har lagt till ett sökformulär kan du följa vår tutorial om hur man lägger till ett sökformulär i WordPress.

Besök slutligen din webbplats, gör en snabb sökning, så ser du dina nyligen markerade termer i aktion.

Bonus: Gör din sökning ännu snabbare med Live Ajax Search 🚀

När du har lagt till söktermmarkering kanske du vill ta det ett steg längre genom att visa resultat medan besökare skriver.

Detta kallas live Ajax-sökning, och det fungerar precis som Googles autokomplettering. Det ger omedelbara förslag utan att behöva ladda om sidan.

Det är ett utmärkt sätt att göra din webbplats snabbare och mer interaktiv. Besökare kan hitta vad de letar efter nästan omedelbart, vilket sannolikt kommer att öka engagemanget.

För att ställa in detta rekommenderar jag pluginet SearchWP Live Ajax Lite Search, som fungerar utmärkt med det premium SearchWP-verktyget.

Det är gratis, fungerar sömlöst med de flesta WordPress-teman och hanterar allt automatiskt. Jag har testat det noggrant, och det ger alltid en bättre och snabbare sökupplevelse.

Installera bara pluginet som vilket annat WordPress-plugin som helst, aktivera det och aktivera sedan live-sökning i SearchWP-inställningarna.

Du kan enkelt lägga till sökformuläret i vilket inlägg, sida, sidofält eller widgetområde som helst.

Behöver du hjälp att komma igång? Kolla in vår kompletta handledning om hur du lägger till live Ajax-sökning på din WordPress-webbplats.

Vanliga frågor: Framhävning av söktermer i WordPress

Här är några frågor jag ofta får om att markera söktermer i WordPress:

Kan jag markera termer i AJAX- eller live-sökresultat?

Ja! Om du använder SearchWP tillsammans med pluginet SearchWP Live Ajax Lite Search, kommer de markerade termerna också att visas i live sökresultat – ingen sidladdning behövs.

Eftersom båda verktygen är byggda av samma team, fungerar de sömlöst direkt ur lådan.

Men om du använder ett annat live-sökplugin eller en anpassad AJAX-sökinställning måste du testa för kompatibilitet.

Alla plugins stöder inte framhävning av termer i dynamiska resultat, så det är en bra idé att testa på en staging-webbplats först för att säkerställa att allt visas korrekt.

Påverkar dessa markeringsfunktioner prestanda eller webbplatshastighet?

Inte riktigt. Båda metoderna jag täckte – att använda SearchWP och lägga till anpassad kod med WPCode – är lätta och optimerade för prestanda.

Själva markeringen körs på klientsidan, så den belastar inte din server mycket.

Med det sagt, om din webbplats har ett stort antal sökresultat eller tung anpassad styling, är det alltid en bra idé att testa saker först. Jag rekommenderar att du provar det i en staging-miljö för att säkerställa att markeringen ser bra ut och presterar smidigt innan du rullar ut det live.

Kommer söktermmarkering att fungera med anpassade inläggstyper eller WooCommerce?

Ja, absolut! Om du använder SearchWP är det utformat för att fungera perfekt med anpassade inläggstyper och WooCommerce-produkter direkt ur lådan. Det ger dig full kontroll över vad som söks, inklusive produkt-SKU:er och anpassade fält.

Det anpassade kodavsnittet från Metod 2 kan också fungera för anpassade inläggstyper, så länge ditt tema använder standardfunktioner i WordPress som the_title() för att visa innehåll. Men för de mest pålitliga och kraftfulla resultaten, särskilt med en e-handelsbutik, är SearchWP den bästa lösningen.

Jag hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt markerar söktermer i resultat i WordPress. Du kanske också vill se vår ultimata guide om hur du skapar en smart WooCommerce-produktsökning och vår handledning om att lägga till röstsökningsfunktioner på din WordPress-webbplats.

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.