Supporto » Fixing WordPress » Evidenziare parola trovata con la ricerca
Evidenziare parola trovata con la ricerca
-
Quando faccio una ricerca nel mio blog, mi mostra tutti gli articoli che contengono la parola cercata. Vorrei sapere se c’è un modo per evidenziare con un css la parola contenuta negli articoli, in modo che trovo subito il punto cercato.
-
Salve,
una soluzione è usando javascript (jQuery)
// funzione che evidenzia // what è cosa cerchiamo, stringa // spanClass è la classe che avrà lo span attorno alla parola cercata, per dare lo stile, tipo // .highlight { // background-color:yellow; // } jQuery.fn.highlight = function(what,spanClass) { return this.each(function(){ var container = this, content = container.innerHTML, pattern = new RegExp('(>[^<.]*)(' + what + ')([^<.]*)','ig'), replaceWith = '$1<span ' + ( spanClass ? 'class="' + spanClass + '"' : '' ) + '">$2</span>$3', highlighted = content.replace(pattern,replaceWith); container.innerHTML = highlighted; }); } // funzione che pesca il parametro "s" dalla url var getUrlParameter = function getUrlParameter(sParam) { var sPageURL = decodeURIComponent(window.location.search.substring(1)), sURLVariables = sPageURL.split('&'), sParameterName, i; for (i = 0; i < sURLVariables.length; i++) { sParameterName = sURLVariables[i].split('='); if (sParameterName[0] === sParam) { return sParameterName[1] === undefined ? true : sParameterName[1]; } } }; // quando il DOM è pronto cerchiamo la parola dentro "body" ed evidenziamo jQuery(document).ready(function(){ var search = getUrlParameter('s'); // se c'è, evidenzia if(search !== null){ jQuery('body').highlight(search,'highlight'); } });
In base al tuo caso puoi sostituire
var search = getUrlParameter('s');
con
var search = '<?php echo get_search_query(); ?>';
per utilizzare le funzioni di WordPress e non pescare dal parametro nella URL (ad esempio se usi i permalink o strutture custom delle URL).
Demo
https://jsfiddle.net/ex3ntia/nb2dyaeL/Saluti,
Diego- Questa risposta è stata modificata 7 anni, 4 mesi fa da Diego Betto. Motivo: typo
L’ho messo in functions.php child ma non funziona, dove va messo?
È javascript quindi non va messo direttamente in functions.php dove solitamente ci devi mettere php.
Più appropriato è dentro un tag <script></script> ad esempio in footer.php o in ogni caso prima della chiusura di </body> e dopo
wp_footer();
in modo da essere sicuri che jQuery sia stato caricato.....altro codice esistente... wp_footer(); ....altro codice esistente... ?> <script> ...codice visto assieme... </script> </body> </html>
Funziona, ma non del tutto, illumina anche le anteprime, non so come spiegarti, fai una prova nel mio blog http://albenessereblog.altervista.org
dato che usi quella con php devi verificare anche che la stringa di ricerca non sia vuota quindi modifica l’if così
if(search !== null && search !== ''){
Va meglio, ma come puoi vedere non trova la parola nell’articolo (non la colora)
Se intendi all’interno della pagina dell’articolo, dopo che hai cliccato dalla pagina di ricerca, direi che si è corretto. La tua domanda infatti è “Evidenziare parola trovata con la ricerca”.
Quello che invece chiedi ora è la ricerca resti permanente anche dopo che hai cliccato dalla pagina dei risultati. Per fare questo devi istruire WordPress che i link che partono da quella pagina devono comunque avere evidenziata quella parola.
Per fare questo devi fare in modo che i link dalla pagina di ricerca abbiano un nuovo parametro che ci permette poi di capire cosa hai cercato.
Ovvero modifica
jQuery(document).ready(function(){ var search = '<?php echo get_search_query(); ?>'; // se c'è, evidenzia if(search !== null){ jQuery('body').highlight(search,'highlight'); } });
con
jQuery(document).ready(function(){ var search = '<?php echo get_search_query(); ?>'; /* inizio modifiche */ var fromsearch = '<?php echo $_REQUEST['fromsearch']; ?>'; if(search !== null && search !== ''){ jQuery('body').highlight(search,'highlight'); jQuery('#main article a').each(function(i,e){ var newUrl = jQuery(e).prop('href') + '?fromsearch=' + encodeURIComponent(search); this.href = newUrl; }); } if(fromsearch !== null && fromsearch !== ''){ jQuery('body').highlight(fromsearch,'highlight'); } /* fine modifiche */ });
- Questa risposta è stata modificata 7 anni, 4 mesi fa da Diego Betto.
- Questa risposta è stata modificata 7 anni, 4 mesi fa da Diego Betto.
Ci siamo quasi, la evidenzia solo se la parola si trova sotto l’anteprima (prima di …Leggi tutto), ma se apro l’articolo non la trova.
A me basta che la trovi anche quando apro l’articolo, poi se ricarico o esco dalla pagina, non è più necessario che la parola sia evidenziata.
Hai un problema con $_REQUEST, potrebbe essere per l’ordine GET/POST
Infatti se vedi il codice generato è
jQuery(document).ready(function(){ var search = ''; /* inizio modifiche */ var fromsearch = ''; // è vuoto
Con
'<?php echo $_REQUEST['fromsearch']; ?>'
dovresti prendere il valore che nell’indirizzo ha l’attributo fromsearch, ma in questo caso per qualche motivo è vuoto.
Prova cambiare $_REQUEST con $_GET o con $_POST. Altrimenti prova forzare la cosa mettendo
var fromsearch = 'natura';
e vedere se funziona nelle pagine articolo che contengono la parola “natura”.
Se così va ma con $_REQUEST e $_GET o $_POST no, indaga lato server.Saluti,
DiegoHo messo la variabile var fromsearch = ‘natura’; e trova la parola, ma anche quelle composte, es: “naturale”(poi questo lo sistemiamo).
Quindi con la variabile funziona, ma non con $_GET o $_POST
EDIT: così funziona
'<?php echo $_REQUEST['fromsearch']; ?>'
ora sistemiamo la parola quando è composta- Questa risposta è stata modificata 7 anni, 4 mesi fa da blogforum.
Ok, già qualcosa. Prova a dire a WordPress che la variabile è tra quelle riconosciute. Aggiungi in functions.php
add_filter('query_vars', 'my_register_query_vars' ); function my_register_query_vars( $qvars ){ $qvars[] = 'fromsearch'; return $qvars; }
e ritenta con $_REQUEST, $_GET o $_POST
Leggi mio post precedente, quello con EDIT
Anzi, ripensandoci, mi viene un dubbio: se la parola cercata è seguita da una virgola o un punto, o quello che è, la regex com’è ora mi trova la parola, se invece ci mettiamo \b…parola…\b non me la trova. Tu che dici?
Scusa se continuo a postare, prendi come riferimento questo ultimo post.
Allora ci sono alcune cose da sistemare:
1. Se digiti la parola “cibo” nel risultato appare anche l’articolo “Consigli per gli acquisti”, ma la parola non c’è.
2. Se digiti “bs” e nel risultato guardi in fondo nei Siti amici, sono evidenziati anche i tag di spaziatura.
Ciao,
1. l’articolo appare perché la ricerca si basa sui contenuti e per WordPress in quel post c’è la parola cibo, quindi verifica se puoi modificare la regex. In questo caso potrebbe essere valido sostituire la funzione di evidenziatore con
jQuery.fn.highlight = function(what,spanClass) { return this.each(function(){ var container = this, content = container.innerHTML, pattern = new RegExp('(' + what + ')','ig'), replaceWith = '<span ' + ( spanClass ? 'class="' + spanClass + '"' : '' ) + '">$1</span>', highlighted = content.replace(pattern,replaceWith); container.innerHTML = highlighted; }); }
2. lavorando di javascript puoi dire che invece che cercare in tutto il body cerchi ed evidenzi solo dentro un particolare elemento come #main cambiando da
jQuery('body').highlight(fromsearch,'highlight');
a
jQuery('#main').highlight(fromsearch,'highlight');
Ti consiglio di prendere mano un po’ con la documentazione di javascript relativamente alla funzione RegExp ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions ) e con le regex in generale ( ad esempio provando qua http://regexr.com ).
Saluti,
Diego
- Il topic ‘Evidenziare parola trovata con la ricerca’ è chiuso a nuove risposte.