Formulaire de recherche modal
Le Formulaire de recherche modal ne nécessite pas SearchWP mais l'utilisera s'il est disponible
L'extension Formulaire de recherche modal vous permet d'afficher un formulaire de recherche dans une fenêtre modale (popup) déclenchée par un bouton ou une icône sur votre site. Cela offre une expérience de recherche élégante et sans distraction pour les utilisateurs.
Conçu pour s'intégrer à n'importe quel thème et à n'importe quelle configuration SearchWP, le Formulaire modal est le moyen le plus simple d'ajouter un formulaire de recherche attrayant à votre site.
Le Formulaire de recherche modal ne nécessite pas SearchWP, il est donc disponible sur wordpress.org et fonctionnera avec n'importe quel site WordPress. Si vous avez SearchWP installé et activé, le Formulaire modal l'utilisera automatiquement. Sinon, les résultats de recherche natifs de WordPress seront fournis.
Lorsque l'extension est active, vous pouvez accéder aux paramètres du Formulaire modal sous l'onglet Formulaires de recherche > Formulaire modal.
1. Activer le Formulaire modal
Un interrupteur pour activer ou désactiver la fonctionnalité du formulaire modal SearchWP sur votre site Web.
2. Formulaire de recherche
Cette option vous permet de choisir le formulaire de recherche à afficher dans la fenêtre modale. Vous pouvez sélectionner un Formulaire SearchWP personnalisé dans la liste déroulante à afficher dans la fenêtre. Si aucun formulaire personnalisé n'est sélectionné, le formulaire de recherche par défaut de WordPress sera utilisé.
Remarque : Si vous choisissez un moteur personnalisé dans votre shortcode modal ou votre élément de menu, il remplacera le moteur sélectionné dans les paramètres du Formulaire de recherche.
3. Inclure le style
Le formulaire modal charge certains CSS pour inclure un style personnalisé pour le chargement de la fenêtre. En choisissant l'option appropriée, vous pouvez charger des styles de positionnement ou visuels pour la fenêtre. Veuillez noter que si vous choisissez l'option Aucun style, aucun CSS du formulaire modal ne sera chargé. Vous devrez appliquer votre propre style. Cette option est uniquement recommandée pour les utilisateurs avancés.
4. Mode plein écran
Par défaut, la fenêtre modale est chargée dans un conteneur de largeur fixe. Lorsque le mode plein écran est activé, le formulaire modal s'étend pour occuper toute la largeur et la hauteur de l'écran.
5. Désactiver le défilement de l'arrière-plan
L'activation de cette option désactivera la fonctionnalité de défilement en arrière-plan lorsque la fenêtre modale est ouverte. Cela permet d'éviter que les utilisateurs n'interagissent avec le contenu de la page derrière la fenêtre.
Qu'est-ce qui le rend différent ?
La philosophie derrière le Formulaire de recherche modal SearchWP est de faciliter la mise en œuvre de formulaires de recherche modaux accessibles et légers, mais peut-être encore plus important, d'en faire une excellente expérience pour les développeurs (et les utilisateurs).
Le Formulaire de recherche modal SearchWP s'intègre directement à WordPress de la manière dont vous l'utilisez, et le thème par défaut du formulaire modal s'appuie sur les styles mis en place par votre thème actif, rendant la surcharge aussi faible que possible. Il existe également un chargeur de modèles complet intégré, vous permettant de personnaliser entièrement votre Formulaire de recherche modal SearchWP avec un minimum de tracas.
Consultez le modèle par défaut pour un exemple de la facilité de personnalisation.
Utilisation
SearchWP Modal Search Form facilite l'implémentation de formulaires de recherche modaux n'importe où sur votre site WordPress. Pour implémenter un modal, vous avez besoin à la fois (1) d'un déclencheur et (2) du modal lui-même.
Avec ce plugin, l'implémentation de ces deux éléments est extrêmement facile ! Les méthodes suivantes sont intégrées et à votre disposition :
- En tant qu'élément de menu
- En utilisant un raccourci
- En tant que bloc Gutenberg
- Dans vos modèles par programmation (code)
Vous pouvez ajouter un nombre illimité de formulaires de recherche modaux à votre site, chacun utilisant son propre modèle et ses options de configuration (par exemple, le moteur SearchWP).
Modal de formulaire de recherche en tant qu'élément de menu
Ajouter un formulaire de recherche à la navigation principale de votre site est une excellente idée, et SearchWP Modal Search Form permet de le faire facilement en un instant.
Le plugin ajoute un nouveau groupe à votre disposition lors de la modification de vos menus existants. Si vous avez créé un modèle modal personnalisé dans votre thème, il s'affichera sous ce groupe.
Une fois ajoutés, vous pouvez traiter les éléments de menu SearchWP Modal Search Form comme n'importe quel autre élément de menu, y compris les personnalisations supplémentaires que vous pourriez souhaiter mettre en place.
Dans les paramètres du menu, vous avez la possibilité d'afficher un libellé ou une icône pour déclencher le formulaire modal.
Modal de formulaire de recherche par raccourci
Si vous préférez, vous pouvez utiliser un raccourci pour afficher un déclencheur de formulaire modal qui, lorsqu'il est cliqué, affichera votre formulaire de recherche modal.
[searchwp_modal_search_form]
Vous pouvez appliquer des personnalisations supplémentaires qui contrôlent divers attributs du déclencheur et du modal lui-même, par exemple :
[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="Ouvrir la recherche" type="button"]
Ce qui rend comme ceci :
Les attributs de raccourci disponibles sont les suivants :
engine Le nom du moteur SearchWP à utiliser (s'applique uniquement si SearchWP est actif)
template Le nom du modèle modal, veuillez consulter la documentation des modèles
text Contrôle le texte du déclencheur
type Définit le type de déclencheur, qui peut être un lien <a/> ou un <button/>
En utilisant ces attributs, vous pouvez personnaliser entièrement le déclencheur et le modèle modal utilisé.
Modal de formulaire de recherche via bloc Gutenberg
SearchWP Modal Search Form vous offre la possibilité d'insérer un formulaire de recherche modal en utilisant un bloc Gutenberg si vous le souhaitez :
En utilisant le panneau Propriétés du bloc, vous pouvez personnaliser divers attributs du bloc, notamment :
Texte Contrôle le texte du déclencheur
Moteur Le nom du moteur SearchWP à utiliser (s'applique uniquement si SearchWP est actif)
Modèle Le nom du modèle modal, veuillez consulter la documentation des modèles
Type Définit le type de déclencheur, qui peut être soit un lien <a/>, soit un <button/>
La modification de l'une des propriétés du bloc vous permettra de voir à quoi ressemblera le déclencheur en temps réel.
Modale de formulaire de recherche programmatique
Vous avez la possibilité d'insérer directement un formulaire modal SearchWP dans les modèles de votre thème, où vous le souhaitez, en utilisant la syntaxe suivante :
Il existe un certain nombre d'arguments qui peuvent être passés sous forme de tableau lors de l'appel de searchwp_modal_form_trigger() :
Vous pouvez implémenter n'importe quel nombre de formulaires de recherche modaux SearchWP sur votre site, chacun avec ses propres arguments de configuration (ou en partageant les mêmes !)
Personnalisation et création de modèles modaux
SearchWP Modal Search Form est livré avec un chargeur de modèles, vous permettant de personnaliser (et de créer) facilement les modèles disponibles. Les modèles de formulaire modal SearchWP englobent le contenu et le style de la modale elle-même, pas le déclencheur.
Les déclencheurs de formulaire modal SearchWP héritent des styles de votre thème actif et peuvent être personnalisés en ajoutant le CSS personnalisé de votre choix.
Important : Lors de la personnalisation ou de la création de modèles de formulaire modal SearchWP, vous devez créer un dossier dans votre thème (enfant) intitulé searchwp-modal-form qui contiendra tous vos modèles personnalisés qui ne seront pas écrasés lors de la mise à jour du plugin.
Les modèles de formulaire modal SearchWP sont basés sur des fichiers et collectés en vérifiant les répertoires suivants :
~/wp-content/plugins/searchwp-modal-form/templates/*.php(ne modifiez pas ces fichiers, ils seront écrasés lors des mises à jour ultérieures du plugin !)~/wp-content/themes/votre-thème-enfant/searchwp-modal-form/*.php(si applicable)~/wp-content/themes/votre-thème/searchwp-modal-form/*.php
Pour qu'un modèle de formulaire modal SearchWP soit inclus, il doit comporter le bloc de commentaires d'en-tête suivant :
/**
* SearchWP Modal Form Name: My Custom Template
*/
Ceci définit le nom du modèle modal, qui est utilisé lors de la définition du modèle à utiliser lors de l'insertion d'un déclencheur de formulaire modal. Il est suggéré que tous les modèles personnalisés que vous créez aient un nom unique, afin d'être facilement identifiables.
Vous devriez utiliser le modèle par défaut comme point de départ lors de la personnalisation ou de la création de modèles modaux. Il est entièrement documenté pour votre référence.
Hooks
Les hooks suivants ont été mis à votre disposition pour personnaliser le comportement de SearchWP Modal Form :
searchwp_modal_form_template_dir Personnalisez le nom du dossier utilisé pour stocker vos modèles personnalisés (la valeur par défaut est searchwp-modal-form)
| <?php | |
| add_filter( 'searchwp_modal_form_template_dir', function( $dir ) { | |
| return 'my-searchwp-modal-forms'; | |
| } ); |
Notes pour les développeurs
Il existe un processus de build pour tous les bundles JavaScript contenu dans une seule commande :
npm run watch
Cela exécutera quatre processus simultanés qui surveilleront les modifications de fichiers et généreront ensuite :
- Version de production du bundle de formulaire de recherche modal SearchWP
- Version de développement du bundle de formulaire de recherche modal SearchWP
- Version de production du bloc de formulaire de recherche modal SearchWP
- Version de développement du bloc de formulaire de recherche modal SearchWP
Vous pouvez exécuter chaque processus individuellement si vous préférez :
