Como criar uma pesquisa em Ajax em seu site WordPress
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. Tenha em consideração que mesmo este código sendo
experimental e trata-se de uma ideia do colegas do wphacks,
as buscas no SQL não estão devidamente
otimizadas.
A ideia
Usaremos tags como uma lista de palavras-chave a sugerir 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.
![\"\\"\\"\"](\"%5C%22http://conteudo.imasters.com.br/19681/32942.jpg%5C%22\")
Parte 1: PHP
A primeira coisa a se fazer é criar uma página PHP. Esta
página irá enviar um pedido ao banco de dados do WordPress e mostrará as tags como
uma lista não ordenada em HTML.
<br />if (isset($_POST[\\\'search\\\'])) {<br /><br /> $search = htmlentities($_POST[\\\'search\\\']);<br /><br />} else $search =\\\'\\\';<br /><br />$db = mysql_connect(\\\'localhost\\\',\\\'root\\\',\\\'\\\'); //Don\\\'t forget to change<br /><br />mysql_select_db(\\\'wp\\\', $db); //theses parameters<br /><br />$sql = \\\"SELECT name from wp_terms WHERE name LIKE \\\'$search%\\\'\\\";<br /><br />$req = mysql_query($sql) or die();<br /><br />echo \\\'<ul>\\\';<br /><br />while ($data = mysql_fetch_array($req))<br /><br />{<br /><br /> echo \\\'<li><a href="\"%5C%22#%5C%22\"selected(this.innerHTML);\\\"\'\"">\\\'.htmlentities($data[\\\'name\\\']).\\\'</a></li>
\\\';<br /><br />}<br /><br />echo \\\'</ul>
\\\';<br /><br />mysql_close();<br /><br />?>Este 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();<br /><br />function ajax() {<br /><br /> var ajax = null;<br /><br /> if (window.XMLHttpRequest) {<br /><br /> try {<br /><br /> ajax = new XMLHttpRequest();<br /><br /> }<br /><br /> catch(e) {}<br /><br /> }<br /><br /> else if (window.ActiveXObject) {<br /><br /> try {<br /><br /> ajax = new ActiveXObject(\\\"Msxm12.XMLHTTP\\\");<br /><br /> }<br /><br /> catch (e){<br /><br /> try{<br /><br /> ajax = new ActiveXObject(\\\"Microsoft.XMLHTTP\\\");<br /><br /> }<br /><br /> catch (e) {}<br /><br /> }<br /><br /> }<br /><br /> return ajax;<br /><br />}<br /><br />function request(str) {<br /><br /> //Don\\\'t forget to modify the path according to your theme<br /><br /> myAjax.open(\\\"POST\\\", \\\"wp-content/themes/openbook-fr/gettags.php\\\");<br /><br /> myAjax.onreadystatechange = result;<br /><br /> myAjax.setRequestHeader(\\\"Content-type\\\", \\\"application/x-www-form-urlencoded\\\");<br /><br /> myAjax.send(\\\"search=\\\"+str);<br /><br />}<br /><br />function result() {<br /><br /> if (myAjax.readyState == 4) {<br /><br /> var liste = myAjax.responseText;<br /><br /> var cible = document.getElementById(\\\'tag_update\\\').innerHTML = liste;<br /><br /> document.getElementById(\\\'tag_update\\\').style.display = \\\"block\\\";<br /><br /> }<br /><br />}<br /><br />function selected(choice){<br /><br /> var cible = document.getElementById(\\\'s\\\');<br /><br /> cible.value = choice;<br /><br /> document.getElementById(\\\'tag_update\\\').style.display = \\\"none\\\";<br /><br />}Parte 3: editar o
template
Agora que temos o nosso PHP e Javascript prontos, podemos
editar o arqivo searchform.php do nosso template WordPress:
O seu novo arquivo searchform.php deverá ficar assim:
/\\\"><br /><br /> <br /><br /> \\\" name=\\\"s\\\" id=\\\"s\\\" /><br /><br /> <br /><br /> <br /><br />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:
/\\\"><br /><br /> <br /><br /> \\\" name=\\\"s\\\" id=\\\"s\\\" onkeyup=\\\"request(this.value);\\\"/><br /><br /> <br /><br /> <br /><br /> <br /><br />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 {<br /><br /> display: block;<br /><br /> border-left: 1px solid #373737;<br /><br /> border-right: 1px solid #373737;<br /><br /> border-bottom: 1px solid #373737;<br /><br /> position:absolute;<br /><br /> z-index:1;<br /><br />}<br /><br />#tag_update ul {<br /><br /> margin: 0;<br /><br /> padding: 0;<br /><br /> list-style: none;<br /><br />}<br /><br />#tag_update li{<br /><br /> display:block;<br /><br /> clear:both;<br /><br />}<br /><br />#tag_update a {<br /><br /> width:134px;<br /><br /> display: block;<br /><br /> padding: .2em .3em;<br /><br /> text-decoration: none;<br /><br /> color: #fff;<br /><br /> background-color: #1B1B1C;<br /><br /> text-align: left;<br /><br />}<br /><br />#tag_update a:hover{<br /><br /> color: #fff;<br /><br /> background-color: #373737;<br /><br /> background-image: none;<br /><br />}É isso! Acabamos de criar uma pesquisa que completa a
palavras automaticamente! Se tiver alguma questão, deixe um comentário.
Até a próxima!
é o fundador da Escola Dinheiro. Empreendedor e blogueiro, trabalha em tempo integral na internet e dedica a sua vida à produção e compartilhamento de conteúdos numa rede de projetos que conta já com alguns dos maiores e mais reconhecidos blogs do Brasil e de Portugal, nomeadamente o Escola Dinheiro, Escola WordPress e também a Galeria de Blogs. É estudante de Engenharia Informática em Sistemas de Informação e totalmente viciado em Web2.0. Paulo Faustino é também palestrante e consultor em gestão de campanhas de afiliação, otimização de blogs WordPress e ainda monetização/rentabilização de websites e blogs. No Twitter, siga @escoladinheiro.
