Améliorer la recherche sur votre blog WordPress avec Google Coop

La recherche intégrée à WordPress est l’une des plus calamiteuses qu’il m’ait été donné d’utiliser. Il est pour ainsi dire presque impossible de trouver ce que l’on cherche si les billets traitant d’un même sujet sont nombreux. Au point qu’il est souvent plus facile de passer par Google pour retrouver des articles anciens. La commande `site:www.css4design.com « commentaires conditionnels »` dans le champs de recherche de Google permet de retrouver les articles concernant les commentaires conditionnels avec beaucoup plus de pertinence que la même requête depuis le blog lui-même !

Je devrais pouvoir interroger Google depuis un champs de recherche situé sur mon blog et afficher les résultats sur une page du blog également, en reprenant si possible tout ou partie de ma charte graphique ! Je rêve, ou bien ?

En fait, c’est possible en créant un moteur de recherche personnalisé Google :

– Rendez-vous sur ,
– Nommer votre moteur personnalisé, etc.
– Dans *Sites à explorer*, mettez uniquement l’URL de votre blog et assurez-vous d’avoir cocher l’option *Uniquement les sites que je sélectionne* au-dessus.

Quand le moteur de recherche personnalisé est créé, il faut le configurer pour l’adapter à votre blog :

– Cliquez sur *Panneau de configuration* -> *Code*,
– Choisissez *Héberger les résultats sur votre site web*

Je vous laisse tester les versions *iframe* et *superposition*. Cette dernière peut ne pas s’intégrer correctement dans votre mise en page et nécessiter des adaptations (la `div` qui affiche les résultats passe par dessus le *footer*, par exemple).

J’ai opté pour la version *iframe* sur une seule page. Pour cela, j’ai copié le code du champs de recherche sur la même page que le deuxième code qui affiche les résultats.

A cette étape, il faut créer une nouvelle page WordPress pour y copier-coller le *Code du champ de recherche* et le *Code des résultats de recherche* en dessous. Notez la variable `googleSearchFrameWidth` qui gère la largeur de l’`iframe`. Enfin, normalement, car dans mon cas, le changement de la valeur n’a pas eu l’effet escompté vu que la largeur est gérée avec l’attribut `width` de la balise `iframe`.

Pour adapter la largeur de cette `iframe` à mon blog, j’ai utilisé la déclaration CSS :

#cse-search-results iframe {
width: 667px;
}

Cette nouvelle fonction de recherche est accessible à l’adresse www.css4design.com/rechercher. N’hésitez pas à comparer avec le champs de recherche d’origine de WordPress !