Supporto » Fixing WordPress » 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.

Stai visualizzando 15 risposte - dal 1 al 15 (di 17 totali)
  • 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
    Chi ha creato la discussione blogforum

    (@blogforum)

    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>
    
    Chi ha creato la discussione blogforum

    (@blogforum)

    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 !== ''){
    
    Chi ha creato la discussione blogforum

    (@blogforum)

    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.
    Chi ha creato la discussione blogforum

    (@blogforum)

    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,
    Diego

    Chi ha creato la discussione blogforum

    (@blogforum)

    Ho 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

    Chi ha creato la discussione blogforum

    (@blogforum)

    Leggi mio post precedente, quello con EDIT

    Chi ha creato la discussione blogforum

    (@blogforum)

    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?

    Chi ha creato la discussione blogforum

    (@blogforum)

    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

Stai visualizzando 15 risposte - dal 1 al 15 (di 17 totali)
  • Il topic ‘Evidenziare parola trovata con la ricerca’ è chiuso a nuove risposte.