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 :
- Qu’est-ce que le Bootstrap – qu’est-ce que le Bootstrap et ses propriétés de base que vous apprendrez dans cet article – https://mansfeld.pl/webdesign/bootstrap-co-to-jest-czy-warto-uzywac/
- Bootstrap Modal – le code que nous utiliserons pour créer la fenêtre modale se trouve sur la page de documentation Bootstrap et est décrit en détail – https://getbootstrap.com/docs/4.0/components/modal/
- Comment ajouter Bootstrap à votre thème WordPress – il y a deux options, vous pouvez soit ajouter Bootstrap à votre thème vous-même, soit utiliser la solution toute faite que Bootstrap fournit. Si vous ne savez pas comment ajouter un framework à un thème WordPress, je vous recommande d’utiliser le thème de départ qui contient Bootstrap : https://pl.wordpress.org/themes/wp-bootstrap-starter/
- Comment créer vos propres widgets dans WPBakery – pour créer vos propres widgets dans WPBakery, vous devez créer votre propre plug-in, le processus de création est décrit dans nos articles :
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?php if ( ! defined( 'ABSPATH' ) ) { die( '-1' ); } class WPBakeryShortCode_modal extends WPBakeryShortCode { protected function content( $atts, $content = null ) { extract( shortcode_atts( array( '' => '', ), $atts ) ); ob_start(); ?> <!-- HTML DESIGN HERE --> <!-- HTML END DESIGN HERE --> <?php return ob_get_clean(); } } vc_map( array( "name" => __( 'Modal', 'redo_modal' ), "base" => "modal", "category" => __('REDO Addons'), "description" => __('Display modal', ''), "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png', 'params' => array( array(), ), ) ); |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 'params' => array( array( "type" => "attach_image", "class" => "", "heading" => __( "Modal button image", "redo" ), "param_name" => "btn_image", "value" => __( "", "redo" ), ), array( "type" => "attach_image", "class" => "", "heading" => __( "Modal button image on hover", "redo" ), "param_name" => "btn_image_hover", "value" => __( "", "redo" ), ), array( "type" => "textfield", "holder" => "div", "class" => "", "heading" => __( "Modal title", "redo" ), "param_name" => "modal_title", "value" => __( "", "redo" ), ), ) |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | vc_map( array( "name" => __( 'Modal', 'redo_modal' ), "base" => "modal", "category" => __('REDO Addons'), "description" => __('Display modal', ''), "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png', 'params' => array( array( "type" => "attach_image", "class" => "", "heading" => __( "Modal button image", "redo" ), "param_name" => "btn_image", "value" => __( "", "redo" ), ), array( "type" => "attach_image", "class" => "", "heading" => __( "Modal button image on hover", "redo" ), "param_name" => "btn_image_hover", "value" => __( "", "redo" ), ), array( "type" => "textfield", "holder" => "div", "class" => "", "heading" => __( "Modal title", "redo" ), "param_name" => "modal_title", "value" => __( "", "redo" ), ), array( "type" => "textarea_html", "class" => "", "heading" => __( "Modal description", "redo" ), "param_name" => "content", "value" => __( "" , "redo"), ) ), ) ); |
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.
1 2 3 4 5 | extract( shortcode_atts( array( 'btn_image' => '', 'btn_image_hover' => '', 'modal_title' => '', ), $atts ) ); |
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é.
1 2 3 4 5 6 | <div class="modal-button" data-toggle="modal" data-target="#modal-<?php echo $btn_image ?>"> <div class="btn-image <?php echo 'btn-image-' . $btn_image ?>"></div> <div class="btn-title"> <?php echo $modal_title ?> </div> </div> |
Styl css dla zmiany obrazu modal-button:
1 2 3 4 5 6 7 8 | <style> .btn-image<?php echo '.btn-image-' . $btn_image ?> { background: url(<?php echo wp_get_attachment_url($btn_image) ?>); } .dla-pacjenta:hover .btn-image<?php echo '.btn-image-' . $btn_image ?> { background: url(<?php echo wp_get_attachment_url($btn_image_hover) ?>); } </style> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="modal fade" id="modal-<?php echo $btn_image ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h2 class="modal-title" id="exampleModalLongTitle"><?php echo $modal_title ?></h2> <button type="button" class="b-close close" data-dismiss="modal" aria-label="Close"> <img src="/assets/plugins/mega-addons-for-visual-composer/render/../images/cross.png"/> </button> </div> <div class="modal-body"> <div class="modal-description"> <?php echo $content ?> </div> </div> </div> </div> </div> |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <?php if ( ! defined( 'ABSPATH' ) ) { die( '-1' ); } class WPBakeryShortCode_modal extends WPBakeryShortCode { protected function content( $atts, $content = null ) { extract( shortcode_atts( array( 'btn_image' => '', 'btn_image_hover' => '', 'modal_title' => '', 'modal_shortcode' => '', ), $atts ) ); ob_start(); ?> <style> .btn-image<?php echo '.btn-image-' . $btn_image ?> { background: url(<?php echo wp_get_attachment_url($btn_image) ?>); } .dla-pacjenta:hover .btn-image<?php echo '.btn-image-' . $btn_image ?> { background: url(<?php echo wp_get_attachment_url($btn_image_hover) ?>); } </style> <!-- HTML DESIGN HERE --> <div class="modal-button" data-toggle="modal" data-target="#modal-<?php echo $btn_image ?>"> <div class="btn-image <?php echo 'btn-image-' . $btn_image ?>"></div> <div class="btn-title"> <?php echo $modal_title ?> </div> </div> <div class="modal fade" id="modal-<?php echo $btn_image ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h2 class="modal-title" id="exampleModalLongTitle"><?php echo $modal_title ?></h2> <button type="button" class="b-close close" data-dismiss="modal" aria-label="Close"> <img src="/assets/plugins/mega-addons-for-visual-composer/render/../images/cross.png"/> </button> </div> <div class="modal-body"> <div class="modal-description"> <?php echo $content ?> </div> </div> </div> </div> </div> <!-- HTML END DESIGN HERE --> <?php return ob_get_clean(); } } vc_map( array( "name" => __( 'Modal', 'redo_modal' ), "base" => "modal", "category" => __('REDO Addons'), "description" => __('Display modal', ''), "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png', 'params' => array( array( "type" => "attach_image", "class" => "", "heading" => __( "Modal button image", "redo" ), "param_name" => "btn_image", "value" => __( "", "redo" ), ), array( "type" => "attach_image", "class" => "", "heading" => __( "Modal button image on hover", "redo" ), "param_name" => "btn_image_hover", "value" => __( "", "redo" ), ), array( "type" => "textfield", "holder" => "div", "class" => "", "heading" => __( "Modal title", "redo" ), "param_name" => "modal_title", "value" => __( "", "redo" ), ), array( "type" => "textarea_html", "class" => "", "heading" => __( "Modal description", "redo" ), "param_name" => "content", "value" => __( "" , "redo"), ), ), ) ); |
La fenêtre qui ajoute le widget ressemble à ceci :
Après avoir ajouté les styles css appropriés, nous avons obtenu les vues que nous voulions obtenir pour l’affichage modal.
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.