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.

Impostare termini di ricerca evidenziati è uno di quei semplici miglioramenti che rendono immediatamente il tuo sito più curato e facile da usare.

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 modi semplici per ottenere l'evidenziazione dei termini di ricerca sul tuo sito WordPress, sia che tu preferisca usare un plugin o aggiungere del codice personalizzato.

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, scansionano i risultati per 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 in grassetto le parole chiave corrispondenti 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
• Metodo 2: Evidenzia i termini di ricerca usando codice personalizzato – Gratuito
• Bonus: Rendi la tua ricerca ancora più veloce con Live Ajax Search 🚀
• FAQ: Evidenziare i termini di ricerca in WordPress

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.

Secondo me, SearchWP è uno dei migliori strumenti 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 preparato una guida completa su come migliorare la ricerca di WordPress con SearchWP se desideri 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, SearchWP potrebbe non essere la soluzione giusta poiché il suo piano gratuito non include questa funzionalità.

La buona notizia è che puoi comunque evidenziare i termini di ricerca aggiungendo uno snippet di codice PHP al file functions.php del tuo sito.

La differenza principale risiede nella manutenzione a lungo termine. Un plugin come SearchWP viene regolarmente aggiornato dai suoi sviluppatori per garantirne la compatibilità con le nuove versioni di WordPress.

Con uno snippet di codice personalizzato, tuttavia, sei responsabile di assicurarti che continui a funzionare correttamente dopo gli aggiornamenti futuri.

Detto questo, modificare direttamente i file del tema può anche essere rischioso.

Anche un piccolo errore può bloccare il tuo sito e impedirti l'accesso alla dashboard di amministrazione. Questo viene spesso chiamato 'Schermata Bianca della Morte' (White Screen of Death), e può essere stressante da risolvere se non sei uno sviluppatore.

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

Questo perché WPCode esegue i tuoi snippet in un ambiente separato e sicuro. Ciò impedisce a un errore di battitura di bloccare il tuo sito e rende facile attivare o disattivare gli snippet con un interruttore.

Inoltre, il suo piano gratuito funziona perfettamente per questo metodo.

Ho testato a fondo WPCode in diverse configurazioni e funziona in modo affidabile ogni volta. Se sei curioso di scoprire 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 live Ajax, e funziona proprio come l'autocompletamento di Google. Offre 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.

FAQ: Evidenziare i 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 stai utilizzando SearchWP insieme al plugin SearchWP Live Ajax Lite Search, i termini evidenziati appariranno anche nei risultati di ricerca live, senza bisogno di ricaricare la pagina.

Poiché entrambi gli strumenti sono sviluppati dallo stesso team, funzionano perfettamente insieme fin da subito.

Tuttavia, se stai utilizzando un plugin di ricerca live diverso o una configurazione di ricerca AJAX personalizzata, dovrai testare la compatibilità.

Non tutti i plugin supportano l'evidenziazione dei termini nei risultati dinamici, quindi è una buona idea testare prima su un sito di staging per assicurarsi che tutto venga visualizzato correttamente.

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

Non proprio. Entrambi i metodi che ho trattato, l'utilizzo di SearchWP e l'aggiunta di codice personalizzato con WPCode, sono leggeri e ottimizzati per le prestazioni.

L'evidenziazione stessa viene eseguita sul front-end, quindi non appesantisce molto il tuo server.

Detto questo, se il tuo sito ha un gran numero di risultati di ricerca o uno stile personalizzato pesante, è sempre una buona idea testare prima le cose. Ti consiglio di provarlo in un ambiente di staging per assicurarti che l'evidenziazione sia bella e funzioni senza problemi prima di distribuirla dal vivo.

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

Sì, assolutamente! Se stai usando SearchWP, è progettato per funzionare perfettamente con tipi di post personalizzati e prodotti WooCommerce fin da subito. Ti dà il pieno controllo su ciò che viene cercato, inclusi SKU di prodotto e campi personalizzati.

Lo snippet di codice personalizzato del Metodo 2 può funzionare anche per tipi di post personalizzati, purché il tuo tema utilizzi funzioni standard di WordPress come the_title() per visualizzare il contenuto. Tuttavia, per i risultati più affidabili e potenti, specialmente con un negozio di e-commerce, SearchWP è la soluzione migliore.

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 di 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 anche trovarci su Twitter e Facebook.