< Retour au blog

Créer un module personnalisé pour Divi

Publié le

dans la catégorie

,

 

Mise à jour du 8 juin 2018 :

J’ai publié un nouvel article qui explique comment créer un module pour le Divi Builder, les explications ci-dessous peuvent être obsolètes.

Lire le nouvel article

 

 

 


Si comme moi il vous arrive d’utiliser le thème Divi, vous vous êtes peut-être déjà senti limité par les modules proposés par le builder inclus dans ce thème.

Le builder est plutôt complet, mais on peut avoir des besoins spécifiques qu’il ne propose pas.

J’ai créé plusieurs modules, ici nous allons créer un module personnalisé pour Divi plutôt simple pour apprendre la méthode :

Un module Carousel :

slick-slider
waow!

J’ai choisi d’utiliser la librairie Slick Carousel, car je la connais plutôt bien, mais on peut imaginer en utiliser une autre sans problème.

Avant toute chose, il faut jeter un œil au fichier main-modules.php qui se trouver dans le répertoire de votre thème Divi/includes/builder, c’est ici que sont déclarés tous les modules que l’on retrouve dans le builder.

Tous les modules étendent la Class Et_Builder_Module, nous allons faire de même.

Avant d’attaquer le code, de quoi avons nous besoin ?

  • Un module de base Carousel
  • Des éléments répétables à placer dans ce module, ce seront nos « items » de Carousel (images)

Il y a déjà un module sur lequel on peut donc se baser : le module « Diapo », la Class relative dans le fichier main-modules.php se nomme ET_Builder_Module_Slider  et la Class qui gère les « items » se nomme ET_Builder_Module_Slider_Item et se trouve juste à la suite de cette dernière.

 

Le module Carousel :

[pastacode lang= »php » manual= »%2F**%0A%20*%20Plugin%20Name%3A%20Divi%20Module%20Carousel%0A%20*%20Description%3A%20Custom%20module%20for%20Divi%20theme%20for%20create%20nice%20carousel%0A%20*%20Version%3A%201.0.0%0A%20*%20Author%3A%20Marie%20Comet%0A%20*%20License%3A%20MIT%20License%0A%20*%2F%0Afunction%20CarouseldoCustomModule()%20%7B%0A%09if(class_exists(%22ET_Builder_Module%22))%7B%0A%09%09class%20ET_Builder_Module_Carousel%20extends%20ET_Builder_Module%20%7B%0A%09%09%09function%20init()%20%7B%0A%09%09%09%09wp_register_script(%20’slick-carousel’%2C%20’%2F%2Fcdn.jsdelivr.net%2Fjquery.slick%2F1.6.0%2Fslick.min.js’%2C%20array(‘jquery’)%2C%20 »%2C%20true)%3B%0A%09%09%09%09wp_register_script(%20’carousel-divi-module’%2C%20plugin_dir_url(%20__FILE__%20)%20.%20’carousel-divi-module.js’%2C%20array(‘jquery’%2C’slick-carousel’)%20)%3B%0A%09%09%09%09wp_register_style(‘slick-css’%2C%20’%2F%2Fcdn.jsdelivr.net%2Fjquery.slick%2F1.6.0%2Fslick.css’)%3B%0A%09%09%09%09wp_register_style(‘slick-theme’%2C%20’%2F%2Fcdn.jsdelivr.net%2Fjquery.slick%2F1.6.0%2Fslick-theme.css’)%3B%0A%09%09%09%09if(!is_admin())%20%7B%0A%09%09%09%09%09wp_enqueue_script(‘slick-carousel’)%3B%0A%09%09%09%09%09wp_enqueue_script(‘carousel-divi-module’)%3B%0A%09%09%09%09%09wp_enqueue_style(‘slick-css’)%3B%0A%09%09%09%09%09wp_enqueue_style(‘slick-theme’)%3B%0A%09%09%09%09%7D%0A%0A%09%09%09%09%24this-%3Ename%20%20%20%20%20%20%20%20%20%20%20%20%3D%20esc_html__(%20’Carousel’%20)%3B%0A%09%09%09%09%24this-%3Eslug%20%20%20%20%20%20%20%20%20%20%20%20%3D%20’et_pb_slick_slider_mc’%3B%0A%09%09%09%09%24this-%3Echild_slug%20%20%20%20%20%20%3D%20’et_pb_slick_slide_mc’%3B%0A%09%09%09%09%24this-%3Echild_item_text%20%3D%20esc_html__(%20’Carousel%20Item’%20)%3B%0A%0A%09%09%09%09%24this-%3Ewhitelisted_fields%20%3D%20array()%3B%0A%09%09%09%09foreach%20(%20%24this-%3Eget_fields()%20as%20%24name%20%3D%3E%20%24field%20)%20%7B%0A%09%09%09%09%09%24this-%3Ewhitelisted_fields%5B%5D%20%3D%20%24name%3B%0A%09%09%09%09%7D%0A%0A%09%09%09%7D%0A%0A%09%09%09function%20get_fields()%20%7B%0A%09%09%09%09%24fields%20%3D%20array(%0A%09%09%09%09%09%20%20’admin_label’%20%3D%3E%20array(%0A%09%09%09%09%09%09%09%20%20’label’%20%20%20%20%20%20%20%3D%3E%20__(%20’Admin%20Label’%2C%20’et_builder’%20)%2C%0A%09%09%09%09%09%09%09%20%20’type’%20%20%20%20%20%20%20%20%3D%3E%20’text’%2C%0A%09%09%09%09%09%09%09%20%20’description’%20%3D%3E%20__(%20’This%20will%20change%20the%20label%20of%20the%20module%20in%20the%20builder%20for%20easy%20identification.’%2C%20’et_builder’%20)%2C%0A%09%09%09%09%09%20%20)%0A%09%09%09%09)%3B%0A%09%09%09%09return%20%24fields%3B%0A%09%09%09%7D » message= » » highlight= »9,10,23,24,25,26,30,35″ provider= »manual »/]

