LiveSearch no WordPress

O Cosme me apresentou hoje um projeto chamado LiveSearch. É uma aplicação Ajax bem simples (eu mesmo conseguiria fazer), mas uma idéia que eu ainda não havia tido.

Resolvi então implementar o negócio no meu blog e estou escrevendo esse artigo pra explicar como instalamos o LiveSearch de forma que ele funcione com o WordPress e dentro dos padrões de XHTML Strict (ele pede originalmente que utilizamos name num form e exige que o nome de um campo seja “q” ao invés do “s” do WordPress).

Então, mãos a obra!

1. livesearch.php

Para começar, você deve criar um arquivo e chamá-lo livesearch.php. O seu conteúdo deve ser:

<?php if (have_posts()) : ?>


<ul class="LSRes">
  <?php while (have_posts()) : the_post(); ?>


  <li class="LSRow">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

  </li>


  <?php endwhile; ?>

</ul>


<?php endif; ?>

Para facilitar para quem quer aprender PHP, vou explicar linha por linha:

  1. Se houver posts, faça:
  2. Lista HTML
  3. Enquanto houver posts: Execute a função the_post().
  4. Item da Lista HTML
  5. Linca para o permalink do post com o texto do link = seu título.
  6. Fim do “Item da Lista HTML”
  7. Fim do “Enquanto houver posts”
  8. Fim da “Lista HTML”
  9. Fim do “Se houver posts”

Observação: As cores são só para reforçar a hierarquia.

O que este arquivo faz, portanto, é criar uma lista com o título dos posts. Essas funções são todas do WordPress (haveposts, thetitle, the_permalink, etc.). Se você quisesse colocar outras coisas na lista que vai aparecer no resultado, pode colocar aí nesse arquivo.

No fim, salve esse arquivo em /wp-content/themes/SEU_TEMA/livesearch.php.

2. Redirecionar para livesearch.php se for uma pesquisa “live”

Coloque no início do arquivo /wp-content/themes/SEU_TEMA/search.php o seguinte conteúdo:

<?php if ($_GET["live"]) {
		include("livesearch.php");
		die();
	} ?>
  1. Se a query string live “existir”, faça:
  2. Inclua o arqiuvo livesearch.php nessa página.
  3. Morra!!! :D Isso significa para ele parar de executar qualquer coisa que esteja debaixo disso.
  4. Fim do “Se”

Isso serve para que possamos fazer as buscas de duas maneiras. Uma é a busca normal, que é acessada por /?s=queries e outra é a live que será acessada por /?live=1&s=queries (ou seja, a mesma coisa mas dando valor à variável “live”).

3. JavaScripts

Baixe o arquivo livesearch.js e coloque-o na pasta /wp-content/themes/SEU_TEMA/.

Agora faremos uma série de mudanças pra manter o negócio nos padrões web… Substitua as seguintes linhas pelo texto que aparece depois do seu número:

  • 122: if (liveSearchLast != document.getElementBy(‘livesearch’).value) {
  • 126: if ( document.getElementById(‘livesearch’).value == “”) {
  • 136: liveSearchReq.open(“GET”, liveSearchRoot + “/?live=1&s=” + document.getElementById(‘livesearch’).value + liveSearchParams2);
  • 137: livesearchLast = document.getElementById(“livesearch”).value;

Isso serve para ele não depender do nome do formulário e da query, mas somente do ID do campo do formulário e para ele abrir no xmlHttpRequest /?live=1&s=QUERY ao invés do padrão /livesearch.php?q=QUERY.

4. Eventos JavaScript nos documentos

No seu arquivo /wp-content/themes/SEU_TEMA/header.php, adicione o evento onload à tag BODY:

<body onload="liveSearchInit()">

No mesmo arquivo, dentro da tag HEAD linke para o script:

<script type="text/javascript" src="/wp-content/themes/SEUTEMA/livesearch.js"></script>

Agora, no arquivo /wp-content/themes/SEU_TEMA/searchform.php, adicione um evento onsubmit ao FORM

<form onsubmit="return liveSearchSubmit()" ...

E, no mesmo arquivo, adicione um evento onKeyPress ao INPUT e também um id:

<input id="livesearch" onKeyPress="liveSearchStart();"

E ao final desse arquivo, coloque:

<div id="LSResult" style="display: none;">
<div id="LSShadow">
</div>
</div>

Se você fez tudo certo e eu não errei aqui no tutorial, o seu script deve sair funcionando! Agora personalize usando estilos pra fazer um negócio bonito! (algo que eu não fiz porque tô pra trocar totalmente o design do meu site)


A Lógica do Negócio

O arquivo search.php recebe todas as buscas. O que eu fiz criando o livesearch.php foi formatar o resultado da busca de forma diferente para ele aparecer ali debaixo do formulário de busca.

O script é bem simples. Um Ajax que simplesmente faz um xmlHttpRequest a cada keypress do cara no campo. Aliás, acho que dá pra fazer um script bem menor pra só fazer isso.

Deixei o meu site meio feio com isso aí (uma lista de bullets normais e tal…), mas é porque eu tô pra trocar o design em breve e aí vou arrumar isso tudo! (inclusive, devo colocar mais Ajax!)

Qualquer dúvida, comente ou me mande um e-mail.

© 2005–2020 Tiago Madeira