Come evidenziare i termini di ricerca nei risultati in WordPress (2 metodi)

Pensa all'ultima volta che hai cercato qualcosa su un sito. Probabilmente hai scansionato i risultati cercando le tue parole chiave, giusto? 🔍

È esattamente quello che fanno i visitatori del tuo sito web quando cercano sul tuo sito. Solo che WordPress non evidenzia quei termini per impostazione predefinita.

L'impostazione di termini di ricerca evidenziati è uno di quei semplici miglioramenti che rendono immediatamente il tuo sito più curato.

Quando i visitatori possono vedere rapidamente perché ogni risultato corrisponde alla loro ricerca, è più probabile che clicchino e interagiscano con i tuoi contenuti.

Nel corso degli anni di creazione e gestione di siti WordPress, ho scoperto che queste piccole modifiche all'esperienza utente possono avere un grande impatto. 📝

Ecco perché ti guiderò attraverso 2 semplici modi per evidenziare i termini di ricerca sul tuo sito WordPress.

Perché dovrei evidenziare i termini di ricerca sul mio sito web?

Evidenziare i termini di ricerca aiuta i visitatori a individuare rapidamente i contenuti che stanno cercando.

Quando gli utenti digitano una parola chiave nella barra di ricerca del tuo sito, scorrono i risultati cercando quelle parole esatte. Se nulla spicca, potrebbero saltare contenuti utili senza rendersene conto.

Enfatizzando i loro termini di ricerca, rendi i risultati più facili da leggere e mostri immediatamente quali articoli sono più pertinenti.

Questo migliora l'esperienza utente, aiuta i visitatori a trovare le informazioni più velocemente e li rassicura che sono nel posto giusto. Può persino incoraggiare gli utenti a rimanere più a lungo sul tuo sito.

Su WPBeginner, rendiamo le parole chiave corrispondenti in grassetto nei nostri risultati di ricerca - funziona proprio come l'evidenziazione. È un piccolo tocco, ma aiuta davvero le persone a trovare ciò che cercano più velocemente.

Detto questo, ti mostreremo come evidenziare facilmente i termini di ricerca in WordPress. Discuterò 2 metodi. Puoi usare i link qui sotto per passare al metodo di tua scelta.

Metodo 1: Evidenzia i termini di ricerca usando SearchWP – Consigliato

Se stai cercando un modo rapido e senza problemi per evidenziare i termini di ricerca nei tuoi risultati di WordPress, allora usare SearchWP è la tua migliore opzione.

SearchWP è il miglior strumento per migliorare l'esperienza di ricerca del tuo sito.

Ti offre risultati molto più pertinenti rispetto alla ricerca predefinita di WordPress, e la parte migliore? Rende l'evidenziazione dei termini di ricerca incredibilmente facile. Basta attivare un interruttore e il gioco è fatto.

Ho testato a fondo SearchWP sul nostro sito demo e i risultati sono stati impressionanti. Funziona senza intoppi e la funzionalità di evidenziazione integrata fa risparmiare un sacco di tempo rispetto all'impostazione manuale.

Abbiamo anche una recensione completa di SearchWP se vuoi vedere tutte le sue funzionalità e come funziona.

Innanzitutto, devi installare e attivare il plugin SearchWP. Per istruzioni passo passo, consulta il nostro tutorial su come installare un plugin di WordPress.

Una volta attivato il plugin, vai alla pagina SearchWP » Impostazioni nella tua bacheca di WordPress.

Qui dovrai inserire la tua chiave di licenza.

Puoi trovare questa chiave di licenza sotto il tuo account sul sito web di SearchWP. Copiala e incollala semplicemente.

Dopodiché, scorri verso il basso fino a ‘Impostazioni generali’ e attiva l’interruttore ‘Evidenzia termini’ su ‘Attivato’.

Non appena sarà abilitata, le parole chiave utilizzate dai tuoi visitatori verranno automaticamente evidenziate nei risultati di ricerca, rendendo super facile individuare i contenuti pertinenti.

In questa sezione troverai anche impostazioni aggiuntive che possono migliorare i tuoi risultati di ricerca.

Funzionalità come Ricerca Fuzzy e Ricerca tra virgolette sono particolarmente utili per i blog di WordPress, con molti contenuti.

Questa funzionalità consente ai visitatori di trovare il contenuto giusto anche se commettono un piccolo errore di battitura. Questo può evitare che finiscano su una frustrante pagina “nessun risultato trovato”.

D’altra parte, la Ricerca tra virgolette consente agli utenti di cercare una frase esatta mettendola tra virgolette, proprio come su Google.

Tieni presente che tutte le tue impostazioni verranno salvate automaticamente.

