Busca do WordPress em AJAX

Por: Flávio Theruo KaminisseWednesday 22 February 2006 às 2:18 PM

Estava eu lendo meus feeds ontem, quando encontrei uma adaptação à busca do WordPress toda feita em AJAX (Asynchronous JavaScript And XML), é uma busca muito interessante e é facilmente integrada ao WordPress.

Vou fazer uma breve descrição da integração, pois no artigo HOWTO: Animated Live Search o autor explica todo o processo de uma forma muito simples.

Basicamente basta fazer uma pequena alteração no arquivo search.php adicionando estas linhas de código no início do arquivo

<?php if (isset($_GET['ajax']) && $_GET['s']) { ?>

    <?php
    //You might want to show fewer results than the standard per-page number
    $max_results = 6;
    ?>
    <h3>Search Results</h3>
    <?php if (have_posts()) : $i = 0; ?>
    <ul>
        <?php while (have_posts()) : the_post(); $i++; ?>

        <li><a href="<?php the_permalink() ?>" rel="bookmark"
              title="Permanent Link to <?php the_title(); ?>"
              ><?php the_title(); ?></a>

            <?php if ($i == $max_results) break; ?>
        <?php endwhile; ?>

            <li class="more"><a href="/?s=<?php echo urlencode($_GET['s']);
                  ?>">Get More Details in the Full View</a></li>
        </ul>

    <?php else : ?>
    <p>Sorry, nothing matched your search.</p>

    <p>&nbsp;</p>
    <?php endif; ?>

<?php } else { ?>

e no final do arquivo colocar a linha


<?php } ?>

já no arquivo searchform.php adicionar a linha

<div id="search-results"></div>

e incluir os arquivos javascript


<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js" type="text/javascript"></script>
<script src="/js/general.js" type="text/javascript"></script>

no cabeçalho da página.

Destes arquivos javascript que você vai adicionar na página, o único que você vai precisar de editar é o arquivo general.js, pois você terá que substituir o endereço do site pelo endereço do seu site.

Disponibilizeis todos os arquivos que eu modifiquei, quem quiser baixar, basta clicar aqui.

Quem tiver alguma dúvida, ou então alguma dificuldade para fazer a integração, basta me escrever, ou então postar sua dúvida neste espaço que tentarei responder o mais rápido possível.

Vale lembrar também que estilos podem ser aplicados ao resultado da busca, juntamente com o código de retorno que pode ser totalmente editado se adequando a cada caso, agradecendo o Henrique por ter adaptado os estilos para a nova busca.

Eu gostei bastante desta “funcionalidade”, espero que todos gostem.

Depois estudarei o código com mais tempo e tentarei integrar com o “framework” XAJAX.

[update] Seguindo a dica do Cosme, estou postando um link para o site do Tiago Madeira, onde ele fala de uma busca, também em AJAX (Asynchronous JavaScript And XML), um pouco diferente desta, acho que vale a pena conferir. Valeu Cosme, e excelente artigo Tiago. [/update]

Artigos relacionados:

Tags: AJAX JavaScript PHP Programação Tecnologia Tutorial Wordpress

6 Comentários para “Busca do WordPress em AJAX”

# 1° CosmeWeb February 22nd, 2006 às 4:47 PM GMT

Meu amigo Tiago Madeira tinha feito um artigo sobre isso:
http://tiagomadeira.net/2006/01/03/livesearch-no-wordpress/

Eu segui o dele e deu certo, pelo que eu li no seu, parece estar tudo OK também. ;)

# 2° Ciro Feitosa March 6th, 2006 às 10:06 AM GMT

Salve Flavio! Muito interessante sua dica. Breve estarei lançando uma nova versão do meu blog com WP, e quase certeza que vou implementar esta busca também.

Abraço!

# 3° vinicius.big October 2nd, 2006 às 12:28 AM GMT

Certo.. mas essa interação deve usar uma versão mais antiga do WordPress… eu uso a versão 2.0.4 e naum achei os arquivos search.php e o searchform.php

alguém podeira me ajudar???

Abs!

# 4° Andreas April 26th, 2007 às 8:26 PM GMT

Have this:3

# 5° Rodrigo August 17th, 2008 às 2:10 PM GMT

boa dica vou fazer esse teste em meu blog, obrigado amigo até mais

# 6° de musicas November 16th, 2008 às 6:14 PM GMT

Boa dica para um blog igual ao meu que tem mais de 1 milhão em letras de musicas (na forma de post)…
valeu…

Avisos
Os ítens com asterisco ( * ) são campos de preenchimento obrigatório.
Todos os links inseridos nos comentários possuem o atributo rel="nofollow" para impedir com que user agents (como os mecanismos de busca) sigam os links inseridos para desestimular spammers.
Todos devem se identificar através de e-mail válido.
Os e-mails dos usuários não serão divulgados no site.
Comentários:
  • Sigam-me no Twitter

Sobre o Japs

Foto do autor Flávio Theruo Kaminisse O Japs é o site pessoal do Flávio T. Kaminisse, atualmente trabalha com Análise de sistemas na Webroom Soluções Interativas, é formado em Ciência da Computação pela Universidade Federal de Uberlândia, é também especialista em Banco de Dados, tendo concluído sua pós-graduação pela Unitri, gosta de mexer um pouco com Linux, é responsável pela área de TI do Charges.com.br e Webinsider, e ainda arruma um tempinho para escrever sobre tecnologia, javascript, AJAX, desenvolvimento e outros assuntos interessantes por aqui. Leia mais.

Você ainda não tem estes livros na sua biblioteca? Cuidado! Você está ficando desatualizado.

  • Sistemas de Banco de Dados - Ramez E. Elmasri, Shamkant Navathe
  • PHP: a Bíblia - Tim Converse, Joyce Park
  • MySQL: a Bíblia - Steve Suehring
  • Fundamentos do Ajax - Ryan Asleson, Nathaniel T. Schutta
  • Hackers Expostos - Stuart Mcclure, Joel Scambray, George Kurtz
  • PHP 5: Programação Poderosa - Gutmans, Bakken, Rethans
  • Não me faça pensar! - Steve Krug
  • Google Adwords a Arte da Guerra - Ricardo Vaz Monteiro
  • Sandman - Neil Gaiman
  • The Art and Science of Web Design - Jeffrey Veen
  • Ansiedade de Informação 2 - RICHARD SAUL WURMAN
  • Mobile Web Design - Cameron Moll

838 assinantes Assine o feed do Japs

Artigos por e-mail

Receba os últimos artigos do Japs no seu e-mail.


Encontre-me

O Japs recomenda

Blogs amigos:

Alguns sites e blogs que valem a pena ser visitados:

Pessoas que trabalham comigo:

Sites dos colegas de trabalho na Webroom.

Já trabalharam comigo: