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.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

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.