Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här markerar du search termer i resultat i WordPress

I ett försök att göra din WordPress-sökning ännu mer användarvänlig kan du markera search-termerna i resultaten. Vi gjorde detta för en av våra kunder, så vi trodde att det skulle vara användbart för andra användare. I den här artikeln visar vi dig hur du kan markera search termer i resultaten i WordPress.

Highlighting search terms in WordPress search results

Öppna först din search.php och leta efter följande kod:

<?php the_title(); ?>

Ersätt koden ovan med:

<?php echo $title; ?>

Se till att du klistrar in denna rad ovanför koden för rubriken:

<?php $title = get_the_title(); $keys= explode(" ",$s); $title = preg_replace('/('.implode('|', $keys) .')/iu', '<strong class="search-excerpt">\0</strong>', $title); ?>

Öppna nu din CSS-fil och add till styling för klassen search-excerpt, så kommer den att markera termen. För närvarande gör koden search termerna fetstilta. You can try this simple CSS in your theme’s stylesheet.

strong.search-excerpt { 
background-color:yellow;
color:blue;
}

Källa: Michael Martin

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

16 kommentarerLämna ett svar

  1. Rachelle

    This works great but how do you highlight the search term in the excerpt and not just the title?

  2. Imme

    Hej, thank you very much for this very helpful piece of code. Is there a way to exclude links? The code as is breaks many of the ”more”-links on my site.

  3. Vernon Fowler

    Any chance you can update this neat tutorial for modern themes such as Twenty Seventeen where instead of title() in the loop, the loop goes through:

     get_template_part( 'template-parts/post/content', 'excerpt' );

    I’m comfortable with replacing

    <strong class="search-excerpt">\0</strong>

    with HTML5

    <mark>\0</mark>

    and the relevant CSS.

    Or will we need a different approach in themes using get_template_part ?

    • WPBeginner Support

      Hey Vernon,

      Thanks for the suggestion. We will try to update the article with more detailed instructions.

      Meanwhile, you will need to edit the /template-parts/content-search.php template. If your theme does not have it, then you can create it and then reference it in your search.php template.

      Administratör

      • Vernon Fowler

        That’s working. Thank you.

        Can we do the same for the_content as for the the_title or do we need a different approach?

  4. Wayan Cenik

    Thanks a lot for the code, is work perfectly
    I just the code at function, and done, is work

  5. Marlene

    Hi

    I can´t find on my site. I have this:

    How can I change someting in that?

    Thanks
    Marlene

  6. Steph

    There is no ”” in my search.php file..
    —————————–
    Mine looks like this:

    ””

    • WPBeginner Support

      Seems like you wanted to paste code and it stripped out. Please wrap your code around [php] [/php] tags

      Administratör

  7. Mahesh

    Thanks @michael

  8. Steve

    This doesn’t even come close to working. All it does is display the title of the page the search term is found on. The terms themselves aren’t wrapped in any tags whatsoever.

    • nate

      Actually, it works perfectly. I don’t think you know what you are doing.

  9. Jason

    Thanks! Works like a charm!

  10. Chris

    You should add a little example image on every tutorial, that would be more understandable (:

  11. DauAnunturi

    Nice tutorial. And for those wo want to make some highlight with colors they must define their css class as div.highlight
    and replace the code with
    And that`s alll. Thanks and have fun.

  12. Nina

    Very helpful tutorial, will use it later on :)
    Thanks for sharing!

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.