如何創建自定義Divi模塊？

Question

如何為Divi Wordpress主題添加自定義模塊？ http://www.elegantthemes.com/gallery/divi/

原始模塊在main-modules.php中創建

例：

class ET_Builder_Module_Gallery extends ET_Builder_Module { .... }

但是我的插件或主題functions.php中無法訪問ET_Builder_Module類

Answer 1

這里的大多數其他解決方案都太復雜了。 最簡單的方法是在divi特定操作鈎子et_builder_ready加載自定義模塊，如下所示：

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;

            // ...

        }
    }
}

你可以在github上找到完整的演示代碼。 除了一些說明如何讓它在全新的Divi 3前端構建器中運行：

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

Answer 2

將下面放在functions.php文件中。 include文件（我稱之為custom-modules.php）將是一個擴展ET_Builder_Module的類（與WP_Widget非常相似）。 只需從Divi >> includes >> builder >> main-modules.php打開文件即可。 使用任何預先存在的模塊作為新模塊的示例或基礎。 復制並粘貼到custom-modules.php中。 新的類名，根據需要進行編輯等。

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();
}

Answer 3

上面的代碼不起作用該函數也需要調用。

以下是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();

Answer 4

重要說明：自定義模塊的slug 必須包含字符串et_pb_ ，否則它將被函數et_pb_allowed_modules_list()過濾掉。

我能夠使用以下代碼添加新的Divi模塊（匿名函數需要PHP 5.3+）：

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

在包含的文件中，從wp-content/themes/Divi/includes/builder/main-modules.php文件中復制並粘貼一個class ，然后根據您的需要進行修改。 請參閱下面的示例（從提到的文件中復制一個實際的類以獲取下面列出的每個方法的內容...為了簡單起見，我喜歡ET_Builder_Module_Code類）：

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;

Answer 5

我想嘗試解決這里的小辯論。 類ET_Builder_Module_Custom_Module擴展ET_Builder_Module {}實際上工作，並且如果使用子主題，可以自由修改main-modules.php。 我最近ajaxified一個Divi主題，更新后一切都像一個魅力。

注意：檢查在子主題中使用的文件是否有更新總是一個好主意，因為有時您可能還需要更新子文件。

我希望這有助於這篇文章的所有未來讀者。

HFGL與您即將創建的新模塊;）

Answer 6

為了創建自定義模塊，我將使用現有模塊來創建設計（布局），將該設計保存到Divi庫中並使用Text或Code模塊並在那里編寫所有HTML / jquery代碼。

像這里， https：//github.com/Skaidrius/Divi/tree/master/Layouts/Price-list

Answer 7

你可以修改Divi主題文件（這很糟糕）

例如，您可以修改main-modules.php以添加新模塊：

class ET_Builder_Module_Custom_Module extends ET_Builder_Module {
    function init() {
        $this->name = __( 'My Module', 'et_builder' );
        $this->slug = 'et_pb_custom_module';

之后，您需要在functions.php中添加自定義程序的面板：

/* Section: Custom Module */
$wp_customize->add_section( 'et_pagebuilder_custom_module', array(
    'priority'       => 220,
    'capability'     => 'edit_theme_options',
    'title'          => __( 'My Module', 'Divi' ),
    // 'description'    => '',
) );

如果你在functions.php中搜索，你會發現在哪里輕松添加;）