Sujets
Une page de recherche est une page WordPress avec un modèle personnalisé pour donner aux visiteurs plus d’informations pour effectuer des recherches sur votre site.
Cet article décrit comment créer une page de recherche grâce à un fichier du thème, en PHP.
Si vous utilisez un thème basé sur les blocs, vous souhaitez peut-être créer une page de recherche via l’Éditeur de modèles.
Bon à savoir
Chaque thème WordPress peut contenir différents modèles. Certains thèmes incluent un fichier search.php (en anglais). Ce n’est pas une page de recherche, c’est simplement un modèle qui affiche les résultats de recherche. Il peut aussi y avoir un fichier appelé searchform.php. Ce fichier est souvent intégré dans la barre latérale de beaucoup de thèmes et génère seulement le formulaire de recherche. Si votre thème ne comprend pas de modèle de page de recherche, vous pouvez facilement le copier depuis un des thèmes par défaut de WordPress.
Pour créer votre propre page de recherche personnalisée, vous devrez créer un modèle de page où vous incluerez votre formulaire de recherche et toutes les informations que vous souhaiteriez que vos visiteurs voient avant de lancer une recherche sur votre site.
Vérifiez votre thème WordPress pour voir s’il comprend un fichier page.php. Le thème par défaut de WordPress contient déjà ce modèle, mais beaucoup d’autres ne l’intègrent pas. Si votre thème l’inclut, suivez ces instructions. Si non, nous avons toutes les informations dont vous avez besoin pour créer votre propre modèle.
Créer un modèle de page de recherche
1. En utilisant un éditeur de texte, dupliquez le modèle existant page.php et sauvegardez-le avec le nom de fichier searchpage.php. Si votre thème n’inclut pas de page.php, vous pouvez en créer un en dupliquant le fichier index.php.
Note : le nom de fichier search.php est réservé comme nom de fichier spécial. Vous devrez donc éviter de l’utiliser. En utilisant searchpage.php comme nous le suggérions plus tôt, vous pourrez facilement le reconnaître parmi tous les fichiers de votre thème.
2. Après l’avoir sauvegardé, vous pouvez y apporter les modifications suivantes :
- Supprimez la boucle (en pratique, tout ce qui se trouve dans la
divde votre contenu), en laissant lesdivintacts. - Ajoutez un titre (en anglais) comme « Rechercher des articles » par exemple. Vous pouvez utiliser une classe existante de la feuille de styles CSS de votre thème, ou vous pouvez en créer une nouvelle.
- Copiez l’élément suivant à l’intérieur de la
<div>du contenu, ou de la<div>qui doit normalement contenir le contenu de votre page :
<?php get_search_form(); ?>- Tout en haut de votre fichier
searchpage.php, ajoutez le code suivant pour donner à votre page de recherche un titre que WordPress pourra reconnaître dans les différents écrans du Tableau de bord :
<?php
/**
* Template Name: Page de recherche
*/
?> 3. Sauvegardez le fichier une nouvelle fois.
4. Téléversez le fichier dans le dossier de votre thème. Si vous avez aussi fait des changements à la feuille de styles CSS style.css, vous pouvez aussi téléverser ce fichier.
Si vous créez searchpage.php depuis le thème par défaut Twenty Seventeen, vous obtiendrez le fichier suivant :
<?php
/**
* Template Name: Page de recherche
*/
?>
<?php get_header(); ?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php get_search_form(); ?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<?php get_footer();
Créer une page de Recherche
En utilisant le modèle de page de recherche que vous venez de créer, vous allez pouvoir créer une page de recherche.
- Dans le tableau de bord, allez dans Pages, puis Ajouter.
- Entrez Recherche dans le champ du titre.
- N’ajoutez aucun contenu dans la zone de contenu principale.
- Dans la barre latérale, recherchez la zone Attributs de page.
- Dans le menu déroulant Modèle, sélectionnez Page de recherche.
- Cliquez sur le bouton Publier.
Cela affichera un simple formulaire de recherche comme ici :
Créer un lien vers votre page de recherche
Vous avez maintenant plusieurs façons de créer un lien vers la page de recherche que vous venez de créer.
En utilisant l’ID de la page
Que vous utilisiez les permaliens ou pas, vous pouvez créer un lien vers votre page de recherche en utilisant l’ID de la page. Par exemple, si l’ID de votre page de recherche est 17, insérez la ligne suivante dans vos articles, pages ou fichiers de modèle :
<a href="index.php?page_id=17" title="Page de Recherche">Recherche</a>Ou insérez le code suivant dans les fichiers de votre thème :
<a href="<?php echo home_url(); ?>/?page_id=17">Recherche</a>En utilisant le slug de la page
Le slug de la page est défini dans l’écran d’édition de pages. C’est le nom de la page si vous utilisez les permaliens. Vous pouvez le changer si vous le souhaitez. Un lien vers votre page de recherche pourrait être <a href="/recherche/" title="Page de recherche">Recherche</a> lorsque le slug de votre page est recherche.
Vous pouvez aussi insérer le lien directement dans les fichiers de votre thème :
<a href="<?php echo home_url(); ?>/recherche/" title="Page de Recherche">Recherche</a>En utilisant wp_list_pages()
Si vous utilisez le marqueur de modèle wp_list_pages() (en anglais), le nom de la page de recherche sera ajoutée automatiquement à votre liste de pages.
Personnaliser votre page de recherche
Maintenant que vous avez créé une première version de votre page de recherche, vous pouvez la personnaliser. Ouvrez une nouvelle fois searchpage.php dans un éditeur de texte pour faire tous les changements que vous souhaitez.
Au dessus de la fonction get_search_form(), à l’intérieur de la <div> du contenu, vous pouvez ajouter du texte pour aider les visiteurs dans leur recherche.
<p>Mon site contient des articles qui parlent de
<a title="Articles sur WordPress" href="/category/wordpress/">WordPress</a>,
<a title="Articles sur Web Design" href="/category/web-design/">Web design</a>,
<a title="Articles sur le développement" href="/category/website-development/">développement de sites</a>
et <a title="Articles sur le CSS" href="/category/css/">CSS</a>.</p>
<p>Pour effectuer une recherche sur mon site, utilisez le formulaire ci-dessous.</p>
Vous pouvez utiliser cet espace pour inclure une liste de mots-clés ou d’autres informations, des images, ou tout autre détail pour personnaliser votre page de recherche personnalisée.
Maintenir les résultats de recherche et la pagination
L’affichage des résultats et la pagination peuvent parfois ne plus fonctionner lorsque vous faites des personnalisations à votre fichier de modèle. Pour éviter ce genre de problème, la première chose que vous pouvez faire est d’ajouter le code suivant en haut du modèle de recherche, pour s’assurer que la requête WordPress originale est préservée. Pour personnaliser la requête, vous pouvez ajouter vos propres paramètres à (array) $search_query. Lancez cette requête via un objet $wp_query. Vous trouverez plus d’informations sur l’objet WP_Query sur WP_Query (en anglais).
<?php
global $query_string;
$query_args = explode("&", $query_string);
$search_query = array();
if ( strlen( $query_string ) > 0 ) {
foreach( $query_args as $key => $string ) {
$query_split = explode( "=", $string );
$search_query[ $query_split[0] ] = urldecode( $query_split[1] );
}
}
$search = new WP_Query( $search_query );Afficher le nombre total de résultats
Pour obtenir le nombre total de résultats de recherche depuis search.php, la page de résultats de recherche, vous pouvez utiliser une nouvelle fois l’objet wp_query pour obtenir le nombre total d’articles.
<?php
global $wp_query;
$total_results = $wp_query->found_posts;Vous pouvez trouver plus d’informations sur WP_Query sur WP_Query (en anglais).
Traduit par Jeremy Herve
Relu par Jenny Dupuy & Marie Comet
Dernière mise à jour le 20 avril 2023