Per evidenziare automaticamente il testo cercato negli articoli WordPress servono uno script JavaScript che legga il parametro s nell’URL e alcune regole CSS per rendere visibili le corrispondenze. La soluzione funziona senza modificare il contenuto salvato nel database e non richiede plugin aggiuntivi. Il codice analizza soltanto il testo dell’articolo, evitando titoli, menu, script e blocchi di codice. Per mantenere la funzione dopo gli aggiornamenti di WordPress è preferibile usare un tema child o un plugin per gli snippet.

Come funziona l’evidenziazione della ricerca in WordPress

La ricerca standard di WordPress usa generalmente il parametro s nell’indirizzo della pagina. Un URL come https://esempio.it/?s=javascript contiene quindi il termine da evidenziare, mentre https://esempio.it/articolo/?s=javascript permette allo script di applicare l’evidenziazione anche dentro un articolo.

Il metodo per evidenziare ricerca WordPress JavaScript consiste nel leggere il valore di s, cercare quel testo nei nodi testuali dell’articolo e avvolgere ogni corrispondenza in un elemento HTML <mark>. Il CSS assegna poi a <mark> un colore di sfondo e un colore del testo facilmente leggibili.

Questa tecnica presenta alcuni vantaggi concreti:

non modifica il testo originale dell’articolo;
funziona con parole singole e frasi composte;
ignora maiuscole e minuscole;
evita di alterare codice, script e stili presenti nella pagina;
può essere applicata a temi classici e temi a blocchi, se il selettore del contenuto è corretto.

La soluzione non può evidenziare il termine se l’URL dell’articolo non contiene il parametro s. Molti temi WordPress non trasferiscono automaticamente la query della pagina dei risultati al collegamento dell’articolo, quindi il tutorial include anche un passaggio opzionale per conservarla.

Preparare i file JavaScript e CSS nel tema WordPress

Il modo più sicuro consiste nel creare i file in un tema child. Modificare direttamente il tema principale può causare la perdita del codice al primo aggiornamento. In alternativa, i file possono essere caricati tramite un piccolo plugin personalizzato o uno strumento per inserire codice nel tema.

Passo 1: creare il file JavaScript

Nel tema child crea il percorso assets/js/search-highlight.js. Inserisci il seguente codice:

(function () {
'use strict';

var params = new URLSearchParams(window.location.search);
var term = params.get('s') || params.get('highlight');

if (!term || !term.trim()) {
return;
}

term = term.trim();

var content = document.querySelector(
'.entry-content, .wp-block-post-content, .post-content, .article-content'
);

if (!content) {
return;
}

var escapedTerm = term.replace(/[.*+?^${}()|[]]/g, '$&');
var expression = new RegExp(escapedTerm, 'gi');

var walker = document.createTreeWalker(
content,
NodeFilter.SHOW_TEXT,
{
acceptNode: function (node) {
var parent = node.parentElement;

if (!parent || !node.nodeValue.trim()) {
return NodeFilter.FILTER_REJECT;
}

if (
parent.closest('script, style, noscript, textarea, pre, code, mark')
) {
return NodeFilter.FILTER_REJECT;
}

return expression.test(node.nodeValue)
? NodeFilter.FILTER_ACCEPT
: NodeFilter.FILTER_REJECT;
}
}
);

var textNodes = [];
var currentNode;

while ((currentNode = walker.nextNode())) {
textNodes.push(currentNode);
expression.lastIndex = 0;
}

textNodes.forEach(function (textNode) {
var text = textNode.nodeValue;
var fragment = document.createDocumentFragment();
var lastIndex = 0;
var match;

expression.lastIndex = 0;

while ((match = expression.exec(text)) !== null) {
fragment.appendChild(
document.createTextNode(text.slice(lastIndex, match.index))
);

var mark = document.createElement('mark');
mark.className = 'search-highlight';
mark.textContent = match[0];
fragment.appendChild(mark);

lastIndex = match.index + match[0].length;
}

fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
textNode.parentNode.replaceChild(fragment, textNode);
});

var firstMatch = content.querySelector('.search-highlight');

if (firstMatch) {
firstMatch.setAttribute('tabindex', '-1');
}
})();

Il codice legge prima s e poi, come alternativa, highlight. Il secondo parametro è utile se il sito utilizza una ricerca personalizzata. La funzione escape impedisce che caratteri come parentesi o punti vengano interpretati come istruzioni di una regola espressione regolare.

I selettori .entry-content, .wp-block-post-content, .post-content e .article-content coprono molti temi WordPress, ma non tutti. Se l’articolo non viene analizzato, controlla il codice HTML con gli strumenti per sviluppatori del browser e sostituisci i selettori con la classe che contiene realmente il testo, per esempio .single-post-content.