Una volta soddisfatto delle tue Impostazioni generali, è una buona idea esplorare il resto delle opzioni di personalizzazione di SearchWP.

Puoi andare alla pagina SearchWP » Algoritmo nella tua dashboard per ottimizzare il modo in cui vengono classificati i risultati di ricerca.

Questa sezione è davvero utile perché ti permette di controllare il peso (importanza) di diverse parti del tuo contenuto, pensala come un sistema di punteggio per i tuoi risultati di ricerca.

Dare più peso ai titoli, ad esempio, significa che le corrispondenze nel titolo del post appariranno più in alto rispetto alle corrispondenze nel corpo del contenuto. In questo modo, il contenuto più pertinente apparirà per primo.

Quando fai clic sul pulsante ‘Fonti e impostazioni’ puoi anche decidere cosa includere nel tuo indice di ricerca.

Invece di soli post e pagine, puoi aggiungere commenti, tipi di post personalizzati, prodotti WooCommerce, SKU e altro ancora.

Se gestisci un blog o un negozio online, questo rende la tua ricerca molto più utile.

Ad esempio, può aiutare un cliente a trovare un prodotto tramite il suo SKU, come ‘TSHIRT-BLU-LG’, cosa che la ricerca predefinita di WordPress non sarebbe in grado di fare.

Abbiamo anche messo insieme una guida completa su come migliorare la ricerca di WordPress con SearchWP se vuoi approfondire.

Una volta salvate le impostazioni, SearchWP si occupa automaticamente del tuo modulo di ricerca esistente. Nessun passaggio aggiuntivo richiesto.

Vai semplicemente sul tuo sito ed effettua una rapida ricerca. Vedrai subito le parole chiave evidenziate.

Se non hai ancora aggiunto un modulo di ricerca al tuo sito, non preoccuparti. Puoi seguire il nostro tutorial passo passo su come aggiungere un modulo di ricerca in WordPress.

Una volta configurato, hai finito e i tuoi visitatori godranno di un'esperienza di ricerca molto migliore fin dall'inizio.

Metodo 2: Evidenzia i termini di ricerca usando codice personalizzato – Gratuito

Se hai un budget limitato, puoi utilizzare codice personalizzato per evidenziare i termini di ricerca. In genere, ciò comporta la modifica diretta dei file del tuo tema.

Tuttavia, anche un piccolo errore può bloccare il tuo sito e causare la ' Schermata Bianca della Morte '.

Ecco perché ti consiglio invece di usare WPCode. È il miglior plugin per snippet di codice di WordPress e il modo più sicuro per aggiungere codice personalizzato senza toccare i file del tuo tema.

Ho testato a fondo WPCode in diverse configurazioni e funziona in modo affidabile ogni volta. Se sei curioso di tutto ciò che offre, abbiamo anche una recensione dettagliata di WPCode che puoi consultare in seguito.

Ma per ora, vediamo come usarlo per evidenziare i termini di ricerca sul tuo sito.

Innanzitutto, devi installare e attivare il plugin WPCode. Per istruzioni dettagliate, puoi consultare la nostra guida su come installare un plugin di WordPress.

Dopo aver attivato il plugin, visita la pagina Code Snippets » + Add Snippet dalla dashboard.

Qui, fai clic sul pulsante ‘+ Add Custom Snippet’ sotto l'opzione ‘Add Your Custom Code (New Snippet)’.

Verrai ora portato a una nuova schermata in cui dovrai selezionare ‘PHP Snippet’ come tipo di codice. Una volta fatto, procedi e assegna un nome al tuo snippet di codice.

Questo nome non sarà visibile ai tuoi visitatori: è solo per tuo riferimento. Ecco perché ti consiglio di usare qualcosa di descrittivo come Evidenzia Termini di Ricerca o qualcos'altro che renda facile riconoscerlo.

Ti aiuterà a trovare e gestire rapidamente lo snippet in seguito, se dovessi mai volerlo modificare o disabilitare.

Dopodiché, copia e incolla il seguente codice personalizzato nella casella ‘Code Preview’.

Questo codice funziona trovando le parole chiave cercate dal tuo visitatore. Quindi, racchiude quelle parole chiave in un tag speciale che aggiunge uno sfondo colorato.

// 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);
}

Dopo aver incollato il codice, scorri verso il basso all'interno dello snippet per trovare la sezione di stile. La vedrai all'interno del blocco echo '<style> ... </style>';. La riga specifica che vorrai modificare è:

                        background-color: yellow;

Per impostazione predefinita, il plugin imposta il colore di sfondo del termine evidenziato su giallo con testo nero. Ma puoi facilmente personalizzarlo modificando quella riga.

