web-dev-qa-db-ja.com

カスタムDiviモジュールを作成する方法は？

Diviのカスタムモジュールを追加するにはどうすればよいですかWordpress theme？ http://www.elegantthemes.com/gallery/divi/

元のモジュールはmain-modules.phpに作成されます

例：

class ET_Builder_Module_Gallery extends ET_Builder_Module { .... }

しかし ET_Builder_Moduleクラスにプラグインまたはテーマでアクセスできないfunctions.php

phpwordpressclassplugins
17
Kiss Bálint

ここでの他のほとんどのソリューションはあまりにも複雑です。最も簡単な方法は、次のように、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/

12
Philipp

Functions.phpファイルに以下を配置します。インクルードファイル（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();
}
7
Aryan Duntley

重要な注意：カスタムモジュールのスラッグmustには文字列_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;
_
4
thirdender

上記のコードは機能しませんでした関数も呼び出す必要があります。

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

ここでちょっとした議論を解決してみたいと思います。クラスET_Builder_Module_Custom_Module extends ET_Builder_Module {}は実際に機能し、main-modules.phpは自由に変更できます子テーマの場合が使用されます。私は最近、Diviテーマをajax化しました。

注：子ファイルも更新する必要がある場合があるため、子テーマ内で使用するファイルに更新があるかどうかを確認することを常にお勧めします。

これがこの投稿の今後の読者の皆さんのお役に立てば幸いです。

これから作成する新しいモジュールを含むHFGL;）

2
Dimitar Radev Radev

カスタムモジュールを作成するには、既存のモジュールを使用してデザイン（レイアウト）を作成し、そのデザインをDiviライブラリに保存し、テキストまたはコードモジュールを使用して、そこにすべてのHTML/jqueryコードを記述します。

このように、 https://github.com/Skaidrius/Divi/tree/master/Layouts/Price-list

0
Skaidrius