Intégrer une barre de recherche dans votre site WordPress

 S'abonner

Barre de recherche WordPress

Une barre de recherche interne installée dans une page de votre site Web peut s’avérer utile pour l’internaute qui veut trouver rapidement une information ou un article en particulier. Cela peut également être intéressant pour le propriétaire d’un site Web qui veut connaître les requêtes effectuées par les visiteurs. Ces mots-clés peuvent être connus si l’on possède un compte Google Analytics. Ils peuvent vous inspirer pour trouver les sujets de futurs articles et pour connaître les besoins des gens. Proposer aux clients un produit ou un service répondant davantage à ses besoins ou bien du contenu qui saura répondre à ses questions aidera énormément à fidéliser les internautes qui reviendront éventuellement sur votre site.

Vous pouvez toujours ajouter un plugin pour installer votre moteur de recherche. Toutefois, sachez qu’un nombre élevé de plugins ralentira votre site. Pour ma part, je préfère ajouter le code nécessaire pour obtenir la même chose. Cet article traite donc du code à ajouter dans différents fichiers de votre thème WordPress afin de proposer aux visiteurs un outil de recherche personnalisé.

 

Code à ajouter dans le fichier functions.php

Le code suivant sert à créer un formulaire de recherche personnalisé avec un champ input et un bouton Submit.  Le filtre proposé ici permet de restreindre la recherche aux articles du blog appartenant à certaines catégories mais vous pouvez l’adapter en fonction de vos besoins.

La création du formulaire

La première fonction, my_search_form($form), sert à le  créer. Le paramètre action du formulaire spécifie l’URL vers laquelle l’information recueillie sera transmise. La fonction home_url(‘/’) réfère à l’adresse du site comme par exemple, http://www.example.com/.  Le paramètre name donne un nom au champ. Dans ce cas-ci il est égal à « s »  et sa valeur correspondra à la requête entrée par l’internaute dans le champ input ; celle-ci étant récupérée à l’aide de  get_search_query().

Exemple: http://www.example.com/?s=terme

L’ajout du filtre pour exclure les pages et/ou les catégories

La deuxième fonction, my_search_filter($query), constitue un filtre. Dans mon cas, j’ai décidé d’exclure les pages car l’outil de recherche est installé dans l’onglet blog. J’ai donc ajouté : $query->set(‘post_type’, ‘post’). Les requêtes de recherche ne s’appliqueront qu’aux articles et non aux pages. J’ai également exclu une catégorie portant l’id 37 avec  $query->set( ‘category__not_in’, array( 37 ) ). Pour connaître cet id, vous allez dans Articles puis Catégories de votre tableau de bord. Vous survolez la catégorie à exclure et prenez note de l’id inscrit dans l’URL.

L’explication de add_filter()

La fonction add_filter($tag, $function_to_add) sert à modifier la fonction d’origine appelée hook. Ce hook représente une fonction décrite dans l’un des fichiers PHP du thème. Par exemple, la fonction d’origine get_search_form se situe dans wp-includes/general-template.php. Le premier paramètre est donc le nom du hook ($tag) et le deuxième ($function_to_add), le nom de la fonction créée qui modifiera le résultat du hook. Par exemple, si l’on regarde les paramètres de la fonction add_filter, le hook  ‘get_search_form’ sera modifié par my_search_form’.

function my_search_form( $form ) {
$form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
<div>
<input type="text" placeholder="Chercher..." value="' . get_search_query() . '" name="s" id="s" />
<button type="submit" id="searchsubmit" class="glyphicon glyphicon-search"></button>
</div>
</form>';
return $form;
}
add_filter( 'get_search_form', 'my_search_form' );
// search filter
function my_search_filter( $query )
{
if (!is_admin()){
if ( $query->is_search){
$query->set('post_type', 'post'); //pour exclure les pages
$query->set( 'category__not_in',array( 37) );
}
return $query;
}
}
add_filter('pre_get_posts','my_search_filter');

 

Code à ajouter pour afficher la barre de recherche dans votre page Web

Ce code sert à afficher le formulaire de recherche à l’endroit voulu sur votre site Web. Dans mon site, la fonction suivante fut ajouté dans le fichier blog.php:

<?php get_search_form(); ?>

 

Code de la page search.php pour contrôler l’affichage des résultats de la recherche interne

Le fichier search.php est nécessaire pour l’affichage des résultats de recherche. La variable $count contient le nombre d’articles trouvés grâce à found_posts. S’il n’y a qu’un seul article correspondant à la demande, la variable $several sera égale à un et il n’y aura pas de « s » ajouté au mot résultat. Donc, la partie comprise à l’intérieur des balises <p> et </p> correspond à la phrase affichée selon le résultat suivi du terme de la requête. Puis, le titre de chaque article trouvée s’affichera à l’aide de la boucle. Par l’intermédiaire des classes, vous pourrez personnaliser l’affichage à votre goût.

<div class="container">
<p>
<?php
$count = $wp_query->found_posts; //$wp_query est une variable globale contenant les résultats des requêtes
$several = ($count<=1) ? '' : 's'; //pluriel
if ($count>0) : $output = $count.' résultat'.$several.' pour la recherche';
else : $output = 'Aucun résultat pour la recherche';
endif;
$output .= ' "<span class="terms_search">'. get_search_query() .'</span>"';
echo $output;
?>
</p>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- 1) S'il y a au moins un résultat -->
<article class="article_found" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</article>
<?php
endwhile;
else:
?>
<!-- 2) Si pas de résultat -->
<p>Votre recherche est infructueuse. Veuillez essayer avec d&apos;autres termes de recherche.</p>
<?php endif; ?>
</div>

 

Code pour ajouter une balise title personnalisée dans le fichier header.php

La balise title sert à afficher le titre du document dans la barre de titre du navigateur. C’est un élément essentiel pour le référencement SEO. Si vous voulez optimiser le titre du documentil faut ajouter le code suivant dans le fichier header.php  à l’intérieur des balises <head> et </head>La fonction is_search() vérifie si vous êtes sur une page de recherche et si oui, il ajoute ceci: Titre de votre site | Résultats de recherche pour « mot » . Comme décrit précédemment, la fonction get_search_query() permet de récupérer la valeur du terme saisi par le visiteur. La fonction bloginfo(‘name’) ajoute le titre de votre site Web.  Ce titre se trouve dans le champ Titre du site (Réglages/général) du tableau de bord de votre CMS.

 <title>
<?php
... }elseif ( is_search() ) {
echo bloginfo('name').' | Résultats de recherche pour "'.get_search_query().'" ';
}elseif...
?>
</title>

Un suivi avec Google Analytics?

Si vous désirez effectuer un suivi des termes de recherche saisis par les internautes dans la barre de recherche avec l’outil d’analyse bien connu Google Analytics, lisez l’article suivant: Suivre les termes de recherche interne avec Google Analytics

 

Références:

https://developer.wordpress.org/reference/functions/add_filter/

http://www.acs04.fr/wordpress-un-guide-sur-les-hooks/

https://www.alsacreations.com/tuto/lire/1181-wordpress-ameliorer-affichage-resultats-de-recherche.html


Laisser un commentaire

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