Tuto WordPress: une recherche avec autocomplétion from Scratch

Si vous souhaitez donner un coup de jeune au champ de recherche de votre blog WordPress avec l’autocomplétiion, il est possible en quelques lignes de code de mettre ce système en place grâce à jQuery et plus particulièrement grâce à Ajax. Tout d’abord, il faut vérifier que le champ de recherche de notre blog a bien pour id la valeur s, ce qui est le cas par défaut dans de nombreux thèmes. Ensuite, il nous faut évidemment ajouter le script jquery à nos pages. Ce dernier est généralement embarqué par de nombreux thèmes, à vous de vérifier! Notre système de recherche avec autocomplétion se compose d’un fichier PHP que nous interrogerons depuis notre page grâce à Ajax. Le fichier PHP renverra les résultats de notre recherche en JSon. Un petit bout de code javascript dans notre page transformera ces informations sous forme d’une liste, qui sera affichée dans un div sous le champ de recherche.
Avant de vous plonger dans le code, qui est très simple, vous pouvez tester votre future recherche avec autocomplétion sur le blog suivant.

Voici tout d’abord notre page html.

<!doctype html>
<html lang="fr">
<head>
// ...
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
</head>
<body>
<!-- le corps de notre page avec le champ de recherche: -->
<input type="text" value="" name="s" id="s" class="field" />
<!-- le div qui nous permettra d'afficher les résultats -->
<div id="suggestions"></div>
// ...
<script>
// la page est chargée
$(function() {
// à chaque changement de notre champ de recherche
$("#s").keyup(function () {

var value = $("#s").val();
var isLoading = false;

if(isLoading == false){
$.ajax({
beforeSend: function() {
isLoading = true;
},
type: "GET",
url: "http://monsite.fr/wp-content/themes/montheme/resultSearch.php",
data: { term : value},
success: function(res) {

$("#suggestions").empty();
var result= '';
var obj = $.parseJSON(res);
$.each(obj, function() {
if (this['url'].length == 0) {
result+= '<p>' + this['title'] + "</p>";
}else{
result+= '<p><a href="' + this['url'] + '">' + this['title'] + "</a></p>";
}
});
$("#suggestions").empty();
$("#suggestions").append(result);

}
}).done(function() {
isLoading = false;
});
}

});

});
</script>
</body></html>

Voici maintenant le fichier resultSearch.php. Il est placé dans le dossier de notre thème. Nous effectuons notre requêtes grâce à $wpdb, nous incluons donc wp-load.php. Nous utilisons la puissance de PHP pour écrire nos résultats en JSON.


<?php

// on empeche la mise en cache
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
// on fixe le content-type
header('Content-Type: text/html; charset=utf-8');
// on inclut wp-load.php pour avoir accès à $wpdb

include("../../../wp-load.php");

// on recupère la recherche
$recherche = mysql_real_escape_string($_GET['term']);

// les table de nos posts et de nos terms (=categories et =tags)
$table_name_posts = $wpdb->prefix . "posts";
$table_name_terms = $wpdb->prefix . "terms";

// si la recherche n'est pas vide
if (strlen($recherche) > 0) {

// on initialise le tableau qui sera transformé en json
$a_json = array();
$a_json_row = array();

// PREMIERE RECHERCHE TAG et CAT
// notre requete, on fixe le nombre maxi de resultats à 2
$sql = "SELECT name, term_id FROM " . $table_name_terms . " WHERE name LIKE '%$recherche%' AND term_id != 1 LIMIT 2 ";
$mesposts = $wpdb->get_results($sql);

if ($mesposts) {

// on précise que nous sommes dans les dossiers, url = "", permet d'afficher un simple et non un lien
$a_json_row["title"] = "dans les dossiers:";
$a_json_row["url"] = "";
array_push($a_json, $a_json_row);

foreach ($mesposts as $monpost) {
$linkTag = "";
$linkTag = get_tag_link($monpost->term_id);
// si le lien est vide pour un tag, on essaie avec les catégories
if ($linkTag == "") {
$linkTag = get_category_link($monpost->term_id);
}
if ($linkTag != "") {
$a_json_row["title"] = $monpost->name;
$a_json_row["url"] = $linkTag;
array_push($a_json, $a_json_row);
}
}
}

// DEUXIEME RECHERCHE DANS LES POSTS
$queryDebut = "SELECT post_title, ID FROM " . $table_name_posts . " WHERE ";

// construit la requete avec la fonction, la recherche est découpée en mots
$query = construireRequete($recherche, "post_title");

// si le résultat de construireRequete n'est pas vide, on continue
if ($query != "") {
$queryFinale = $queryDebut . " " . $query . "AND post_status = 'publish' AND post_type = 'post' ORDER BY post_date DESC LIMIT 5 ;";
$mesposts = $wpdb->get_results($queryFinale);
if ($mesposts) {

// on précise que nous sommes dans les billets
$a_json_row["title"] = "dans les billets:";
$a_json_row["url"] = "";
array_push($a_json, $a_json_row);

foreach ($mesposts as $monpost) {
$a_json_row["title"] = $monpost->post_title;
$a_json_row["url"] = get_permalink($monpost->ID);
array_push($a_json, $a_json_row);
}

} else {
$a_json_row["title"] = "pas de suggestions";
$a_json_row["url"] = "";
array_push($a_json, $a_json_row);
}
}

// si le champ de recherche est vide
} else {
$a_json_row["title"] = "entrez une recherche";
$a_json_row["url"] = "";
array_push($a_json, $a_json_row);
}

// on echo notre tableau en json
echo json_encode($a_json);

// fonction pour chercher dans les posts mot par mot

function construireRequete($recherche, $champ) {

// on prepare la requete pour les posts en decoupant la recherche en mots
$arraySearch = explode(" ", trim($recherche));
$countSearch = count($arraySearch);

// on prepare la requete
$quote = "'";

if ($countSearch > 0) {
$a = 0;
while ($a < $countSearch) {
$query = $query . $champ . " LIKE $quote%$arraySearch[$a]%$quote ";
$a++;
if ($a < $countSearch) {
$query = $query . " AND ";
}
}
} else {
$query = "";
}
return $query;
}

?>

Il est possible d’améliorer ce système en s’attaquant par exemple au css de nos résultats.

sources: http://jqueryui.com/autocomplete/ et http://www.wowww.nl/2014/02/01/jquery-autocomplete-tutorial-php-mysql/ et http://codex.wordpress.org/Class_Reference/wpdb

Publié dans jQuery, Wordpress

quand j’aurai le temps

  • les filtres wordpress
  • plugin wordpress et enregistrement de données
  • les wordpress custom post type
  • la bdd d'un blog wordpress
  • la balise more de wp
  • personnaliser une galerie wp
  • gérer les longueurs des extraits de wp
  • les animations css3
  • le memento symphony2
  • le squelette d'une page html5
  • liste sur plusieurs colonnes
  • le responsive design
  • exemple d'un jeu basique en html5
  • la réplication des bases de données
  • mettre en place une architecture en silo avec wp
  • parser un fichier xml (donc un rss) avec php5
  • mettre en place lightbox sans plugin
  • améliorer les performances de son wp
  • ajouter un bouton à l'éditeur de texte de wp
  • ...