Créer un module personnalisé pour Divi

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 :

/**
 * Plugin Name: Divi Module Carousel
 * Description: Custom module for Divi theme for create nice carousel
 * Version: 1.0.0
 * Author: Marie Comet
 * License: MIT License
 */
function CarouseldoCustomModule() {
	if(class_exists("ET_Builder_Module")){
		class ET_Builder_Module_Carousel extends ET_Builder_Module {
			function init() {
				wp_register_script( 'slick-carousel', '//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js', array('jquery'), '', true);
				wp_register_script( 'carousel-divi-module', plugin_dir_url( __FILE__ ) . 'carousel-divi-module.js', array('jquery','slick-carousel') );
				wp_register_style('slick-css', '//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css');
				wp_register_style('slick-theme', '//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css');
				if(!is_admin()) {
					wp_enqueue_script('slick-carousel');
					wp_enqueue_script('carousel-divi-module');
					wp_enqueue_style('slick-css');
					wp_enqueue_style('slick-theme');
				}

				$this->name            = esc_html__( 'Carousel' );
				$this->slug            = 'et_pb_slick_slider_mc';
				$this->child_slug      = 'et_pb_slick_slide_mc';
				$this->child_item_text = esc_html__( 'Carousel Item' );

				$this->whitelisted_fields = array();
				foreach ( $this->get_fields() as $name => $field ) {
					$this->whitelisted_fields[] = $name;
				}

			}

			function get_fields() {
				$fields = array(
					  'admin_label' => array(
							  'label'       => __( 'Admin Label', 'et_builder' ),
							  'type'        => 'text',
							  'description' => __( 'This will change the label of the module in the builder for easy identification.', 'et_builder' ),
					  )
				);
				return $fields;
			}

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 :

	function shortcode_callback( $atts, $content = null, $function_name ) {

		$content = $this->shortcode_content;

		$output = sprintf(
			'<div class="et_pb_module et_pb_slick_slider_mc">
				<div class="slick-carousel">
					%1$s
				</div> <!-- .et_pb_slides -->
			</div> <!-- .et_pb_slick_slider_mc -->
			',
			$content
		);

		return $output;
	}
}
new ET_Builder_Module_Carousel;

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

  class ET_Builder_Module_Carousel_Item extends ET_Builder_Module {
	  function init() {
		  $this->name                        = esc_html__( 'Carousel Item' );
		  $this->slug                        = 'et_pb_slick_slide_mc';
		  $this->type                        = 'child';

		  $this->whitelisted_fields = array();
		  foreach ( $this->get_fields() as $name => $field ) {
			  $this->whitelisted_fields[] = $name;
		  }

		  $this->fields_defaults = array();

		  $this->advanced_setting_title_text = esc_html__( 'Nouvel Item' );
		  $this->settings_text               = esc_html__( 'Paramètres Item');
	  }

	  function get_fields() {
		  $fields = array(
			  'background_image' => array(
				  'label'              => esc_html__( 'Background Image', 'et_builder' ),
				  'type'               => 'upload',
				  'option_category'    => 'basic_option',
				  'upload_button_text' => esc_attr__( 'Upload an image', 'et_builder' ),
				  'choose_text'        => esc_attr__( 'Choose a Background Image', 'et_builder' ),
				  'update_text'        => esc_attr__( 'Set As Background', 'et_builder' ),
				  'description'        => esc_html__( 'Image de l\'item', 'et_builder' ),
			  ),
			  'image_url' => array(
				  'label'           => esc_html__( 'Url de l\'élément', 'et_builder' ),
				  'type'            => 'text',
				  'option_category' => 'basic_option',
				  'description'     => esc_html__( 'Url de l\'item', 'et_builder' ),
			  )
		  );
		  return $fields;
	  }

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 :

			function shortcode_callback( $atts, $content = null, $function_name ) {

				$background_image = $this->shortcode_atts['background_image'];
				$url_image = $this->shortcode_atts['image_url'];

				$output = sprintf(
					'<div class="slide">
						<div class="et_pb_container clearfix">
							<div class="et_pb_slide_description">
								<div class="et_pb_slide_content"><a href="%2$s"><img src="%1$s" /></a></div>
							</div> <!-- .et_pb_slide_description -->
						</div> <!-- .et_pb_container -->
					</div>			
					',
					$background_image, 
					$url_image);

				return $output;
			}
		}
		new ET_Builder_Module_Carousel_Item;
	}
}

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

add_action('et_builder_ready', 'prepareCarouselModule');

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 :

jQuery(document).ready(function(){
	jQuery('.slick-carousel').slick({
	  dots: true,
	  arrows: true,
	  infinite: false,
	  speed: 300,
	  slidesToShow: 5,
	  slidesToScroll: 2,
	  responsive: [
		{
		  breakpoint: 1140,
		  settings: {
			slidesToShow: 3,
			slidesToScroll: 3,
			infinite: true,
			dots: true
		  }
		},
		{
		  breakpoint: 600,
		  settings: {
			slidesToShow: 2,
			slidesToScroll: 2
		  }
		},
		{
		  breakpoint: 480,
		  settings: {
			slidesToShow: 1,
			slidesToScroll: 1
		  }
		}
	  ]
	});
});

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 : 

// Config

$debug = true;
$current_version = '1.1';
$slug = 'et_pb_my_custom_module';
$version_option_name = 'my_plugin_version';

if (is_admin()) {

	// Check if plugin updated

	$old_version = get_option($version_option_name);

	if ($old_version != $current_version) { 
		$updated = true; 
		update_option($version_option_name, $current_version); // Update the stored version number
	} else {
		$upgraded = false;
	}

	// Clear module from cache if necessary

	if ($debug or $upgraded) { 
		add_action('admin_head', 'remove_from_local_storage');
	}
}
				
function remove_from_local_storage() { 
	global $slug;
	echo "<script>localStorage.removeItem('et_pb_templates_".esc_attr($slug)."');</script>";
}
Effacer le cache navigateur

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

Vous avez des questions ?
Contactez-moi :
Me contacter

2 thoughts on “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 ?

    1. 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 de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nom *

fc808cff815d3cf9a137d47b6036561cXXXXXXXXXXXXXXXXXXXX