有时我为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元素。
Please check the attached snap which I've created to help you better understand the issue...