Question

我正在尝试创建一些自定义的Divi构建器模块。我遵循他们网站上稀疏的文档，试图创建一个模块和一个子模块。一切似乎都工作正常，但渲染正常。它只是将模块简码呈现为字符串，而不是内容。

父模块的当前代码为

class DEDE_Cards extends ET_Builder_Module {

public function init(){
    $this->name = esc_html__('Custom Card', 'dede-designvox-divi-extension');
    $this->plural = esc_html__('Custom Cards', 'dede-designvox-divi-extension');
    $this->main_css_element = 'cards-wrapper';
    $this->slug = 'dede_cards';
    $this->vb_support = 'on';
    $this->child_slug = 'dede_card_item';
}

public function get_fields(){
    return array(
        'title' => array(
            'label'           => esc_html__( 'Title', 'dede-designvox-divi-extension' ),
            'type'            => 'text',
            'toggle_slug'     => 'main_content',
            'description'     => esc_html__( 'Type the section title' ),
        ),
        'card_title_position' => array(
            'label'           => esc_html__( 'Title Position', 'dede-designvox-divi-extension' ),
            'type'            => 'select',
            'options'         => array(
                'overlay' => esc_html__( 'Overlay', 'et_builder' ),
                'top'  => esc_html__( 'Over image', 'et_builder' ),
                'bottom'  => esc_html__( 'Under image', 'et_builder' ),
            ),
            'toggle_slug'     => 'main_content',
            'description'     => esc_html__( 'Here you can choose the position of the card title', 'dede-designvox-divi-extension' ),
            'default_on_front' => 'bottom',
        ),
    );
}

function before_render() {
    global $dede_card_item_number;
    $dede_card_item_number = 1;
}

public function render($unprocessed_props, $content = null, $render_slug ){
    global $dede_card_item_number;


    return sprintf(
        '<div>%1$s</div>',
        $this->content
    );
}

public function add_new_child_text() {
    return esc_html__( 'Add New Card Item1', 'dede-designvox-divi-extension' );
}

}

new DEDE_Cards;

然后是子模块

class DEDE_Card_Item extends ET_Builder_Module {

    public function init(){
        $this->name = esc_html__('Custom Card', 'dede-designvox-divi-extension');
        $this->plural = esc_html__('Custom Cards', 'dede-designvox-divi-extension');
        $this->type= 'child';
        $this->child_title_var = 'title';
        $this->no_render = true;
        $this->slug = 'dede_card_item';
        $this->vb_support = 'on';
    }

    public function get_fields(){
        return array(
            'title' => array(
                'label' => esc_html__('Title', 'dede-designvox-divi-extension'),
                'type' => 'text',
                'description' => esc_html__('The title of this card', 'dede-designvox-divi-extension'),
                'toggle_slug' => 'main_content',
            ),
            'desc' => array(
                'label'           => esc_html__( 'Description', 'dede-designvox-divi-extension' ),
                'type'            => 'textarea',
                'description'     => esc_html__( 'The card description' ),
                'toggle_slug'     => 'main_content',
            ),
            'src'     => array(
                'label'           => esc_html__( 'Image', 'dede-designvox-divi-extension'),
                'type'            => 'upload',
                'description'     => esc_html__( 'Upload your desired image, or type in the URL to the image', 'dede-designvox-divi-extension'),
                'upload_button_text' => esc_attr__('Upload an image', 'dede-designvox-divi-extension'),
                'choose_text' => esc_attr__('Choose an Image', 'dede-designvox-divi-extension'),
                'update_text' => esc_attr__('Set as Image', 'dede-designvox-divi-extension'),
                'affects'         => 'alt',
                'toggle_slug'     => 'main_content',
            ),
            'alt' => array(
                'label'           => esc_html__( 'Image Alternative Text', 'dede-designvox-divi-extension' ),
                'type'            => 'text',
                'depends_show_if' => 'on',
                'depends_on'      => array(
                    'src',
                ),
                'description'     => esc_html__( 'This defines the HTML ALT text. A short description of your image can be placed here.', 'dede-designvox-divi-extension' ),
                'toggle_slug'     => 'main_content',
            ),
            'url' => array(
                'label'           => esc_html__( 'Link URL', 'dede-designvox-divi-extension' ),
                'type'            => 'text',
                'description'     => esc_html__( 'Enter the link that you would like this card to direct to.', 'dede-designvox-divi-extension' ),
                'toggle_slug'     => 'main_content',
            ),
        );
    }

}

