A IDEIA

Iremos usar tags como uma lista de palavras-chave a sugerir ao leitor.

Quando o seu leitor começar a escrever na sua barra de pesquisa, iremos usar 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, iremos enviar os resultados pesquisados para a nossa página, e mostrá-los ao leitor.

PRIMEIRA PARTE: PHP

A primeira coisa a fazer é criar uma página PHP. Esta página irá enviar um pedido ao nosso 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();
?>

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 DOIS: AJAX

Iremos necessitar de 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 TRÊS: EDITAR O TEMPLATE

Agora que temos o nosso PHP e Javascript prontos, podemos editar o arquivo 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 QUATRO: 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;
}

É tudo! Acabou de criar uma pesquisa que completa a palavras automaticamente! Se tiver alguma questão, deixe um comentário.

Via Como criar uma pesquisa em Ajax para seu blog WordPress

Flexibilidade

O plugin possui uma área administrativa com inúmeras opções, sendo capaz de atender às mais diversas necessidades. Dentre as suas principais características estão a escolha de skins – podendo também alterar as cores de background, textos e links -, a inserção de códigos personalizados para estatísticas de monitoramento, a edição de CSS, a inclusão de logomarca para tela inicial e favoritos, e as notificações push através da sua conta Prowl.

Comentários AJAX postados em tempo real, completo sistema de pesquisa, possibilidade de mostrar ou ocultar resumos, e suporte para os plugins FlickrRSS (fotos) e Blip.it (vídeos) são outras funções que fazem do WPtouch um adicional para WordPress que não pode faltar no seu site.

Internacionalização

Mesmo com tudo isso, o WPtouch, atualmente na versão 1.9.3.3, ainda precisa consolidar-se na era da internacionalização, processo de desenvolvimento de aplicações prontas para tradução. Seu código já está quase todo preparado, porém ele sequer possui um arquivo de linguagem em inglês. Entretanto, segundo Dale Mugford, um dos idealizadores do WPtouch, em breve teremos a versão 2.0, trazendo o esperado suporte para vários idiomas.

Download: Plugin WordPress WPtouch Inglês

Tradução para Português do Brasil

Enquanto a multilinguagem não chega oficialmente ao WPtouch, resolvi a ele dedicar um pouco de tempo e de certa forma contribuir para tal lançamento. Aproveitando a aparente estabilidade da revisão 1.9.3.3, desvendei alguns “segredos” básicos de PHP e traduzi todo o plugin para o Português do Brasil ou pt_BR, como chamamos em linguagem computacional.

Download: Plugin WordPress WPtouch Português do Brasil – 1.9.3.3

Fonte: isaacribeiro