Il codice usa textContent per inserire la corrispondenza dentro <mark>. In questo modo il valore ricevuto dall’URL viene trattato come testo e non come codice HTML, riducendo il rischio di inserire contenuti indesiderati nella pagina.

Passo 2: aggiungere il foglio di stile

Nel tema child crea assets/css/search-highlight.css, oppure inserisci le regole nell’area Aspetto > Personalizza > CSS aggiuntivo, quando il tema rende disponibile questa voce:

mark.search-highlight {
background-color: #ffdf4d;
color: #1f1f1f;
padding: 0.08em 0.2em;
border-radius: 0.2em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}

mark.search-highlight:focus {
outline: 3px solid #1459a6;
outline-offset: 2px;
}

Il colore giallo rende riconoscibile la corrispondenza senza nascondere le lettere. Il bordo di messa a fuoco serve quando l’utente o una tecnologia assistiva raggiunge il primo risultato tramite tastiera.

Caricare JavaScript e CSS senza modificare il tema principale

Nel file functions.php del tema child aggiungi una funzione di caricamento. Il codice seguente usa get_stylesheet_directory_uri(), quindi punta correttamente al tema child attivo:

function backdigit_carica_evidenziazione_ricerca() {
wp_enqueue_style(
'backdigit-search-highlight',
get_stylesheet_directory_uri() . '/assets/css/search-highlight.css',
array(),
'1.0'
);

wp_enqueue_script(
'backdigit-search-highlight',
get_stylesheet_directory_uri() . '/assets/js/search-highlight.js',
array(),
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_carica_evidenziazione_ricerca');

Il parametro true nell’ultima parte di wp_enqueue_script() carica JavaScript nel piè di pagina, dopo il contenuto HTML principale. Lo script usa comunque querySelector() sul documento completo, quindi funziona anche con temi che gestiscono il caricamento della pagina in modo differente.

Dopo aver salvato i file, svuota la cache di WordPress, del plugin di ottimizzazione e della rete di distribuzione dei contenuti, se presenti. La cache può infatti continuare a servire una versione precedente del file JavaScript o del CSS.

Trasferire il termine dalla pagina dei risultati all’articolo

Se il collegamento dall’elenco dei risultati non contiene ?s=termine, lo script dell’articolo non ha modo di sapere quale parola deve evidenziare. In questo caso aggiungi, prima dello script principale, il seguente blocco opzionale:

(function () {
'use strict';

var params = new URLSearchParams(window.location.search);
var term = params.get('s');

if (!term || !document.body.classList.contains('search-results')) {
return;
}

document.querySelectorAll('article a[href]').forEach(function (link) {
var url = new URL(link.href, window.location.href);

if (url.origin !== window.location.origin) {
return;
}

url.searchParams.set('s', term);
link.href = url.toString();
});
})();

La classe search-results viene normalmente aggiunta da WordPress alle pagine dei risultati, ma alcuni temi possono usare una struttura diversa. Se il blocco non viene eseguito, verifica la presenza della classe nell’elemento <body> oppure applicalo soltanto ai collegamenti delle schede articolo, usando un selettore specifico del tema.

Questa variante aggiunge il parametro s ai collegamenti interni presenti nella pagina dei risultati. È consigliabile limitarla ai collegamenti degli articoli quando il tema include anche menu, paginazione o collegamenti a pagine non pertinenti.

Per provare il risultato, esegui una ricerca WordPress e apri un articolo dal risultato. L’indirizzo dovrebbe contenere un parametro simile a ?s=javascript, e tutte le occorrenze di “javascript” nel contenuto dovrebbero apparire con lo stile definito da mark.search-highlight.

La tecnica per evidenziare ricerca WordPress JavaScript resta leggera, personalizzabile e indipendente dal contenuto salvato negli articoli.

Potrebbe interessarti anche:

FAQ

Funziona quando il termine è presente nell’URL tramite il parametro s, oppure tramite highlight. Se il tema non trasferisce il termine agli articoli, va aggiunto il blocco opzionale per i collegamenti.

Il selettore del contenitore potrebbe essere diverso da quelli inclusi nello script. Controlla l’elemento HTML che contiene il testo e aggiungi la relativa classe nella chiamata a document.querySelector().

No. Lo script modifica soltanto il DOM della pagina visualizzata nel browser e non salva cambiamenti nell’editor o nel database di WordPress.

Sì. Modifica background-color e color nella regola CSS mark.search-highlight, mantenendo un contrasto sufficiente tra testo e sfondo.

Altri articoli di questa serie: