Blogumuzun arama özelliği gerçekten de ölümcül bir özelliktir ve olmazsa olmaz diyebilirim. Jean-Baptiste Jung WordPress altyapısına sahip blogumuzdaki arama kutusunu ajax teknolojisi ile nasıl daha verimli hale getirebileceğimiz konusunda bir makale ve gerekli kodları yazmış.

BlogBlogu.com’un da kullandığı bu özelliğe en yakın ve en bilinir sistem Google’ın kullandığı “Öneriler” yöntemi. Ziyaretçi arama kutusuna aramak istediği kelimeyi yazmaya başlamasıyla sistem database’den aynı harflerle başlayan arama önerilerini listeleyerek kullanıcıya sunuyor. Yazının devamında bahsedeceğim ve kodlarını vereceğim yöntem şu an için çok da iyi bir performans sergilemiyor fakat yine de kullanmak isteyeceğinizi düşünüyorum.

İlk olarak temamızın klasörüne aşağıdaki kodları ekliyoruz ve adına gettags.php koyuyoruz.

<?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();
?>

Hemen sonra aynı klasöre gettags.js isimli bir dosya daha oluşturuyoruz ve onun kodları:

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";
}

Temayı Düzenleme:

Temanızın klasöründen arama kutusunun kodlarının olduğu dosyayı bulmanız gerekiyor. Büyük bir ihtimalle headers.php ya da searchform.php adlı dosyada olan kod aşağıdakine benziyordur.

<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>

İşte biz form bitmeden önceki kısıma (</form> dan öncesine) “<div id=”tag_update”></div>” yı yapıştırmalıyız. Yani sonuç şöyle olacak.

<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>

Son Bölüm: CSS

Son olarak da .css dosyanıza aşağıdaki kodları eklediniz mi olmuş demektir. Tebrikler=)

#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;
}