A la ligne 9 on vérifie que la Class Et_Builder_Module est bien active

Ligne 10 on déclare notre class ET_Builder_Module_Carousel qui étend cette dernière.

Dans la fonction init, on register tous nos scripts et styles nécessaires pour faire fonctionner Slick Slider, puis à la ligne 23 on déclare le nom de notre module, ligne 24 son slug –qui doit-être unique-, puis enfin à la ligne 25 et 26 le slug et le nom de notre module « enfant », nos items de Carousel.

A la ligne 30 on boucle sur les champs définis dans la fonction get_fields à la ligne 35, ce sont les champs qui s’afficheront en admin dans le module Carousel. Ici j’ai laissé seulement le champs pour changer le nom du module en admin, mais on peut en mettre autant que l’on veut (à vos risques et périls).

Il nous faut maintenant définir la fonction qui affichera le shortcode en front :

[pastacode lang= »php » manual= »%09function%20shortcode_callback(%20%24atts%2C%20%24content%20%3D%20null%2C%20%24function_name%20)%20%7B%0A%0A%09%09%24content%20%3D%20%24this-%3Eshortcode_content%3B%0A%0A%09%09%24output%20%3D%20sprintf(%0A%09%09%09’%3Cdiv%20class%3D%22et_pb_module%20et_pb_slick_slider_mc%22%3E%0A%09%09%09%09%3Cdiv%20class%3D%22slick-carousel%22%3E%0A%09%09%09%09%09%251%24s%0A%09%09%09%09%3C%2Fdiv%3E%20%3C!–%20.et_pb_slides%20–%3E%0A%09%09%09%3C%2Fdiv%3E%20%3C!–%20.et_pb_slick_slider_mc%20–%3E%0A%09%09%09’%2C%0A%09%09%09%24content%0A%09%09)%3B%0A%0A%09%09return%20%24output%3B%0A%09%7D%0A%7D%0Anew%20ET_Builder_Module_Carousel%3B » message= » » highlight= »3,7,18″ provider= »manual »/]

En ligne 3 on récupère le contenu du shortcode

