css4design

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 http://www.google.com/coop,
• 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/blog/rechercher. N’hésitez pas à comparer avec le champs de recherche d’origine qui est encore accessible en bas de la barre latérale à droite.