Recherche en direct
Live Search ne nécessite pas SearchWP mais l'utilisera s'il est disponible
Live Search est une fonctionnalité puissante fournie par SearchWP qui affiche des résultats de recherche en temps réel, alimentés par AJAX, dans un conteneur déroulant pendant que les utilisateurs tapent des mots-clés dans un formulaire de recherche. Elle améliore l'expérience utilisateur en fournissant un retour d'information instantané, aidant les visiteurs à trouver rapidement le contenu qu'ils recherchent.
Live Search ne nécessite pas SearchWP, il est donc disponible sur wordpress.org. Si vous avez SearchWP installé et activé, Live Search l'utilisera automatiquement. Sinon, les résultats de recherche natifs de WordPress seront fournis.
Vous pouvez configurer et personnaliser l'apparence des résultats de recherche en direct en accédant à : SearchWP → Formulaires de recherche → Live Search dans le backend de WordPress
Il existe une gamme d'options pour contrôler la conception, la mise en page et le comportement des résultats de recherche en direct. Vous trouverez ci-dessous une explication détaillée des options de personnalisation disponibles :
1. Général
Activer la recherche en direct : Une fois l'extension Live Search installée et active, la recherche en direct de SearchWP s'intègre automatiquement au formulaire de recherche par défaut de WordPress et aux formulaires SearchWP. Vous pouvez utiliser ce bouton pour activer ou désactiver cette fonctionnalité.
2. Choisir un thème de mise en page
Cette section vous permet de sélectionner le style de vos résultats de recherche en direct dans le panneau déroulant sous le formulaire de recherche. Chaque thème de mise en page offre un niveau de détail et une présentation visuelle différents.
Thèmes de mise en page disponibles :
- Minimal Une liste épurée et simple qui affiche uniquement les titres des articles. Idéal pour les sites Web qui préfèrent une expérience de recherche rapide et textuelle.
- Moyen Affiche le titre et une courte description pour chaque résultat de recherche. Cette option offre plus de contexte aux utilisateurs sans les submerger.
- Riche Une mise en page visuellement attrayante qui comprend une miniature pour afficher l'image mise en avant de l'article, ainsi que le titre et la description de chaque résultat. Parfait pour les sites Web riches en contenu comme les blogs ou les boutiques de commerce électronique.
- Personnalisé Cette mise en page offre une flexibilité totale. Vous pouvez concevoir un format de résultat personnalisé en combinant différents éléments à l'aide de la section Style personnalisé décrite ci-dessous.
3. Style personnalisé
La section Style personnalisé vous permet d'affiner les composants individuels de chaque résultat de recherche en direct.
Description : Une option de bascule qui vous permet d'afficher ou de masquer la description sous le titre du résultat. Activez cette option si vous souhaitez donner plus d'informations aux utilisateurs sur chaque résultat.
Astuce : Vous pouvez activer l'option Mettre en surbrillance les termes dans les paramètres de SearchWP pour générer une description personnalisée contenant le terme de recherche pour chaque résultat.
Image : Contrôlez la taille de l'image affichée dans les résultats. Les options disponibles incluent : petite, moyenne ou grande.
Titre : Personnalisez la couleur du texte du titre et la taille de la police pour qu'ils correspondent à la conception de votre site et améliorent la lisibilité.
Prix : Cette option n’est visible que lorsqu’un plugin eCommerce tel que WooCommerce ou Easy Digital Downloads est actif. Vous pouvez ajuster la couleur et la taille de la police du prix du produit affiché dans les résultats.
Ajouter au panier : Également disponible uniquement avec un plugin eCommerce actif, ce paramètre ajoute un bouton « Ajouter au panier » à chaque résultat de produit. Vous pouvez personnaliser le style, tel que la couleur d’arrière-plan, la couleur de la police et la taille de la police du bouton. Cette option est parfaite pour les boutiques qui souhaitent rationaliser le processus d’achat directement à partir de la liste déroulante de recherche en direct.
4. Résultats
Inclure le style : L’option Inclure le style contrôle si les ressources CSS et de mise en page par défaut de SearchWP pour la liste déroulante de recherche en direct sont chargées sur vos pages. Ces fichiers de ressources sont responsables de l’application des styles par défaut aux résultats de recherche et du positionnement correct du conteneur de liste déroulante en dessous ou au-dessus du formulaire de recherche. La modification de cette option est uniquement recommandée aux utilisateurs avancés qui sont à l’aise avec l’application de styles et de codes personnalisés.
Positionnement : Choisissez si les résultats doivent apparaître au-dessus ou en dessous du formulaire de recherche. Le comportement par défaut est d’afficher la liste déroulante sous le champ de saisie.
Largeur automatique : Activez ce commutateur si vous souhaitez que la liste déroulante des résultats corresponde à la largeur du formulaire de recherche. La désactivation permet au conteneur de suivre son propre style ou sa largeur par défaut.
Nombre maximum de résultats : Cette option définit le nombre maximum de résultats affichés dans la liste déroulante en direct. La valeur par défaut est 7. Vous pouvez utiliser un nombre spécifique (par exemple, 5 ou 10) pour limiter le nombre de résultats visibles ou définir cette valeur sur -1 pour afficher tous les résultats correspondants.
Message « Aucun résultat » : Personnalisez le message affiché lorsqu’aucun résultat n’est trouvé. Le texte par défaut est « Aucun résultat trouvé ». Cependant, vous pouvez également utiliser une invite conviviale comme « Nous avons cherché partout mais nous ne l’avons pas trouvé. Essayez de chercher autre chose ». pour améliorer l’expérience utilisateur.
5. Paramètres divers
Longueur minimale des caractères : Définissez le nombre minimum de caractères qu’un utilisateur doit taper avant que les résultats de recherche en direct ne soient affichés.
Remarque : Par défaut, SearchWP indexe les mots-clés d’une longueur minimale de 3 caractères. Si vous souhaitez autoriser les recherches avec 1 ou 2 caractères, vous devez activer l’option « Supprimer la longueur minimale » dans les paramètres principaux de SearchWP. Après l’avoir activée, assurez-vous de reconstruire l’index dans les paramètres du moteur afin que les nouveaux jetons (mots plus courts) puissent être inclus dans les résultats de recherche.
Conseils supplémentaires
- Pour un contrôle visuel plus poussé avec des styles avancés, vous pouvez ajouter du CSS personnalisé dans la feuille de style de votre thème ou sous Apparence → Personnaliser → CSS additionnel.
- La recherche en direct est compatible avec les formulaires de recherche. Vous pouvez utiliser un formulaire de liste déroulante de catégories ou les options du formulaire de recherche avancée pour filtrer les résultats de recherche en direct.
- Si vous souhaitez personnaliser la mise en page des résultats de recherche en direct ou afficher des informations supplémentaires, vous pouvez créer un modèle de recherche en direct personnalisé dans votre thème. Pour des instructions détaillées, veuillez vous référer à ce document.
Utilisation
Après avoir téléchargé et activé la recherche en direct, tout formulaire généré à l'aide de get_search_form() sera automatiquement amélioré avec la recherche en direct en utilisant la configuration par défaut. Le moteur de recherche SearchWP par défaut sera utilisé (ou la recherche native de WordPress si SearchWP n'est pas disponible) et le thème par défaut appliqué. Vous pouvez cependant tout personnaliser à un degré élevé.
Si vous n'utilisez pas get_search_form(), vous pouvez simplement ajouter un attribut de données pour activer la recherche en direct, comme ceci :
Si vous souhaitez empêcher SearchWP d'activer automatiquement la recherche en direct sur les formulaires générés avec get_search_form(), utilisez le filtre searchwp_live_search_hijack_get_search_form.
Pour afficher les résultats en direct sur des formulaires sélectionnés uniquement, vous pouvez désactiver la recherche en direct dans les paramètres, puis utiliser le script JS suivant pour activer la recherche en direct sur des formulaires spécifiques :
| <script> | |
| jQuery(document).ready( function(){ | |
| jQuery("form input[type='search']").searchwp_live_search(); | |
| }); | |
| </script> |
Dans le code ci-dessus, vous pouvez remplacer le sélecteur form input[type='search'] par l'élément sélecteur d'entrée spécifique à votre formulaire.
Personnalisation du moteur de recherche et de la configuration utilisée par formulaire de recherche
Vous pouvez personnaliser le moteur de recherche utilisé en définissant l'attribut data-swpengine sur votre champ de saisie pour qu'il corresponde au nom du moteur de recherche que vous souhaitez utiliser. Ceci ne s'applique que lorsque SearchWP est installé et activé, et a priorité sur le engine défini dans la configuration applicable.
Vous pouvez personnaliser la configuration utilisée par formulaire de recherche en définissant l'attribut data-swpconfig sur votre saisie pour qu'il corresponde à une clé de tableau du tableau des configurations. Pour les personnaliser, utilisez le filtre searchwp_live_search_configs.
Personnalisation des résultats
Les résultats de la recherche en direct sont alimentés par un système de modèles. Vous remarquerez qu'un fichier est fourni avec le plugin : ~/wp-content/plugins/searchwp-live-ajax-search/templates/live-search-results.php. Ce fichier est utilisé pour afficher les résultats de recherche. Il est recommandé que si vous souhaitez personnaliser les résultats de recherche, vous suiviez les étapes suivantes :
- Créez un dossier à l'intérieur du répertoire de votre thème intitulé
searchwp-live-ajax-search - Copiez
live-search-results.phpdu répertoire~/wp-content/plugins/searchwp-live-ajax-search/templates/dans ce dossier - Personnalisez la copie de
live-search-results.phpde votre thème comme vous le feriez pour n'importe quel modèle de thème - Créez éventuellement des fichiers supplémentaires pour chaque moteur de recherche, par exemple
live-search-results-supplemental.phppour un moteur de recherche nommésupplemental
Positionnement
La recherche en direct génère des styles de base pour positionner correctement le wrapper des résultats. Elle génère également un thème minimal par défaut. Vous pouvez supprimer le style visuel par défaut tout en conservant le positionnement en déqueueant le CSS du thème par défaut :
Note importante
NOTE : Le thème par défaut implémente également l'animation de rotation. Si vous supprimez le thème par défaut, vous devrez ajouter l'animation keyframe ci-dessous au CSS de votre thème.
Si vous souhaitez également supprimer le CSS de positionnement, vous pouvez le faire en utilisant le filtre searchwp_live_search_base_styles.
Vous pouvez repositionner le conteneur de résultats de deux manières :
- Ajoutez un attribut data à votre champ de saisie contenant le sélecteur de l'élément parent
data-swpparentel=".masthead .my-search-results-parent" - Ajoutez une propriété
parent_elà la configuration (voirsearchwp_live_search_configs)
Filtres
Les filtres suivants sont disponibles pour une utilisation dans la recherche instantanée :
searchwp_live_search_hijack_get_search_form Détermine si la recherche instantanée améliorera automatiquement les formulaires de recherche générés par get_search_form(). La valeur par défaut est true, pour désactiver :
| <?php | |
| add_filter( 'searchwp_live_search_hijack_get_search_form', '__return_false' ); |
searchwp_live_search_get_search_form_engine Définit le moteur de recherche à utiliser lors de l'activation automatique de la recherche instantanée sur les formulaires générés par get_search_form(). La valeur par défaut est 'default'.
Remarque : applicable uniquement avec SearchWP installé et activé
| <?php | |
| // only applies when SearchWP is active | |
| function my_searchwp_live_search_get_search_form_engine() { | |
| return 'my_supplemental_engine'; | |
| } | |
| add_filter( 'searchwp_live_search_get_search_form_engine', 'my_searchwp_live_search_get_search_form_engine' ); |
searchwp_live_search_get_search_form_config Définit la configuration à utiliser lors de l'activation automatique de la recherche instantanée sur les formulaires générés par get_search_form(). La valeur par défaut est 'default'.
Remarque : applicable uniquement avec SearchWP installé et activé
| <?php | |
| // only applies when SearchWP is active | |
| function my_searchwp_live_search_get_search_form_config)() { | |
| return 'my_config'; | |
| } | |
| add_filter( 'searchwp_live_search_get_search_form_config', 'my_searchwp_live_search_get_search_form_config' ); |
searchwp_live_search_configs Ajoutez vos propres configurations, qui contrôlent les paramètres du moteur de recherche à utiliser, le délai de recherche, le nombre minimum de caractères, le positionnement du panneau de résultats et les options de rotation. Les configurations sont stockées sous forme de tableau associatif, vous pouvez donc éventuellement remplacer les valeurs de la clé default, ou ajouter les vôtres et les utiliser lors de la définition de l'attribut data-swpconfig sur votre champ de recherche.
Voici la configuration par défaut :
Remarque : le minimum de caractères par défaut est de 3 (ce qui est identique à SearchWP lui-même), mais les paramètres de configuration de la recherche instantanée sont des paramètres distincts et ne sont pas mis à jour lorsque des paramètres similaires de SearchWP ont été personnalisés.
| <?php | |
| $configs = array( | |
| 'default' => array( // 'default' config | |
| 'engine' => 'default', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 500, // wait 500ms before triggering a search | |
| 'min_chars' => 3, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'parent_el' => 'body', // selector of the parent element for the results container | |
| 'results' => array( | |
| 'position' => 'bottom', // where to position the results (bottom|top) | |
| 'width' => 'auto', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 5 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ) | |
| ); |
Vous pouvez modifier les valeurs de ces valeurs par défaut, ou ajouter vos propres configurations séparées et avoir plusieurs configurations à votre disposition :
| <?php | |
| function my_searchwp_live_search_configs( $configs ) { | |
| // override some defaults | |
| $configs['default'] = array( | |
| 'engine' => 'default', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 400, // wait 500ms before triggering a search | |
| 'min_chars' => 5, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'parent_el' => 'body', // selector of the parent element for the results container | |
| 'results' => array( | |
| 'position' => 'bottom', // where to position the results (bottom|top) | |
| 'width' => 'auto', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 5 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ); | |
| // add an additional config called 'my_config' | |
| $configs['my_config'] = array( | |
| 'engine' => 'supplemental', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 300, // wait 500ms before triggering a search | |
| 'min_chars' => 2, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'results' => array( | |
| 'position' => 'top', // where to position the results (bottom|top) | |
| 'width' => 'css', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 0 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ); | |
| return $configs; | |
| } | |
| add_filter( 'searchwp_live_search_configs', 'my_searchwp_live_search_configs' ); |
searchwp_live_search_base_styles Détermine si le CSS de positionnement par défaut du panneau de résultats est appliqué. NOTE : ceci est distinct de l'apparence visuelle des résultats de recherche et contrôle uniquement le positionnement. La valeur par défaut est true, pour désactiver :
| <?php | |
| add_filter( 'searchwp_live_search_base_styles', '__return_false' ); |
searchwp_live_search_posts_per_page Contrôle le nombre de résultats retournés. La valeur par défaut est 7, pour modifier :
| <?php | |
| function my_searchwp_live_search_posts_per_page() { | |
| return 20; // return 20 results | |
| } | |
| add_filter( 'searchwp_live_search_posts_per_page', 'my_searchwp_live_search_posts_per_page' ); |