new DEDE_Card_Item;

简码只是在网站上呈现为字符串，例如：

[dede_card_item _builder_version=”3.14″ title=”#1 card title” desc=”#1 card desc” src=”http://localhost:8888/wp-content/uploads/2018/09/14079861_1202408189819777_4296465020285869305_n.jpg” use_background_color_gradient=”off” background_color_gradient_start=”#2b87da” background_color_gradient_end=”#29c4a9″ background_color_gradient_type=”linear” background_color_gradient_direction=”180deg” background_color_gradient_direction_radial=”center” background_color_gradient_start_position=”0%” background_color_gradient_end_position=”100%” background_color_gradient_overlays_image=”off” parallax=”off” parallax_method=”on” background_size=”cover” background_position=”center” background_repeat=”no-repeat” background_blend=”normal” allow_player_pause=”off” background_video_pause_outside_viewport=”on” text_shadow_style=”none” module_text_shadow_style=”none” box_shadow_style=”none” /][dede_card_item _builder_version=”3.14″ title=”#1 card title” desc=”#1 card desc” src=”http://localhost:8888/wp-content/uploads/2018/09/14079861_1202408189819777_4296465020285869305_n.jpg” use_background_color_gradient=”off” background_color_gradient_start=”#2b87da” background_color_gradient_end=”#29c4a9″ background_color_gradient_type=”linear” background_color_gradient_direction=”180deg” background_color_gradient_direction_radial=”center” background_color_gradient_start_position=”0%” background_color_gradient_end_position=”100%” background_color_gradient_overlays_image=”off” parallax=”off” parallax_method=”on” background_size=”cover” background_position=”center” background_repeat=”no-repeat” background_blend=”normal” allow_player_pause=”off” background_video_pause_outside_viewport=”on” text_shadow_style=”none” module_text_shadow_style=”none” box_shadow_style=”none” /][dede_card_item _builder_version=”3.14″ title=”#1 card title” desc=”#1 card desc” src=”http://localhost:8888/wp-content/uploads/2018/09/14079861_1202408189819777_4296465020285869305_n.jpg” use_background_color_gradient=”off” background_color_gradient_start=”#2b87da” background_color_gradient_end=”#29c4a9″ background_color_gradient_type=”linear” background_color_gradient_direction=”180deg” background_color_gradient_direction_radial=”center” background_color_gradient_start_position=”0%” background_color_gradient_end_position=”100%” background_color_gradient_overlays_image=”off” parallax=”off” parallax_method=”on” background_size=”cover” background_position=”center” background_repeat=”no-repeat” background_blend=”normal” allow_player_pause=”off” background_video_pause_outside_viewport=”on” text_shadow_style=”none” module_text_shadow_style=”none” box_shadow_style=”none” /][dede_card_item _builder_version=”3.14″ title=”#1 card title” desc=”#1 card desc” src=”http://localhost:8888/wp-content/uploads/2018/09/14079861_1202408189819777_4296465020285869305_n.jpg” use_background_color_gradient=”off” background_color_gradient_start=”#2b87da” background_color_gradient_end=”#29c4a9″ background_color_gradient_type=”linear” background_color_gradient_direction=”180deg” background_color_gradient_direction_radial=”center” background_color_gradient_start_position=”0%” background_color_gradient_end_position=”100%” background_color_gradient_overlays_image=”off” parallax=”off” parallax_method=”on” background_size=”cover” background_position=”center” background_repeat=”no-repeat” background_blend=”normal” allow_player_pause=”off” background_video_pause_outside_viewport=”on” text_shadow_style=”none” module_text_shadow_style=”none” box_shadow_style=”none” /]

Answer 1

您只需要忽略$ this-> no_render = true;行；然后在子模块中实现功能渲染。

Answer 2

我尝试创建相同的模块以在模块内添加子项。但是我有另一个问题，当我点击添加子项时，我得到了空弹出窗口 ((( 就像这个 https://prnt.sc/156jfev。我尝试了与作者相同的代码

自定义divi生成器子模块未呈现

2 个答案: