TUTORIEL

WPBakery – créer votre propre widget en ajoutant une vue modale

Dans cet article, je vais montrer comment créer votre propre widget pour afficher modale pop-up pour WPBakery plugin. Le plugin WPBakery lui-même dispose d’un widget intégré pour créer des vues modales, mais certaines caractéristiques de cette solution ont empêché le pop-up de fonctionner correctement. Plus précisément, il s’agit de définir la top pour les pop-up, ce qui rend impossible de déplacer le contenu de la fenêtre vers le bas.

Pour créer notre widget, vous aurez besoin d’un thème WordPress contenant Bootstrap, car nous utiliserons une solution prête à l’emploi qui affiche notre modale – les classes Bootstrap.

Il y a plusieurs choses que vous devez savoir avant de pouvoir créer le widget :

Si vous avez lu les articles ci-dessus et connaissez déjà les règles de Bootstrap Modal, nous pouvons procéder à la création d’un widget.

Dans render de notre plugin, nous ajoutons un nouveau widget – modal.php. Dans le fichier principal du plugin – main.php – ajoutez notre widget à la famille de polices vc_redo_addons() :

  • include ‘render/modal.php’;

Si nous avons déjà un thème contenant un cadre Bootstrap, nous passons à la modification de notre widget. Normalement, nous commençons par nommer notre widget et déterminer ses propriétés de base. En dessous se trouve un squelette vide de notre widget.

En standard, nous avons mis en place plusieurs étapes de base dans le squelette pour créer un widget pour notre plugin :

  • Dessiner un chemin ABSPATH,
  • Nom de la classe de maître WPBakeryShortCode,
  • Initiation de vc_map() en spécifiant le nom de notre widget, la catégorie, sa description, l’identification de l’imagedu widget et le tableau des paramètres du widget.

Pour afficher notre modale, nous aurons besoin de plusieurs paramètres dans la famille de polices params. Nous aimerions que notre modale s’identifie avec un div de taille fixe contenant l’image et le titre de notre modale au lieu d’un bouton, comme cela a été mis en place dans les exemples de bootstrap. De plus, après avoir passé le curseur de la souris sur ce div, l’image se transforme en image 2. Pour y parvenir, nous devons ajouter à notre tableau les champs appropriés params :

En outre, nous devons nous occuper de la params sur notre contenu modal. Pour ce faire, nous devons ajouter un paramètre textarea_html au tableau, qui nous permet d’ajouter la modale content’u en utilisant l’éditeur intégré de WordPress – WYSIWYG. L’ensemble de notre vc_map() y compris tous les paramètres :

Nous disposons déjà de tous les paramètres nécessaires pour réaliser la vision de notre modale. Nous passons maintenant à la mise en œuvre de notre point de vue.

En utilisant extract() nous devons récupérer les paramètres à passer dans la vue.

Maintenant, avec la $btn_image, $btn_image_hover, $modal_title et $content nous pouvons créer une vue. La variable $content est la valeur par défaut du paramètre textarea_html et ne peut apparaître qu’une seule fois.

Nous commençons par créer une vue pour notre div, qui sera le modal « déclenchement ». Nous passons les paramètres data-toggle et data-target. Dans la cible de données, nous devons fournir l’ID de la division contenant notre modal. Chaque div doit avoir un identifiant unique, de sorte que chaque bouton modale-bouton se réfère à un modal unique. Pour ce faire, nous passons une variable $btn_image, qui contient l’identifiant de l’image du bouton modal. Dans notre cas, cette dénomination fonctionnera parce que chacun de nos boutons modaux contiendra une image différente, mais si nous voulons utiliser les mêmes images, nous devons chercher une solution différente.

Pour afficher une image de notre bouton modal, nous avons besoin d’une classe unique pour chaque « déclencheur », car nous voulons que l’image change lorsque vous passez le curseur sur le diviseur. Pour ce faire, nous ajoutons une variable $btn-image contenant l’ID de l’image. En utilisant le style css, nous allons changer l’arrière-plan d’un bouton modal donné.

Styl css dla zmiany obrazu modal-button:

Nous pouvons maintenant passer à l’affichage de notre contenu modal.

Nous utilisons une solution modale Bootstrap toute prête. Nous ne modifions que l’attribut ID pour notre modale, de sorte que chaque modale de la vue ait un ID unique – c’est-à-dire que, comme pour le bouton modal, nous ajoutons à l’ID $btn-image. Dans une div’ie de corps modal, nous affichons le $$content contenant notre contenu modal.

Got ! C’est ainsi que nous avons créé un widget qui génère des modaux et leurs déclencheurs. Le code complet de notre widget :

La fenêtre qui ajoute le widget ressemble à ceci :

 

Dodawanie modal w WPBakery

Après avoir ajouté les styles css appropriés, nous avons obtenu les vues que nous voulions obtenir pour l’affichage modal.

modal buttons WPBakerymodal view WPBakery

Summing

Ajouter un widget au thème WPBakery, créer une vue modale nécessite la connaissance du cadre Bootstrap et l’ajouter au thème WordPress. Ce n’est pas la seule façon de créer un tel widget. Nous pouvons créer une vue modale sans cadre par nous-mêmes, en utilisant uniquement Javascript et CSS, mais dans notre cas, nous avons utilisé une solution Bootstrap toute prête, car nous avions ce cadre dans notre thème et comme vous pouvez le voir, cela nous a évité du travail supplémentaire lors de la création de la vue.