[tuto]Intégrer le moteur de recherche Google à WordPress

Ce tuto vous présente une méthode pour remplacer le moteur de recherche intégré à WordPress par le moteur Google appelé aussi CSE (Custom Search Engine) sans plugin et sans iframe.

Pourquoi changer ?

Nous en avions déjà parlé il y a 2 ans, le moteur de recherche intégré à WordPress n’est pas forcément d’une grande efficacité. A l’époque, j’avais pallié à ce constat en installant un plugin supplémentaire (Search Everything). En effet, WordPress se base particulièrement sur les mots clefs pour effectuer ses recherches, mais quand on arrive à plusieurs centaines d’articles et que l’on suit une ligne éditoriale bien définie, ces mots clefs se retrouvent dans plusieurs dizaines d’articles et la recherche devient de moins en moins efficace.

Contrairement à WordPress qui effectue la recherche en parcourant la base de données, Google effectue la recherche sur du html généré (page vue comme l’utilisateur), la recherche et donc plus fine et permet peut-être une meilleure indexation du site.

En contrepartie, les résultats de recherche seront moins bien présentés qu’avant (plus d’images illustrant les articles) et Google rajoutera un encart de pub. Efficacité ou design, il faut parfois choisir…

Créer un moteur personnalisé

Allez sur http://google.com/cse, cliquez sur Créer un moteur personnalisé puis rentrez votre identifiant/mot de passe Gmail puis connexion

Renseignez les champs. On entrera qu’une seule adresse de site sur lequel seront effectuées les recherches. Cochez J’ai lu et j’accepte les conditions d’utilisation (que vous aurez lues en long et en large, j’en suis sûr…) puis Suivant

L’étape 2 n’est pas importante, à part pour vérifier le résultat d’une recherche… Cliquez sur Suivant

à l’étape 3 vous obtiendrez le code à inclure sur le site, mais il n’est pas assez personnalisé donc cliquez sur Eléments graphiques…

… et choisissez Résultats uniquement.

Si vous avez un compte Google Adsense, cliquez sur Monétisation dans le menu à gauche (l’étape n’est pas obligatoire mais permettra de récupérer quelques miettes du butin Google 😉 à partir de l’encart de pub qui sera affiché)

On va maintenant récupérer le code que l’on intègrera dans WordPress. Dans le menu à gauche, cliquez sur Obtenir le code. Il peut être intéressant d’avoir un suivi des recherches effectuées sur votre site dans Google Analytics, on va donc renseigner son identifiant de la forme UA-XXXXXXX-X

On récupère le code fourni par un petit clic droit puis copier.

Pour info vous avez remarqué le petit q. Laissez par défaut, on s’en servira à la fin

Implémentation dans WordPress

Créez une nouvelle page dans WordPress… pour faire simple, on va l’appeler recherche

On passe par l’éditeur html et on colle le code

Pour info, j’ai supprimé la dernière ligne <link rel=”stylesheet” href=”http://www.google.com/cse/style/look/default.css” type=”text/css” /> pour ne pas utiliser la feuille de style Google

Maintenant, il faut arriver à rediriger les requêtes de recherche pour utiliser CSE. Il existe plusieurs méthodes mais je trouve celle-ci la plus élégante. Je vais modifier un chouia le fichier searchform.php qui doit normalement se trouver dans votre thème WordPress. C’est la partie la plus délicate puisqu’elle dépend de votre thème et du code contenu dans searchform.php, il va falloir vous adapter…

J’ai eu uniquement à rajouter /recherche/  (la fin du permalien de la page créée précédemment) et remplacer s par q

Voila, le moteur de recherche Google est ainsi bien intégré dans WordPress sans avoir eu à rajouter un plugin, widget ni iframe. Alors mieux ou pas mieux ?

A propos Nicolas Chopin

Fondateur du site SynerGeek.fr. Passionné par l'informatique, le web et les technologies, j'aime partager mes découvertes. Rejoignez-nous pour partager vos connaissances, vos expériences et développer votre réseau professionnel

Je vous propose également...

La Google-car tourne dans Caen

Hier, j’ai pris la google-car en flag dans la rue près de mon boulot. Avec …

Signature HTML dans Mail Mac OS X Mavericks

Les méthodes changent entre les différentes version d’OS Apple pour intégrer une signature html dans …

10 commentaires

  1. Bonjour et merci pour se tutoriel. Cependant j’ai un souci, les résultats de recherche s’affiche bien mais les liens s’ouvrent tous dans une nouvelle fenêtre ce qui est embêtant. Comment remédier à ce problème ?

  2. Je regarderai dès que possible mais ca fait un moment qu’il est sorti ce tuto…

  3. Avant tout, merci pour ce super article !! Par contre, j’ai un souci. En effet, j’arrive sans problème à insérer le moteur Google sur mon site mais par contre, sur ma sidebar, le cadre de recherche est minuscule et c’est le bouton “rechercher” qui prend le plus de place. J’espère me faire comprendre :). Du coup, j’ai tenté d’aller dans les paramètres de google pour essayer de le personnaliser mais apparemment, impossible de faire ce que je souhaite : soit supprimer le bouton “rechercher” par exemple ou alors pouvoir avec le cadre de recherche sur une ligne et le bouton “rechercher” en dessous,…Merci d’avance !

  4. bonsoir,
    pourquoi ne pas mettre le code dans un widget texte?

  5. Bojour,
    J’ai eu le memes problème que toi Ally avec « loading » .
    Voila ce que j’ai trouvé:

    Update: as reader PamL points out, if you have only “Loading” showing in the search results, remove the blank lines in the Google CSE code for your search results page.
    sur :
    http://iamtgc.com/2011/07/10/integrating-a-google-custom-search-engine-into-your-wordpress-blog/

    Donc supprimer les lignes vide dans le script pas dans la CSS.

    Bonne suite

  6. Très sympa ce tuto!

    Je viens, de le voir à l’oeuvre sur ce blog en faisait, une recherche test. Il y a effectivement un petit délai pour que les résultats apparaissent, une idée pourquoi? Rien de bien méchant comme délais, mais s’il y a moyen de “speeder” le tout, je suis preneur.

    Merci encore pour les bonnes infos, je passe le mot ! 🙂

    • Cette lenteur vient du fait qu’on accède au moteur de Google. La recherche n’est donc pas faite en local et du coup je ne pense pas qu’on puisse optimiser cela… mais si quelqu’un a des infos supplémentaires, je suis également preneur

  7. Bonjour, merci pour ce tuto simple (enfin !) en revanche j’ai un souci : seul le mot “loading” (qui figure dans le début du code) s’affiche… Une idée sur le pourquoi du comment ? Dans le code source de la page, le code javascript est bien présent pourtant :-/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *