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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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 !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



10 commentaires pour “Améliorer la recherche sur votre blog WordPress avec Google Coop”

  1. Jmini dit :

    On obtient pas le même résultat en encore plus simple que toutes ces manipe avec l’option ~ »moteur de recherche » à intégrer sur son site de AdSense

    De mémoire (je ne suis plus certain du nom), il suffit de préparer un template pour le moteur, puis d’ajouter une ligne de code ( PHP ?) pour indiquer que c’est là que les résultats vont s’afficher. Ajouter une bonne feuille CSS pour régler l’affichage et le tour est joué.

    Il me semble avoir déjà essayé il y a longtemps.

    Je rêve ???

    PS : Génial l’édition des commentaires. En savoir plus voir la page : http://www.google.com/services/adsense_tour/page6.html De mémoire il y a moyen de beaucoup plus personnalisé la page obtenue que ce qui est montré sur la démo…

  2. Anthony dit :

    Résultat intéressant et lisible. Mais comment on fait pour remplacer définitivement la barre de recherche sur toutes les pages ?

  3. Li-An dit :

    Le seul problème, c’est qu’on se retrouve avec une page « à la Google », c’est à dire pratique mais moche si on fait un blog plutôt graphique. Plus intéressant pour un blog aux recherches « généralistes » -genre ici « css » ou « wordpress », que pour un blog plus pointu.

  4. Bruno Bichet dit :

    @Jmini : Tu rêves ;) En fait, l’option avec AdSense est la même que celle que je décris. La seule différence, c’est qu’il ne semble pas y avoir l’option « superposition » et qu’il est possible d’afficher des pubs AdSense qui rapportent de l’argent ;)

    @Anthony : Ben, je crois qu’il suffit de placer le code du champs de recherche dans une partie du template présent sur tout le blog et de créer une page pour afficher les résultats.

    Reste à supprimer le champs de recherche de WordPress. A noter qu’il doit être possible de remplacer/modifier le widget « Recherche » de WordPress par le champs Google. A tester !

    @Li-An :

    Le seul problème, c’est qu’on se retrouve avec une page “à la Google”, c’est à dire pratique mais moche.

    Pas faux, mais je crois que l’option « superposition » permet une plus grande personnalisation via CSS. Dans la version iframe, il n’est pas possible d’atteindre les balises, les ID ou les classes sur la page incluse.

    Quand j’aurais un peu de temps, je testerai l’option « superposition » un peu mieux pour voir jusqu’où on peut aller. Mais pour l’instant, cette page de recherche remplit son office : trouver ce dont j’ai besoin pour travailler (si c’est bon pour moi, ça devrait le faire aussi pour les autres :) )

  5. […] Améliorer la recherche sur votre blog WordPress avec Google Coop par Bruno Bichet […]

  6. Omni Web Solutions dit :

    Yahoo propose la même solution avec Yahoo BOSS, et beaucoup plus personnalisable (des prévisualisations pour les résultats), néanmoins je reste fidèle à Google ;) on regrette l’absence de monétisation qui n’est pas disponible pour l’instant.

  7. Pas mal du tout comme tuto WordPress.

    Après deux trois tests, les résultats sont plutôt bons, mais s’il y aura toujours un décalage (entre le temps de la publication et de l’indexation).

    Sinon, il y a un bug graphique d’affichage des résultats sous Firefox 3.6 : les résultats s’étirent et se mélangent avec le reste de la page. ;)

  8. Bravo pour le post ! Effectivement, sur un blog spécialisé avec de nombreuses pages, difficile de se limiter à la recherche WordPress. Néanmoins, j’ai essayé la recherche version iFrame et je constate un bug. Les résultats sont sur-imprimés sur le footer (Firefox 3.5.9). Si je change d’onglet et que je reviens, les résultats ont repoussé le footer. Il doit y avoir un soucis avec le iFrame ? Bonne continuation. PS : je link une image du bug -> http://bit.ly/a9s5vN

  9. Bruno Bichet dit :

    Daniel de SeoMix, Le Courrier Industriel { Oui, j’ai remarqué ce problème d’affichage qui apparait sur Chrome et Firefox (mais pas sur IE8 ^^). Je vais jeter un oeil dessus. Peut-être changer le template de la page de recherche, au pire. Merci pour vos retours :) }

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site