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

Jak wyróżnić wyszukiwane terminy w wynikach wyszukiwania w WordPress

Aby Twoje wyszukiwanie w WordPressie było jeszcze bardziej przyjazne dla użytkownika, możesz wyróżnić wyszukiwane terminy w wynikach. Zrobiliśmy to dla jednego z naszych klientów, więc pomyśleliśmy, że będzie to przydatne dla innych użytkowników. W tym artykule pokażemy, jak można wyróżnić wyszukiwane terminy w wynikach wyszukiwania w WordPress.

Highlighting search terms in WordPress search results

Najpierw otwórz twój search.php i poszukaj następującego kodu:

<?php the_title(); ?>

.

Zastąp powyższy kod na:

<?php echo $title; ?>

.

Upewnij się, że wkleiłeś tę linię nad kodem tytułu:

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

.

Teraz otwórz twój plik CSS i dodaj stylizację dla klasy search-excerpt, która podświetli wyszukiwany termin. Obecny, aktualny kod pogrubia wyszukiwane terminy. Możesz wypróbować ten prosty CSS w arkuszu stylów twojego motywu.

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

.

Źródło: Michael Martin

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

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.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

16 komentarzyZostaw odpowiedź

  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.

      Administrator

      • 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

      Administrator

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

  8. Jason

    Thanks! Works like a charm!

  9. Chris

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

  10. 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.

  11. Nina

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

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.