On stocke dans la variable $output ce que l’on souhaite ressortir, c’est à dire le contenu du shortcode, encapsulé dans une structure html assez basique, notez la classe CSS « slick-carousel » en ligne 7 qui servira à instancier la librairie Slick sur notre élément.

Enfin en ligne 18 on lance notre Class.

Le module enfant qui gère nos items

[pastacode lang= »php » manual= »%20%20class%20ET_Builder_Module_Carousel_Item%20extends%20ET_Builder_Module%20%7B%0A%09%20%20function%20init()%20%7B%0A%09%09%20%20%24this-%3Ename%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3D%20esc_html__(%20’Carousel%20Item’%20)%3B%0A%09%09%20%20%24this-%3Eslug%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3D%20’et_pb_slick_slide_mc’%3B%0A%09%09%20%20%24this-%3Etype%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3D%20’child’%3B%0A%0A%09%09%20%20%24this-%3Ewhitelisted_fields%20%3D%20array()%3B%0A%09%09%20%20foreach%20(%20%24this-%3Eget_fields()%20as%20%24name%20%3D%3E%20%24field%20)%20%7B%0A%09%09%09%20%20%24this-%3Ewhitelisted_fields%5B%5D%20%3D%20%24name%3B%0A%09%09%20%20%7D%0A%0A%09%09%20%20%24this-%3Efields_defaults%20%3D%20array()%3B%0A%0A%09%09%20%20%24this-%3Eadvanced_setting_title_text%20%3D%20esc_html__(%20’Nouvel%20Item’%20)%3B%0A%09%09%20%20%24this-%3Esettings_text%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3D%20esc_html__(%20’Param%C3%A8tres%20Item’)%3B%0A%09%20%20%7D%0A%0A%09%20%20function%20get_fields()%20%7B%0A%09%09%20%20%24fields%20%3D%20array(%0A%09%09%09%20%20’background_image’%20%3D%3E%20array(%0A%09%09%09%09%20%20’label’%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3D%3E%20esc_html__(%20’Background%20Image’%2C%20’et_builder’%20)%2C%0A%09%09%09%09%20%20’type’%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3D%3E%20’upload’%2C%0A%09%09%09%09%20%20’option_category’%20%20%20%20%3D%3E%20’basic_option’%2C%0A%09%09%09%09%20%20’upload_button_text’%20%3D%3E%20esc_attr__(%20’Upload%20an%20image’%2C%20’et_builder’%20)%2C%0A%09%09%09%09%20%20’choose_text’%20%20%20%20%20%20%20%20%3D%3E%20esc_attr__(%20’Choose%20a%20Background%20Image’%2C%20’et_builder’%20)%2C%0A%09%09%09%09%20%20’update_text’%20%20%20%20%20%20%20%20%3D%3E%20esc_attr__(%20’Set%20As%20Background’%2C%20’et_builder’%20)%2C%0A%09%09%09%09%20%20’description’%20%20%20%20%20%20%20%20%3D%3E%20esc_html__(%20’Image%20de%20l%5C’item’%2C%20’et_builder’%20)%2C%0A%09%09%09%20%20)%2C%0A%09%09%09%20%20’image_url’%20%3D%3E%20array(%0A%09%09%09%09%20%20’label’%20%20%20%20%20%20%20%20%20%20%20%3D%3E%20esc_html__(%20’Url%20de%20l%5C’%C3%A9l%C3%A9ment’%2C%20’et_builder’%20)%2C%0A%09%09%09%09%20%20’type’%20%20%20%20%20%20%20%20%20%20%20%20%3D%3E%20’text’%2C%0A%09%09%09%09%20%20’option_category’%20%3D%3E%20’basic_option’%2C%0A%09%09%09%09%20%20’description’%20%20%20%20%20%3D%3E%20esc_html__(%20’Url%20de%20l%5C’item’%2C%20’et_builder’%20)%2C%0A%09%09%09%20%20)%0A%09%09%20%20)%3B%0A%09%09%20%20return%20%24fields%3B%0A%09%20%20%7D » message= » » highlight= »1,5,18,20,29″ provider= »manual »/]

