Destacando resultados de busca no WordPress.org

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Todos já estão acostumados com o sistema de busca do Google, Bing, Yahoo e etc. Quando você faz uma busca por um desses sites, são destacadas as palavras que você usou para efetuar sua busca. Isso nos ajuda a encontrar o que queremos. Você pode fazer esse mesmo efeito nos resultados das buscas feitas na página do seu blog.

 

Veja um exemplo de como são destacadas as palavras em negrito nos resultados do Google:

 

 

Hoje iremos ver como destacar palavras do resultado de busca dentro do seu blog WordPress.org. A configuração é relativamente simples vamos usar jquery, porém exige bastante atenção.

 

Configurando seu blog WordPress para destacar palavras em resultado de busca:

Primeiro de tudo realize o login no seu blog, logo vá para o menu "Aparência" e clique em "Editar", por último clique no arquivo "Funções do Tema (functions.php)".

 

 

Nele cole o código a baixo:

 

<?php function hls_set_query() { $query = attribute_escape(get_search_query()); if(strlen($query) > 0){ echo ' <script type="text/javascript"> var hls_query = "'.$query.'"; </script> '; } } function hls_init_jquery() { wp_enqueue_script('jquery'); } add_action('init', 'hls_init_jquery'); add_action('wp_print_scripts', 'hls_set_query'); ?>

Você pode e deve colar este código a cima de tudo, antes de começar qualquer outro código, assim você evita qualquer tipo de erro.

 

Depois de feito clique em "Atualizar Arquivo".

 

Agora procure o arquivo "Cabeçalho (header.php)".

 

 

Nele procure por </head>. Exatamente a cima desta tag cole o código a baixo:

 

<script type="text/javascript"> jQuery.fn.extend({ highlight: function(search, insensitive, hls_class){ var regex = new RegExp("(<[^>]*>)|(\\b"+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +")", insensitive ? "ig" : "g"); return this.html(this.html().replace(regex, function(a, b, c){ return (a.charAt(0) == "<") ? a : "<strong class=\""+ hls_class +"\">" + c + "</strong>"; })); } }); jQuery(document).ready(function($){ if(typeof(hls_query) != 'undefined'){ $("#container").highlight(hls_query, 1, "hls"); } }); </script>

Depois de feita a edição, clique em "Atualizar Arquivo" para salvar a alteração.

 

Agora é a parte mais importante do tutorial, então muita atenção: Precisamos saber qual é o nome do container que envolve todo o resultado de busca no seu blog. Para fazer isso clique no arquivo "search.php" (Resultados da pesquisa).

 

 

Estou usando em meu blog de testes o tema padrão do WordPress 3.0 que é o "Twenty Ten". Nele encontrei o seguinte container:

 

 

Como vocês podem ver o nome dela é "container". Caso seu blog tenha outro nome substitua a parte destacada do código no "header.php":

 

$("#container").highlight(hls_query, 1, "hls");

 

Fique atento, no caso era um "id" com o nome de container por isso ficou "#container", caso tivesse escrito "class" o correto seria ".container".

 

Depois de feito isso falta apenas escolher como você gostaria que aparecesse as palavras destacadas. Para isso configure agora o arquivo "Folha de estilos (style.css)".

 

 

No final do arquivo adicione o seguinte código:

 

/* Destacando palavras na busca */ .hls { background: #D3E18A; font-weight: bold; }

Veja o resultado final:

 

 

Aqui na verdade é apenas CSS. No caso deixei para o fundo das palavras aparecerem com um fundo azul e a palavra em negrito. Se você tem conhecimentos em CSS pode deixar bem entender.

 

Outras dicas para WordPress.org:

 

Fonte: How to Highlight Search Terms with jQuery « Weblog Tools Collection.

.

5 Comentários

  1. Fui realizar esse procedimento no meu blog (wordpress) e ele saiu do ar, ta dando esse erro no primeiro código que eu fui editar no functions.php:
    Parse error: syntax error, unexpected ‘}’

    Agora não consigo nem atualizar a página, nem realizar login, nada…

    O que eu faço?

    Responder

      • Não, eu apenas copiei e colei o código no local exato (functions.php) e ao salvar o arquivo já deu esse erro e não consegui fazer mais nada…
        Bom, vou tentar aqui…

        Responder

  2. Olá!
    Fiz o teste no localhost e funcionou perfeitamente.
    Quando tentei no ‘site oficial’ a palavra buscada fica entre:
    Já tentei configurar no css pra .highliht, mas não dá =(

    Obrigada!

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.