Thème : Widgets | Niveau : débutant
Objectifs pédagogiques
- Insérer le bloc natif Recherche
- Personnaliser son étiquette, son texte de remplacement et son bouton
- Savoir où l’insérer selon le type de thème
- Connaître la limite du bloc natif et les extensions pour aller plus loin
Depuis WordPress 5.8, le widget de recherche historique est devenu un bloc, comme expliqué dans l’astuce “Différence entre widgets et blocs dans les thèmes FSE” (FSE : Full Site Editing, édition complète du site). Ce bloc s’insère de la même façon dans un article, une page, une zone de widgets (thème classique) ou un modèle (thème FSE).
Où l’insérer
- Thème classique ou hybride : dans une zone de widgets, via Apparence → Widgets.
- Thème FSE (comme Twenty Twenty-Five) : directement dans un modèle ou une partie de modèle, via Apparence → Éditeur.
Instructions étape par étape
1. Insérer le bloc
Ajoutez un bloc et recherchez “Recherche” dans la bibliothèque de blocs, ou tapez /recherche dans une ligne vide.
2. Configurer l’étiquette
Dans le panneau de réglages du bloc (onglet Bloc), le commutateur Afficher l’étiquette permet de masquer ou d’afficher le texte au-dessus du champ. Si elle est affichée, cliquez directement sur le texte dans le bloc pour le modifier (par défaut “Rechercher”).
3. Personnaliser le texte de remplacement
Le champ Texte de remplacement correspond au texte grisé affiché dans le champ de recherche avant toute saisie (par exemple “Que recherchez-vous ?”).
4. Choisir la position et le style du bouton
Le réglage Position du bouton propose quatre options :
- Pas de bouton : seul le champ de saisie est affiché, la recherche se lance à la touche Entrée.
- Bouton à l’extérieur (par défaut) : le bouton est séparé du champ.
- Bouton à l’intérieur : le bouton fait partie visuellement du champ.
- Bouton seul : seule une icône est visible, le champ de saisie apparaît au clic.
Le commutateur Utiliser un bouton avec icône remplace le texte du bouton par une icône de loupe.
5. Ajuster la largeur
Le réglage Largeur, dans le groupe Dimensions, accepte un pourcentage ou une valeur en pixels.
6. Personnaliser l’apparence si besoin
Pour changer la couleur ou les coins du bouton, passez par Apparence → Éditeur → Styles plutôt que par du code personnalisé : c’est la méthode qui reste cohérente avec les styles globaux du thème, sans conflit à la mise à jour du thème.
7. Vérifier le résultat
Publiez ou enregistrez, puis testez une recherche depuis le site.
Pour aller plus loin
Le bloc natif recherche dans tous les types de contenu publiés (articles, pages), sans possibilité de filtrer par type de contenu ou par catégorie depuis ses réglages. Pour un moteur de recherche plus avancé (filtrage, pertinence améliorée, recherche dans les champs personnalisés), une extension comme SearchWP ou Relevanssi est nécessaire ; cela dépasse le cadre de cette astuce.
Tableau récapitulatif
| Réglage | Emplacement | Effet |
|---|---|---|
| Afficher l’étiquette | Panneau Bloc | Affiche ou masque le texte au-dessus du champ |
| Texte de remplacement | Panneau Bloc | Texte grisé affiché avant saisie |
| Position du bouton | Panneau Bloc | Pas de bouton / extérieur / intérieur / bouton seul |
| Utiliser un bouton avec icône | Panneau Bloc | Icône de loupe à la place du texte |
| Largeur | Panneau Bloc, Dimensions | Pourcentage ou pixels |
Ce qu’il faut retenir
- Le bloc Recherche remplace l’ancien widget, avec les mêmes réglages essentiels (étiquette, texte de remplacement, bouton).
- Son emplacement d’insertion dépend du thème : zone de widgets pour un thème classique, modèle pour un thème FSE.
- La personnalisation visuelle passe par les Styles globaux, pas par du CSS additionnel.
- Pour un filtrage avancé des résultats, une extension dédiée est nécessaire.