En ligne 1 on créé une nouvelle Class qui ressemble beaucoup à la précédente.

Il est indispensable de reprendre le slug défini plus haut quand on a défini ‘child_slug‘, est d’indiquer le type du module : child en ligne 5.

Pour le reste de la fonction init, idem que précédemment.

En ligne 18 on définit nos champs via le fonction get_fields, nous voulons donc un champ « image » ligne 20, qui servira à télécharger les images de nos items, et un champ URL en ligne 29, pour rendre nos items cliquables vers une URL externe (c’est pour le fun).

 

On ressort ensuite nos champs (ligne 3 et 4) et ferme la Class ainsi que la fonction CarouseldoCustomModule et la condition sur l’existence de la Class ET_Builder_Module ouvertes tout au début :

[pastacode lang= »php » manual= »%09%09%09function%20shortcode_callback(%20%24atts%2C%20%24content%20%3D%20null%2C%20%24function_name%20)%20%7B%0A%0A%09%09%09%09%24background_image%20%3D%20%24this-%3Eshortcode_atts%5B’background_image’%5D%3B%0A%09%09%09%09%24url_image%20%3D%20%24this-%3Eshortcode_atts%5B’image_url’%5D%3B%0A%0A%09%09%09%09%24output%20%3D%20sprintf(%0A%09%09%09%09%09’%3Cdiv%20class%3D%22slide%22%3E%0A%09%09%09%09%09%09%3Cdiv%20class%3D%22et_pb_container%20clearfix%22%3E%0A%09%09%09%09%09%09%09%3Cdiv%20class%3D%22et_pb_slide_description%22%3E%0A%09%09%09%09%09%09%09%09%3Cdiv%20class%3D%22et_pb_slide_content%22%3E%3Ca%20href%3D%22%252%24s%22%3E%3Cimg%20src%3D%22%251%24s%22%20%2F%3E%3C%2Fa%3E%3C%2Fdiv%3E%0A%09%09%09%09%09%09%09%3C%2Fdiv%3E%20%3C!–%20.et_pb_slide_description%20–%3E%0A%09%09%09%09%09%09%3C%2Fdiv%3E%20%3C!–%20.et_pb_container%20–%3E%0A%09%09%09%09%09%3C%2Fdiv%3E%09%09%09%0A%09%09%09%09%09’%2C%0A%09%09%09%09%09%24background_image%2C%20%0A%09%09%09%09%09%24url_image)%3B%0A%0A%09%09%09%09return%20%24output%3B%0A%09%09%09%7D%0A%09%09%7D%0A%09%09new%20ET_Builder_Module_Carousel_Item%3B%0A%09%7D%0A%7D » message= » » highlight= »3,4″ provider= »manual »/]

et enfin on lance tout ça, sinon il ne se passera rien :

[pastacode lang= »php » manual= »add_action(‘et_builder_ready’%2C%20’prepareCarouselModule’)%3B » message= » » highlight= » » provider= »manual »/]

En ligne 1 on place notre fonction prepareCarouselModule déclarée en ligne 2 sur une action et_builder_ready, qui est lancée dans le fichier framework.php (Divi/includes/builder/framework.php).

À ce stade si vous testez votre module il fonctionnera, mais en front vous n’aurez pas les fonctionnalités d’un Carousel, reste à faire un peu de jQuery.

Souvenez-vous au début de notre extension nous avons chargé un fichier nommé carousel-divi-module.js, créez donc ce fichier et insérez ceci :

