HTML

Inscreva-se em nosso canal no Youtube Daviwp

Como criar uma pesquisa em Ajax para WordPress

18/04/2011 HTML | JQuery | WordPress (1) comentário

Já pensou como seria interessante facilitar a busca e ajudar seus leitores a encontrarem as matérias de seu site? Que tal criar um campo de pesquisa que completa as palavras automaticamente, tal como acontece com o Google?

Neste artigo, vamos criar uma pesquisa em Ajax, usando portanto PHP e Ajax. A ideia original é dos colegas do wphacks. Como este código é experimental, as buscas no SQL não estão devidamente otimizadas, tenha isso em mente.
A ideia

Usaremos tags como uma lista de palavras-chave a serem sugeridas ao leitor.

Quando o leitor começar a escrever na sua barra de pesquisa, usaremos Javascript para enviar um pedido a uma página PHP que fará o seguinte pedido ao SQL: SELECT * FROM matable WHERE ‘name’ LIKE ‘$search%’.

Via Ajax, enviaremos os resultados pesquisados para a nossa página, para mostrá-los ao leitor.

Parte 1: PHP

A primeira coisa a se fazer é criar uma página PHP. Essa página irá enviar um pedido ao banco de dados do WordPress e mostrará as tags como uma lista não ordenada em HTML.

<?php
 
if (isset($_POST['search'])) {
 
        $search = htmlentities($_POST['search']);
 
} else  $search ='';
 
$db = mysql_connect('localhost','root',''); //Don't forget to change
 
mysql_select_db('wp', $db);          //theses parameters
 
$sql = "SELECT name from wp_terms WHERE name LIKE '$search%'";
 
$req = mysql_query($sql) or die();
 
echo '<ul>';
 
while ($data = mysql_fetch_array($req))
 
{
 
        echo '<li><a href="#" onclick="selected(this.innerHTML);">'.htmlentities($data['name']).'</a></li>';
 
}
 
echo '</ul>';
 
mysql_close();
 
?>

Esse código é bastante simples: ele recebe um parâmetro POST (as letras escritas no campo de pesquisa pelo visitante) e depois envia um pedido para a nossa base de dados WordPress como forma de receber as tags que se iniciam com essas mesmas palavras.
Parte 2: AJAX

Precisaremos programar 4 funções Javascript, de forma a recriar a nossa pesquisa que completa as palavras automaticamente:

A função ajax() irá criar um objeto XMLHTTPRequest.
A função request() irá enviar um pedido em Ajax para puxar o nosso arquivo gettags.php.
A função return() irá retornar os dados do arquivo gettags.php.
A função selected() irá atualizar o campo de pesquisa.

Comece por criar um arquivo com o nome gettags.js e cole lá dentro o seguinte código:

var myAjax = ajax();
 
function ajax() {
 
        var ajax = null;
 
        if (window.XMLHttpRequest) {
 
                try {
 
                        ajax = new XMLHttpRequest();
 
                }
 
                catch(e) {}
 
        }
 
        else if (window.ActiveXObject) {
 
                try {
 
                        ajax = new ActiveXObject("Msxm12.XMLHTTP");
 
                }
 
                catch (e){
 
                        try{
 
                                ajax = new ActiveXObject("Microsoft.XMLHTTP");
 
                        }
 
                        catch (e) {}
 
                }
 
        }
 
        return ajax;
 
}
 
function request(str) {
 
    //Don't forget to modify the path according to your theme
 
        myAjax.open("POST", "wp-content/themes/openbook-fr/gettags.php");
 
        myAjax.onreadystatechange = result;
 
        myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 
        myAjax.send("search="+str);
 
}
 
function result() {
 
        if (myAjax.readyState == 4) {
 
                var liste = myAjax.responseText;
 
                var cible = document.getElementById('tag_update').innerHTML = liste;
 
                document.getElementById('tag_update').style.display = "block";
 
        }
 
}
 
function selected(choice){
 
        var cible = document.getElementById('s');
 
        cible.value = choice;
 
        document.getElementById('tag_update').style.display = "none";
 
}

Parte 3: editar o template

Agora que temos nosso PHP e Javascript prontos, podemos editar o arqivo searchform.php do nosso template WordPress.

O seu novo arquivo searchform.php deverá ficar assim:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
 
        <div>
 
                <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
 
                <input type="submit" id="searchsubmit" value="Search" />
 
        </div>
 
</form>

Teremos de adicionar uma div, que irá mostrar os dados recebidos a partir do pedido, bem como um evento Javascript no formulário de pesquisa:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
 
    <div>
 
        <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" onkeyup="request(this.value);"/>
 
        <input type="submit" id="searchsubmit" value="Search" class="button" />
 
    </div>
 
    <div id="tag_update"></div>
 
</form>

Parte 4: CSS

Tendo em consideração que todos os templates WordPress utilizam sistemas de cores diferentes, este é apenas um exemplo do que poderá fazer com o seu CSS.

#tag_update {
 
        display: block;
 
        border-left: 1px solid #373737;
 
        border-right: 1px solid #373737;
 
        border-bottom: 1px solid #373737;
 
        position:absolute;
 
        z-index:1;
 
}
 
#tag_update ul {
 
        margin: 0;
 
        padding: 0;
 
        list-style: none;
 
}
 
#tag_update li{
 
        display:block;
 
        clear:both;
 
}
 
#tag_update a {
 
        width:134px;
 
        display: block;
 
        padding: .2em .3em;
 
        text-decoration: none;
 
        color: #fff;
 
        background-color: #1B1B1C;
 
        text-align: left;
 
}
 
#tag_update a:hover{
 
        color: #fff;
 
        background-color: #373737;
 
        background-image: none;
 
}

É isso! Acabamos de criar uma pesquisa que completa para palavras automaticamente! Se tiver alguma questão, deixe um comentário.

Até a próxima!

Autor: Paulo Faustino

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.