1

我曾经为WPBakery Page Builder开发了一个带有插件的wordpress插件，随着时间的推移，我从它的用户那里得到了一些建议，所以决定将其中一些构建到我的插件中......

您可以在https://wordpress.org/plugins/using-visual-composer-support-for-twitter-bootstrap-themes/查看有关该插件用途的更多详细信息

我试图添加一个新元素“Container”（https://getbootstrap.com/docs/4.3/layout/overview/#containers），它几乎可以像 WPBakery Page Builder 中已经存在的“Section”元素一样工作，但有点更少的选择。

您可以在以下链接中查看我为实现上述目标而编写的代码... https://github.com/gitfaraz/WPBakery-Page-Builder-for-Twitter-Bootstrap-Themes/blob/master/bootstrap4 /bs_container.php

以下是该文件中的代码...

add_action('init', 'bs_container'); 
function bs_container() {
    class WPBakeryShortCode_Bs_Container extends WPBakeryShortCodesContainer{

        // Element Init
        public function __construct(){                  
            add_action('vc_before_init', [$this, 'mapping']);
            add_shortcode('bs_container', [$this, 'output']);
        }

        public function mapping(){
            vc_map(array(
                'name' => esc_html__('Container', 'js_composer'),
                'base' => 'bs_container',
                'class' => 'vc_main-sortable-element',
                'show_settings_on_create' => false,
                'category' => esc_html__('Bootstrap', 'js_composer'),
                'icon' => 'vc_icon-vc-section',
                'description' => esc_html__('Group multiple rows in container', 'js_composer'),
                'is_container' => true,
                'js_view' => 'VcSectionView',
//              'as_parent' => array(
//                  'only' => '',
//              ),
//              'as_child' => array(
//                  'only' => '', // Only root
//              ),
                'params' => array(
                    array(
                        'type' => 'checkbox',
                        'heading' => esc_html__( 'Full height section?', 'js_composer' ),
                        'param_name' => 'full_height',
                        'description' => esc_html__( 'If checked section will be set to full height.', 'js_composer' ),
                        'value' => array( esc_html__( 'Yes', 'js_composer' ) => 'yes' ),
                    ),
                    array(
                        'type' => 'el_id',
                        'heading' => esc_html__( 'Section ID', 'js_composer' ),
                        'param_name' => 'el_id',
                        'description' => sprintf( esc_html__( 'Enter element ID (Note: make sure it is unique and valid according to %sw3c specification%s).', 'js_composer' ), '<a href="https://www.w3schools.com/tags/att_global_id.asp" target="_blank">', '</a>' ),
                    ),
                    array(
                        'type' => 'checkbox',
                        'heading' => esc_html__( 'Disable section', 'js_composer' ),
                        'param_name' => 'disable_element',
                        // Inner param name.
                        'description' => esc_html__( 'If checked the section won\'t be visible on the public side of your website. You can switch it back any time.', 'js_composer' ),
                        'value' => array( esc_html__( 'Yes', 'js_composer' ) => 'yes' ),
                    ),
                    array(
                        'type' => 'textfield',
                        'heading' => esc_html__( 'Extra class name', 'js_composer' ),
                        'param_name' => 'el_class',
                        'description' => esc_html__( 'Style particular content element differently - add a class name and refer to it in custom CSS.', 'js_composer' ),
                    ),
                    array(
                        'type' => 'css_editor',
                        'heading' => esc_html__( 'CSS box', 'js_composer' ),
                        'param_name' => 'css',
                        'group' => esc_html__( 'Design Options', 'js_composer' ),
                    )
                )
            ));
        }

        public function output($atts, $content = NULL ) {
            $output = ('<div class="container">'.do_shortcode( shortcode_unautop( $content ) ).'</div>');           
            return $output;
        }
    }

    new WPBakeryShortCode_Bs_Container();
}

我遇到的问题是它没有按我的意愿添加到后端。当我尝试将其添加到后端时，它会添加包装在我不希望发生的 ROW 和 COLUMN 中。我希望它像 WPBakery Page Builder 已经可用的 SECTION 元素一样添加到后端...

如果可以，请从https://github.com/gitfaraz/WPBakery-Page-Builder-for-Twitter-Bootstrap-Themes下载并安装插件文件，以便您更好地理解问题，以便能够提供帮助我以更好的方式实现我想要的。

我知道有人可以以最好的方式帮助我，我很乐意将他/她/他们的名字添加到我的 Wordpress 插件页面上的贡献者和开发者部分的列表中。

我可以使用 'vc_map_update()' ( https://kb.wpbakery.com/docs/inner-api/vc_map_update/ ) 更改已经存在的 SECTION 元素，但这可能会让 WPBakery Page Builder 用户感到恼火，因此想要完全添加新的和独立的 CONTAINER 元素。

请检查我创建的附加快照，以帮助您更好地理解问题...

4

0 回答 0