Basta sostituire yellow con il codice esadecimale di qualsiasi colore preferisci. Ad esempio, per cambiare l'evidenziazione in un azzurro chiaro, potresti usare #aeeffc. Assicurati di mantenere il punto e virgola alla fine!

Ti consiglio di scegliere un colore di sfondo e di testo che si adatti allo stile del tuo brand in modo che si integri bene con il resto del tuo sito.

Puoi anche regolare il peso del carattere, il raggio del bordo e il padding in questa sezione per perfezionare l'aspetto della casella di evidenziazione.

Una volta che sei soddisfatto dello stile, scorri di nuovo in alto, sposta l'interruttore da 'Inattivo' ad 'Attivo' e fai clic sul pulsante 'Salva Snippet' per memorizzare le tue impostazioni.

Se il tuo sito ha già un modulo di ricerca, lo snippet inizierà a funzionare subito ed evidenzierà automaticamente i termini di ricerca.

Se non hai ancora aggiunto un modulo di ricerca, puoi seguire il nostro tutorial su come aggiungere un modulo di ricerca in WordPress.

Infine, visita il tuo sito web, effettua una rapida ricerca e vedrai i tuoi nuovi termini evidenziati in azione.

Bonus: Rendi la tua ricerca ancora più veloce con Live Ajax Search 🚀

Una volta aggiunta l'evidenziazione dei termini di ricerca, potresti voler fare un passo avanti mostrando i risultati mentre i visitatori digitano.

Questa è chiamata ricerca Ajax live e funziona proprio come l'autocompletamento di Google. Fornisce suggerimenti istantanei senza bisogno di ricaricare la pagina.

È un ottimo modo per rendere il tuo sito più veloce e interattivo. I visitatori possono trovare ciò che cercano quasi istantaneamente, il che probabilmente aumenterà il coinvolgimento.

Per configurare questo, consiglio il plugin SearchWP Live Ajax Lite Search, che funziona benissimo con lo strumento premium SearchWP.

È gratuito, funziona perfettamente con la maggior parte dei temi WordPress e gestisce tutto automaticamente. L'ho testato a fondo e offre sempre un'esperienza di ricerca migliore e più veloce.

Installa semplicemente il plugin come qualsiasi altro plugin di WordPress, attivalo e quindi abilita la ricerca live nelle impostazioni di SearchWP.

Puoi aggiungere facilmente il modulo di ricerca a qualsiasi post, pagina, barra laterale o area widget.

Vuoi aiuto per iniziare? Dai un'occhiata al nostro tutorial completo su come aggiungere la ricerca Ajax live al tuo sito WordPress.

Domande frequenti sull'evidenziazione dei termini di ricerca in WordPress

Ecco alcune domande che mi vengono poste frequentemente sull'evidenziazione dei termini di ricerca in WordPress:

Posso evidenziare i termini nei risultati di ricerca AJAX o live?

Sì. Se usi SearchWP in combinazione con il plugin SearchWP Live Ajax Search, i termini evidenziati appariranno automaticamente nei risultati a discesa live. Non è necessario ricaricare la pagina.

Se stai utilizzando un altro plugin di ricerca live o una configurazione AJAX personalizzata, potrebbe essere necessario aggiungere manualmente le classi CSS al tuo modello di risultati di ricerca per abilitare l'evidenziazione.

Queste funzionalità di evidenziazione influiscono sulle prestazioni o sulla velocità del sito?

No, l'evidenziazione dei termini di ricerca ha un impatto trascurabile sulle prestazioni del sito. Sia il metodo SearchWP che il metodo con codice personalizzato vengono eseguiti sul front-end (lato client) e sono molto leggeri.

Non aumentano il carico del server o i tempi di query del database. Tuttavia, consiglio sempre di testare le nuove funzionalità prima su un sito di staging per assicurarsi che vengano visualizzate correttamente con il tuo tema specifico.

L'evidenziazione dei termini di ricerca funzionerà con tipi di post personalizzati o WooCommerce?

Sì. SearchWP ti consente di abilitare l'evidenziazione per i tipi di post personalizzati, i prodotti WooCommerce e persino gli SKU dei prodotti. Fornisce il controllo completo su quali tipi di contenuto vengono indicizzati ed evidenziati.

Il metodo con codice personalizzato (Metodo 2) funziona anche per i tipi di post personalizzati, a condizione che il tuo tema utilizzi funzioni WordPress standard come the_title() e the_excerpt() per visualizzare i risultati.

Spero che questo articolo ti abbia aiutato a imparare come evidenziare facilmente i termini di ricerca nei risultati in WordPress. Potresti anche voler vedere la nostra guida definitiva su come creare una ricerca intelligente dei prodotti WooCommerce e il nostro tutorial su come aggiungere la funzionalità di ricerca vocale al tuo sito WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.