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änka sig mer polerad.

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.

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 webbplats sökfält, skannar de resultaten efter exakt de orden. Om inget sticker ut kan de hoppa ö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 vad 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

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

SearchWP är det bästa verktyget 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 nätbutik, 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å sammanställt en komplett guide om hur man förbättrar WordPress-sökning med SearchWP om du vill dyka djupare.

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, 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 budget, kan du använda anpassad kod för att markera söktermer. Vanligtvis innebär detta att du redigerar dina temafiler direkt.

Men även ett litet misstag kan krascha din webbplats och orsaka den så kallade 'White Screen of Death'.

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

Jag har grundligt testat WPCode i olika konfigurationer, och det fungerar tillförlitligt 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 WPCode-pluginet. 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 handledning om hur du 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 levererar omedelbara förslag utan att sidan behöver laddas om.

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 konfigurera detta rekommenderar jag pluginet SearchWP Live Ajax Lite Search, som fungerar utmärkt med det premiumverktyget SearchWP.

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.

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

Vanliga frågor om att markera 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 i kombination med pluginet SearchWP Live Ajax Search, kommer markerade termer automatiskt att visas i live-nedrullningsresultaten. Ingen sidladdning krävs.

Om du använder ett annat live-sökplugin eller en anpassad AJAX-konfiguration kan du behöva lägga till CSS-klasser manuellt i din mall för sökresultat för att aktivera markering.

Påverkar dessa markeringsfunktioner prestanda eller webbplatshastighet?

Nej, markering av söktermer har en försumbar inverkan på webbplatsens prestanda. Både SearchWP-metoden och anpassad kodmetod körs på frontend (klient-sidan) och är mycket lätta.

De ökar inte serverbelastningen eller tiden för databasfrågor. Jag rekommenderar dock alltid att testa nya funktioner på en staging-webbplats först för att säkerställa att de visas korrekt med ditt specifika tema.

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

Ja. SearchWP låter dig aktivera markering för anpassade inläggstyper, WooCommerce-produkter och till och med produkt-SKU:er. Det ger fullständig kontroll över vilka innehållstyper som indexeras och markeras.

Den anpassade kodmetoden (Metod 2) fungerar också för anpassade inläggstyper, förutsatt att ditt tema använder standard WordPress-funktioner som the_title() och the_excerpt() för att visa resultat.

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ökningsfunktion till din WordPress-webbplats.

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.