How To: creiamo un autocompletamento in Ajax nel motore di ricerca di Wordpress!
Geekissimo è l’impero dei Geek, e ogni Geek che si rispetti ha un proprio blog Wordpress. Wordpress è la piattaforma migliore e la più usata, nella creazione di Blog personali e non. E’ una delle più personalizzabili, oggi vedremo come personalizzare il tema che abbiamo impostato sul nostro blog. Nell’articolo di oggi vedremo come aggiungere un autocompletamento nel campo di ricerca del tema.
Il tutorial di oggi si dividerà in 4 parti, le quali andranno a modificare una parte diversa del tema. Il primo passo da seguire sarà quello di creare una pagina PHP, con il nome gettags.php, nella quale andremo ad inserire il seguente codice:
< ?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 '';
mysql_close();
?>
Una volta portato a termine questo passaggio arriviamo nella seconda fase della guida. Ora andremo a creare la direttiva Ajax che poi farà funzionare il nostro piccolo effetto. Creiamo un file gettags.js, contente il seguente codice:
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";
}
Una volta fatto questo, andiamo a modificare il file searchform.php del nostro tema. Aprendo il file vi troverete davanti un codice simile a questo:
<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>Andatelo ad eliminare completamente e sostituitelo con questo:
<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>
Una volta salvato il tutto, aprite il file CSS del tema e inserite le seguenti direttive:
#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;
}Bene, una volta salvato anche questo file, avete finito. Adesso provate l’effetto inserendo una parola da cercare nel vostro motore di ricerca e vedete se funziona il tutto. Fatemi sapere se funziona sul vostro blog, per qualsiasi problema lasciate un commento, vedremo di risolverlo tutti insieme.
Via | HackWordpress
9 Commenti
Scritto da Michele Laganà (Mister6339)
ottima segnalazione ….
Ma che plug in usate per fare un piccola pagina che si apre in alto a destra ?? grazie ciao
Cioa, ho seguito alla lettera il tutorial, ma non compare niente sotto la casella di testo del search.
un saluto a tutti :O) …. e con le scuse anticipate per l’intromissione
ps…………… …. potete perfavore risolvere il pro del ritorno alla pagina precedente che non funziona ? anche con alt + <— …. posso capire che può succedere al caricamento nuovo articolo … ma è una palla sempre ritornare al sito principale ! grazie anticipato
@ Generazione-Hacker.net:
Ciao ! ottima segnalazione…
Generazione-Hacker.net dice:
Per l’effetto angolo della pagina che si apre in alto a destra ci sono diversi mettodi, il piu utilizato è un file Flash con 2 immagini, la tecnica, se possiamo chiamarla tecnica, e il Page Peeling
Julien dice:
e più precisamente come si fa? ciao e grazie a tutti
@ Motherboard:
non potendo farti una guida proprio qui .. ti invito ad andare a fare un salto qui…
http://www.nemoprincess.it/wordpress/diario-di-bordo/effetto-page-peel-come-arricciare-la-pagina.html
altrimenti su Google scrivi Peel Page
Non ho capito alla fine dove vanno messi i primi due file.
In quelle cartella di wordpress? sempre quella del tema?
In più la sintassi del searchform non è corretta, poichè mi da errore sulla terza linea. Io di php ci capisco ben poco.
Magari è sbagliato?
A me non funziona niente… resta come prima…