Cómo resaltar términos de búsqueda sin plugin

1 may 2011, 05:18:37
Vistas: 21.5K
Votos: 19

¿Cómo puedo resaltar los términos de búsqueda sin utilizar un plugin?

0
Todas las respuestas a la pregunta 4
5
17

Añade estas 2 funciones a tu archivo functions.php

function search_excerpt_highlight() {
    $excerpt = get_the_excerpt();
    $keys = implode('|', explode(' ', get_search_query()));
    $excerpt = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $excerpt);

    echo '<p>' . $excerpt . '</p>';
}

function search_title_highlight() {
    $title = get_the_title();
    $keys = implode('|', explode(' ', get_search_query()));
    $title = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $title);

    echo $title;
}

Editar:

Para usar the_content en tus resultados de búsqueda utiliza la siguiente función:

function search_content_highlight() {
        $content = get_the_content();
        $keys = implode('|', explode(' ', get_search_query()));
        $content = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $content);

        echo '<p>' . $content . '</p>';
    }

En tu loop o archivo search.php llama <?php search_title_highlight(); ?> en lugar de <?php the_title(); ?> y usa <?php search_excerpt_highlight(); ?> en vez de <?php the_excerpt(); ?>

En tu CSS añade la clase search-highlight que resaltará en amarillo todas las palabras buscadas.

.search-highlight {
    background:#FFFF00  
    }
1 may 2011 05:38:55
Comentarios

Aplica preg_quote() a $keys para evitar que tu expresión regular falle en caso de caracteres especiales como paréntesis o corchetes.

Geert Geert
1 may 2011 10:09:24

Deberían ser filtros para the_excerpt y the_content en su lugar. De todos modos: Buena respuesta, pero el comentario de @Geert podría incorporarse :)

kaiser kaiser
13 oct 2012 03:25:17

¿Qué tal resaltar el término de búsqueda después de que el usuario haga clic en el enlace y entre en la publicación? Entonces get_search_query() devuelve una cadena vacía

Maor Barazany Maor Barazany
23 may 2011 02:47:53

Aplica <strong class="search-highlight"> código en nuestro enlace "leer más" incluso si tiene el término de búsqueda, ¿Cómo podemos solucionar eso?

User User
18 oct 2012 10:20:57

¿Está reemplazando el texto en el href del "leer más"? ¿Cómo solucionar esto?

Naveen Naveen
13 ene 2014 14:58:21
0

El código anterior funciona bien, he ejecutado un código similar, pero vinculando el título y el extracto juntos. Sin embargo, descubrí que falla cuando alguien introduce un espacio " " ya sea al principio o al final de un término de búsqueda.

Así que he añadido esta línea:

$keys = array_filter($keys);

// Añadir negrita al término buscado
function highlight_results($text){
     if(is_search() && !is_admin()){
     $sr = get_query_var('s');
     $keys = explode(" ",$sr);
     <strong>$keys = array_filter($keys);</strong>
     $text = preg_replace('/('.implode('|', $keys) .')/iu', ''.$sr.'', $text);
     }
     return $text;
}
add_filter('the_excerpt', 'highlight_results');
add_filter('the_title', 'highlight_results');

Espero que esto ayude a otros.

9 dic 2014 04:20:22
1

Las soluciones anteriores rompen la página si el término de búsqueda aparece dentro de etiquetas HTML. Deberías usar algo como:

      $regEx = '\'(?!((<.*?)|(<a.*?)))(\b'. implode('|', $keys) . '\b)(?!(([^<>]*?)>)|([^>]*?</a>))\'iu';
      $text = preg_replace($regEx, '<strong class="search-highlight">\0</strong>', $text);
27 jul 2015 18:47:00
Comentarios

gracias compañero, me alegraste el día :-)

Agha Umair Ahmed Agha Umair Ahmed
26 ene 2016 13:56:39
0

Combiné 2 respuestas para usar filtros:

// Agrega clase a los términos buscados
function highlight_results($text) {
    if (is_search() && !is_admin()) {
        $sr = get_query_var('s');
        $keys = explode(' ', $sr);
        $keys = array_filter($keys);
        $text = preg_replace('/('.implode('|', $keys) .')/iu', '<span class="search-highlight">\0</span>', $text);
    }
    return $text;
}
add_filter('the_excerpt', 'highlight_results');
add_filter('the_title', 'highlight_results');

Luego en tu CSS (por ejemplo):

.search-highlight {
    background: #ffff94;
    padding: 0 2px;
}
2 mar 2020 12:35:24