jack361博客Visual Composer是一款所见即所得的WordPress编辑器，充分利用了shortcode功能，任何人都可以用这个插件制作专业的布局。
这款插件的功能不再赘述，可以看插件介绍。本文主要介绍如何通过代码扩展该插件的功能。
添加shortcode到visual composer编辑器
方法：在主题的functions.php中使用vc_map()添加shortcode。
注意：应先添加shortcode，在运行vc_map()函数。
Step 1. 创建一个shortcode bartag，有两个参数：foo和bar
|
1
2
3
4
5
6
7
8
9
10
|
// [bartag foo="foo-value"]function bartag_func( $atts ) { extract( shortcode_atts( array( 'foo' => 'something', 'bar' => 'something else', ), $atts ) ); return "foo = {$foo}";}add_shortcode( 'bartag', 'bartag_func' ); |
Step 2. 用vc_map()添加bartag shortcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
vc_map( array( "name" => __("Bar tag test"), "base" => "bartag", "class" => "", "category" => __('Content'), 'admin_enqueue_js' => array(get_template_directory_uri().'/vc_extend/bartag.js'), 'admin_enqueue_css' => array(get_template_directory_uri().'/vc_extend/bartag.css'), "params" => array( array( "type" => "textfield", "holder" => "div", "class" => "", "heading" => __("Text"), "param_name" => "foo", "value" => __("Default params value"), "description" => __("Description for foo param.") ) )) ); |
结果如下，点击add element按钮弹出的对话框中，最后一项就是新加入的shortcode
点击该shortcode，弹出的选项中可以看到两个参数foo和bar。
从编辑器中移除shortcode
例如移除Text Block，在主题的functions.php中添加如下代码
|
1
|
vc_remove_element("vc_column_text"); |
如何找到vc_column_text这个ID？
找到js_composer/config/map.php，打开，搜索vc_map，可以看到所有预注册的element。
Text Element的注册代码如下，base参数的值就是我们需要的ID。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/* Text Block---------------------------------------------------------- */vc_map( array( "name" => __("Text Block", "js_composer"), "base" => "vc_column_text", "icon" => "icon-wpb-layer-shape-text", "wrapper_class" => "clearfix", "category" => __('Content', 'js_composer'), "params" => array( array( "type" => "textarea_html", "holder" => "div", "heading" => __("Text", "js_composer"), "param_name" => "content", "value" => __("<p>I am text block. Click edit button to change this text.</p>", "js_composer") ), $add_css_animation, array( "type" => "textfield", "heading" => __("Extra class name", "js_composer"), "param_name" => "el_class", "description" => __("If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.", "js_composer") ) )) ); |
覆盖默认shortcode的输出
要彻底覆盖默认shortcode的输出，最直接的方法是：
- 在当前主题目录下新建vc_templates目录
- 到js_composer/composer/shortcodes_templates/目录下，找到输出文件，copy到主题的vc_templates目录下进行修改即可
例如，修改Text Block的输出，copy vc_column_text.php
更新参数的值
vc_map()调用后，我们仍可以修改传递给每个element的参数，下面的代码就演示了如何给“Call to action” element的color参数添加更多选项。
|
1
2
3
4
5
6
|
//Get current values stored in the color param in "Call to Action" element$param = WPBMap::getParam('vc_cta_button', 'color');//Append new value to the 'value' array$param['value'][__('Super color', 'js_composer')] = 'btn-super-color';//Finally "mutate" param with new valuesWPBMap::mutateParam('vc_cta_button', $param); |
- 获取call to action element中color参数的值
- 给color增加新的颜色选项super color
- 将新的参数列表添加回call to action element中
结果如下图所示
修改Visual Composer使用的css class
visual composer使用一些css class，例如
|
1
2
3
4
|
<div class="wpb_row vc_row-fluid"> <div class="vc_span6 wpb_column column_container"> ... </div> <div class="vc_span6 wpb_column column_container"> ... </div></div> |
过去可以通过后台选项修改，现在只能用程序来，使用filter:vc_shortcodes_css_class，方法如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
function custom_css_classes_for_vc_row_and_vc_column($class_string, $tag) { if ($tag=='vc_row' || $tag=='vc_row_inner') { $class_string = str_replace('vc_row-fluid', 'my_row-fluid', $class_string); } if ($tag=='vc_column' || $tag=='vc_column_inner') { $class_string = preg_replace('/vc_span(d{1,2})/', 'my_span$1', $class_string); } return $class_string;}// Filter to Replace default css class for vc_row shortcode and vc_columnadd_filter('vc_shortcodes_css_class', 'custom_css_classes_for_vc_row_and_vc_column', 10, 2); |
官方文档
http://kb.wpbakery.com/index.php?title=Extend_Visual_Composer
http://kb.wpbakery.com/index.php?title=Category:Visual_Composer