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

Come mettere in evidenza i risultati della ricerca in WordPress

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

Nel tentativo di rendere la ricerca su WordPress ancora più facile da usare, è possibile evidenziare i termini di ricerca nei risultati. Lo abbiamo fatto per uno dei nostri clienti e abbiamo pensato che sarebbe stato utile per altri utenti. In questo articolo vi mostreremo come potete evidenziare i termini di ricerca nei risultati di WordPress.

Highlighting search terms in WordPress search results

Per prima cosa aprite il file search.php e cercate il seguente codice:

<?php the_title(); ?>

Sostituire il codice precedente con:

<?php echo $title; ?>

Assicurarsi di incollare questa riga sopra il codice del titolo:

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

Ora aprite il vostro file CSS e aggiungete lo stile per la classe search-excerpt, che metterà in evidenza il termine. Attualmente il codice rende i termini di ricerca in grassetto. Si può provare questo semplice CSS nel foglio di stile del tema.

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

Fonte: Michael Martin

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

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.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

17 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Imme says

    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 says

    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 says

      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.

      Admin

      • Vernon Fowler says

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

    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.

  5. DauAnunturi says

    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.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.