web-dev-qa-db-fra.com

Comment créer un module Divi personnalisé?

Comment ajouter un module personnalisé pour le thème Divi Wordpress? http://www.elegantthemes.com/gallery/divi/

Les modules originaux sont créés dans main-modules.php

Exemple:

class ET_Builder_Module_Gallery extends ET_Builder_Module { .... }

Mais la classe ET_Builder_Module n'est pas accessible dans mon plugin, ni dans le thème functions.php

phpwordpressclassplugins
17
Kiss Bálint

La plupart des autres solutions sont beaucoup trop complexes. Le moyen le plus simple est de charger votre module personnalisé dans le hook d’action spécifique à Divi et_builder_ready, comme ceci:

add_action( 'et_builder_ready', 'evr_initialize_divi_modules' );

function evr_initialize_divi_modules() {
    if ( ! class_exists( 'ET_Builder_Module' ) ) { return; }

    class EVR_Builder_Module_Testimonial extends ET_Builder_Module {
        function init() {
            $this->name       = esc_html__( 'Testimonial', 'evr' );
            $this->slug       = 'evr_pb_testimonial';
            $this->fb_support = true;

            // ...

        }
    }
}

Vous pouvez trouver le code de démonstration complet sur github. Avec quelques instructions pour le faire fonctionner dans le tout nouveau constructeur Divi 3:

https://github.com/stracker-phil/divi3-vb-custom-modules/

11
Philipp

Placez ci-dessous dans votre fichier functions.php. Le fichier include (je l'ai appelé custom-modules.php) sera une classe qui étend ET_Builder_Module (qui est très similaire à WP_Widget). Il suffit d'ouvrir le fichier à partir de Divi >> inclut >> le constructeur >> main-modules.php. Utilisez n'importe lequel des modules préexistants comme exemple ou comme base pour votre nouveau. Copiez et collez dans votre custom-modules.php. Nouveaux noms de classes, apportez les modifications nécessaires, etc.

function doCustomModules(){
 if(class_exists("ET_Builder_Module")){
    include("custom-modules.php");
 }
}

function prepareCustomModule(){
 global $pagenow;

 $is_admin = is_admin();
 $action_hook = $is_admin ? 'wp_loaded' : 'wp';
 $required_admin_pages = array( 'edit.php', 'post.php', 'post-new.php', 'admin.php', 'customize.php', 'edit-tags.php', 'admin-ajax.php', 'export.php' ); // list of admin pages where we need to load builder files
 $specific_filter_pages = array( 'edit.php', 'admin.php', 'edit-tags.php' ); // list of admin pages where we need more specific filtering
 $is_edit_library_page = 'edit.php' === $pagenow && isset( $_GET['post_type'] ) && 'et_pb_layout' === $_GET['post_type'];
    $is_role_editor_page = 'admin.php' === $pagenow && isset( $_GET['page'] ) && 'et_divi_role_editor' === $_GET['page'];
    $is_import_page = 'admin.php' === $pagenow && isset( $_GET['import'] ) && 'wordpress' === $_GET['import']; // Page Builder files should be loaded on import page as well to register the et_pb_layout post type properly
    $is_edit_layout_category_page = 'edit-tags.php' === $pagenow && isset( $_GET['taxonomy'] ) && 'layout_category' === $_GET['taxonomy'];

 if ( ! $is_admin || ( $is_admin && in_array( $pagenow, $required_admin_pages ) && ( ! in_array( $pagenow, $specific_filter_pages ) || $is_edit_library_page || $is_role_editor_page || $is_edit_layout_category_page || $is_import_page ) ) ) {
    add_action($action_hook, 'doCustomModules', 9789);
 }
}
$theme_data = wp_get_theme();
$parent_data = $theme_data->parent();
if(version_compare((string)$parent_data->Version, "2.5.9", ">")) {
    add_action('et_builder_ready', 'doCustomModules');
} else {
    doCustomModule();
}
6
Aryan Duntley

Note importante: Le slug de votre module personnalisé doit contenir la chaîne et_pb_, sinon il sera filtré par la fonction et_pb_allowed_modules_list().

J'ai pu ajouter un nouveau module Divi en utilisant le code suivant (nécessite PHP 5.3+ pour la fonction anonyme):

add_action(is_admin() ? 'wp_loaded' : 'wp', function() {
  require __DIR__ . '/custom-divi-module.php';
}, 20);

Dans le fichier inclus, copiez et collez une class à partir du fichier wp-content/themes/Divi/includes/builder/main-modules.php, puis modifiez-la en fonction de vos besoins. Voir l'exemple ci-dessous (copiez une classe du fichier mentionné pour obtenir le contenu de chacune des méthodes énumérées ci-dessous… J'aime la classe ET_Builder_Module_Code par souci de simplicité):