[pastacode lang= »javascript » manual= »jQuery(document).ready(function()%7B%0A%09jQuery(‘.slick-carousel’).slick(%7B%0A%09%20%20dots%3A%20true%2C%0A%09%20%20arrows%3A%20true%2C%0A%09%20%20infinite%3A%20false%2C%0A%09%20%20speed%3A%20300%2C%0A%09%20%20slidesToShow%3A%205%2C%0A%09%20%20slidesToScroll%3A%202%2C%0A%09%20%20responsive%3A%20%5B%0A%09%09%7B%0A%09%09%20%20breakpoint%3A%201140%2C%0A%09%09%20%20settings%3A%20%7B%0A%09%09%09slidesToShow%3A%203%2C%0A%09%09%09slidesToScroll%3A%203%2C%0A%09%09%09infinite%3A%20true%2C%0A%09%09%09dots%3A%20true%0A%09%09%20%20%7D%0A%09%09%7D%2C%0A%09%09%7B%0A%09%09%20%20breakpoint%3A%20600%2C%0A%09%09%20%20settings%3A%20%7B%0A%09%09%09slidesToShow%3A%202%2C%0A%09%09%09slidesToScroll%3A%202%0A%09%09%20%20%7D%0A%09%09%7D%2C%0A%09%09%7B%0A%09%09%20%20breakpoint%3A%20480%2C%0A%09%09%20%20settings%3A%20%7B%0A%09%09%09slidesToShow%3A%201%2C%0A%09%09%09slidesToScroll%3A%201%0A%09%09%20%20%7D%0A%09%09%7D%0A%09%20%20%5D%0A%09%7D)%3B%0A%7D)%3B » message= » » highlight= »2″ provider= »manual »/]

Je vous invite à lire la doc relative à Slick Carousel pour les paramètres mis en place dans ce fichier.

Il est indispensable d’instancier notre action sur la classe CSS slick-carousel (ligne 2) que nous avions définie plus haut.

 

Vous savez maintenant comment créer des modules personnalisés pour Divi !

 

Astuce : S’il vous arrive pendant votre développement d’apporter des modifications à votre module et de ne pas les voir appliquées en back-office dans votre builder, il vous faut changer le slug du module  ajouter ce bout de code : 

[pastacode lang= »php » manual= »%2F%2F%20Config%0A%0A%24debug%20%3D%20true%3B%0A%24current_version%20%3D%20’1.1’%3B%0A%24slug%20%3D%20’et_pb_my_custom_module’%3B%0A%24version_option_name%20%3D%20’my_plugin_version’%3B%0A%0Aif%20(is_admin())%20%7B%0A%0A%09%2F%2F%20Check%20if%20plugin%20updated%0A%0A%09%24old_version%20%3D%20get_option(%24version_option_name)%3B%0A%0A%09if%20(%24old_version%20!%3D%20%24current_version)%20%7B%20%0A%09%09%24updated%20%3D%20true%3B%20%0A%09%09update_option(%24version_option_name%2C%20%24current_version)%3B%20%2F%2F%20Update%20the%20stored%20version%20number%0A%09%7D%20else%20%7B%0A%09%09%24upgraded%20%3D%20false%3B%0A%09%7D%0A%0A%09%2F%2F%20Clear%20module%20from%20cache%20if%20necessary%0A%0A%09if%20(%24debug%20or%20%24upgraded)%20%7B%20%0A%09%09add_action(‘admin_head’%2C%20’remove_from_local_storage’)%3B%0A%09%7D%0A%7D%0A%09%09%09%09%0Afunction%20remove_from_local_storage()%20%7B%20%0A%09global%20%24slug%3B%0A%09echo%20%22%3Cscript%3ElocalStorage.removeItem(‘et_pb_templates_%22.esc_attr(%24slug).%22’)%3B%3C%2Fscript%3E%22%3B%0A%7D » message= »Effacer le cache navigateur » highlight= » » provider= »manual »/]

  qui forcera la suppression du cache navigateur. Source : DiviBooster 😉



5 réponses à “Créer un module personnalisé pour Divi”

  1. Bonjour Marie,

    Merci ! Ton article est super et tombe pile dans ce dont j’ai besoin ! Mais du coup je me pose une question, les mises à jour de Divi ne risquent pas d’effacer notre module ?

    • Salut Sophie, désolée pour ma réponse tardive, non les mises à jour n’agiront pas sur notre module personnalisé puisqu’il est placé dans un plug-in et non dans le thème ! Par contre il faut surveiller si Divi ne modifie pas ses classes PHP, puisque nous les étendons dans notre plug-in. Bonne journée.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.