Google propose depuis quelque temps un nouveau service baptisé Google CSE qui permet de créer un moteur de recherche personnalisé et spécifique à votre site. Clairement, cela signifie que vous profiterez d'une meilleur justesse et précision dans les résultats de recherche effectuée sur votre site, ce qui est plutôt alléchant puisque de tout évidence la recherche n'est pas le point fort de WordPress. Le but de ce tutoriel est donc de montrer comment substituer la search box Google proposé par défaut avec celle que vous avez construit et stylisé grâce au css.
1/Prérequis
Vous vous êtes inscrit sur Google CSE et vous êtes en possession de votre code.
2/L'astuce
Le code Google SCE est constitué de 2 balises ( script et gsce) , observez cette forme.
<script>
(function() {
VOTRE CODE...
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
Pour que notre search box renvoie les résultats google, nous allons modifier la balise gcse en ajoutant le terme queryParameterName="s" .
Ce qui nous donne:
<script>
(function() {
VOTRE CODE
})();
</script>
<gcse:searchresults-only queryParameterName="s"></gcse:searchresults-only>
WTF! Est-ce vraiment tout? Et bien quasiment oui, il ne nous reste plus qu'à introduire ce code dans notre fichier search.php, mettons tout cela en place dès à présent.
3/Mise en place
Ouvrez votre search.php et commencez par en faire une copie. Vous pouvez en pratique tout virer sauf si vous souhaitez garder certains éléments de mise en forme. Je vous propose mon fichier search.php pour vous inspirer, ce code étant bien entendu à adapter en fonction de votre thème et id personnelle.
<?php get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php /* ----------------- Début de code---------------------- */?>
<script>
(function() {
VOTRE CODE...
})();
</script>
<gcse:searchresults-only queryParameterName="s"></gcse:searchresults-only>
<?php /* ----------------- Fin de code---------------------- */?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Vous pouvez tester notre search box et vous faire ainsi un avis du résultat obtenu, Enjoy!
