La recherche personnalisée à son site fournie par Google m’a toujours beaucoup plus, notamment dans la mesure où l’on fait bénéficier à sa propre fonctionnalité « Recherche » de la puissance de l’algorithme de Google. Ainsi, les résultats ne seront plus affichés et classés simplement par chronologie, mais par importance. Par exemple, si un billet a été beaucoup pointé par d’autres, celui-ci apparaitra plus souvent en haut des résultats, et pour la bonne cause (s’il a été déjà beaucoup pointé, c’est qu’il présente un intérêt supplémentaire par rapport aux autres, et qu’il a une probabilité plus grande de correspondre à l’objet de la recherche). Maxime a fait un très bon tutoriel sur l’intégration de Google Custome Search Engine (CSE) à un blog WordPress, que je vais tenter de reprendre ici, en mettant en avant les aspects qui me paraissent importants.
Ce tutoriel ne porte pas seulement sur la création d’un moteur de recherche, mais surtout sur son intégration au thème de son blog, ce via une iframe.
Commençons :
D’abord, allez sur la page de Google CSE, et créez-vous une nouvelle recherche personnalisée. C’est simple, remplissez à peu près comme je l’ai fait (en adaptant à votre blog, hein). Notez que j’intègre deux blogs à ma recherche : AbriCoCotier et son Microblog (qui sont deux WordPress différents).
Sur la page suivante, comme j’ai intégré deux blogs, je fais deux tests successifs pour vérifier que les deux contenus sont utilisés pour la recherche. Le « MER IL ET FOU » permet de voir les deux URLs dans les résultats de recherche.
La configuration de base est faite, on passe dès lors aux détails.
D’abord, allez à l’item « Monétisation », et entrez le compte Adsense correspondant. Vous n’oublierez pas de confirmer l’autorisation via le lien inclut dans un mail que vous envérra Google sous peu.
Allez ensuite dans l’onglet « Obtenir le code« , et faites un peu attention, c’est là que cela devient intéressant.
- Cliquez sur le bouton radio « héberger les résultats sur mon site en utilisant un iframe ». Comme ça, vous pourrez mettre la page de résultat au sein de votre blog, et pour la majorité des visiteurs, tout sera transparent. De surcroît, comme la page de résultat sera « enfermée » dans votre template, les liens des sidebars apparaitront sur la page des résultats de recherche (ce qui permettra de faire diminuer votre taux de rebond), et comme vous afficherez votre propre footer/header, vous pourrez également tracker ce qui se passe sur cette page de recherche (en tout cas un peu plus que si la page était affichée sur une page vierge).
- Spécifiez l’URL des résultats de recherche, et faites la correspondre à une page que vous aurez créé dans votre WordPress.
- Choisissez l’emplacement des publicités. Pour ma part, en haut et en bas, parce que mon thème est réglé pour n’autoriser que 580 pixels de largeur, donc je n’aurai pas la place de mettre les publicités à droite.
- Intégrez le code à votre blog. Pour ma part, je me suis fait un peu plaisir : le code de Google Search Engine est depuis longtemps intégré à mon blog de façon transparente (via la recherche en haut à droite), via quelques lignes de Javascript, que je vous donne ci-dessous (j’ai mis en gras ce qui changeait vraiment par rapport à la version fournie par Google) :
<form action= »https://www.abricocotier.fr/recherche » id= »searchform »>
<div>
<input type= »hidden » name= »cx » value= »014327233121484092241:ffjvymbx1mi » />
<input type= »hidden » name= »cof » value= »FORID:10″ />
<input type= »hidden » name= »ie » value= »UTF-8″ />
<input type= »text » name= »q » size= »20″ value= »Rechercher » onfocus= »if (this.value == ‘Rechercher’) {this.value = »;} » onblur= »if (this.value == ») {this.value = ‘Rechercher’;} » />
<input type= »image » src= »<?php bloginfo(‘template_directory’); ?>/images/searchIcon.gif » align= »top » alt= »Search » id= »searchIcon » value= »Search » />
</div>
</form>
<script type= »text/javascript » src= »http://www.google.com/cse/brand?form=cse-search-box&lang=fr »></script>J’ai de surcroît rajouté un champs de recherche en dessous du bloc de résultats, afin d’afficher le champ de recherche si quelqu’un arrive sur la page « Recherche » directement (c’est à dire en ayant cliqué sur le lien vers la page dans la NavBar).
- Enfin, intégrez le code des résultats en haut de votre page « Recherche ».
Pour finir, dans le code que vous intègrerez à votre page recherche, n’oubliez pas d’adapter le paramètre googleSearchFrameWidth à votre largeur maximale. Pour moi, c’est 580 pixels, donc j’ai changé la valeur par défaut (600), ce qui donne ceci :
var googleSearchFrameWidth = 580;
Et on arrive à un résultat très sympa :