class YOUR_MODULE_NAME extends ET_Builder_Module {
  function init() {
    // Name, slug, and some other settings for the module go here
  }

  function get_fields() {
    // This method returns an array of fields that the module will
    // display as the module settings
  }

  function shortcode_callback($atts, $content = null, $function_name) {
    // This method returns the content the module will display
  }
}
new YOUR_MODULE_NAME;
3
thirdender

Le code ci-dessus n'a pas fonctionné. La fonction doit également être appelée. 

Voici un exemple avec un code de travail de https://divi.space/blog/adding-custom-modules-to-divi/

function DS_Custom_Modules(){
 if(class_exists("ET_Builder_Module")){
 include("ds-custom-modules.php");
 }
}

function Prep_DS_Custom_Modules(){
 global $pagenow;

$is_admin = is_admin();
 $action_hook = $is_admin ? 'wp_loaded' : 'wp';
 $required_admin_pages = array( 'edit.php', 'post.php', 'post-new.php', 'admin.php', 'customize.php', 'edit-tags.php', 'admin-ajax.php', 'export.php' ); // list of admin pages where we need to load builder files
 $specific_filter_pages = array( 'edit.php', 'admin.php', 'edit-tags.php' );
 $is_edit_library_page = 'edit.php' === $pagenow && isset( $_GET['post_type'] ) && 'et_pb_layout' === $_GET['post_type'];
 $is_role_editor_page = 'admin.php' === $pagenow && isset( $_GET['page'] ) && 'et_divi_role_editor' === $_GET['page'];
 $is_import_page = 'admin.php' === $pagenow && isset( $_GET['import'] ) && 'wordpress' === $_GET['import']; 
 $is_edit_layout_category_page = 'edit-tags.php' === $pagenow && isset( $_GET['taxonomy'] ) && 'layout_category' === $_GET['taxonomy'];

if ( ! $is_admin || ( $is_admin && in_array( $pagenow, $required_admin_pages ) && ( ! in_array( $pagenow, $specific_filter_pages ) || $is_edit_library_page || $is_role_editor_page || $is_edit_layout_category_page || $is_import_page ) ) ) {
 add_action($action_hook, 'DS_Custom_Modules', 9789);
 }
}
Prep_DS_Custom_Modules();
3
Roy Toledo

Je veux essayer de régler le petit débat ici . class ET_Builder_Module_Custom_Module étend ET_Builder_Module {} fonctionne réellement et main-modules.php peut être modifié librement SI un thème enfant est utilisé. J'ai récemment ajaxifié un thème Divi et après la mise à jour, tout a fonctionné comme un charme.

Remarque: il est toujours utile de vérifier s'il existe des mises à jour sur les fichiers que vous utilisez dans le thème enfant, car vous devrez parfois mettre à jour les fichiers enfant également.

J'espère que cela a aidé tous les futurs lecteurs de ce post. 

HFGL avec les nouveaux modules que vous allez créer;)

2
Dimitar Radev Radev

Pour créer des modules personnalisés, j'utilisais les modules existants pour créer un dessin (présentation), je sauvegardais ce dessin dans la bibliothèque Divi, des modules Texte ou Code et j'écrivais tout le code HTML/jquery. 

Comme ici, https://github.com/Skaidrius/Divi/tree/master/Layouts/Price-list

0
Skaidrius