Visual Composer定制方法

Visual Composer是一款所见即所得的WordPress编辑器，充分利用了shortcode功能，任何人都可以用这个插件制作专业的布局。

这款插件的功能不再赘述，可以看插件介绍。本文主要介绍如何通过代码扩展该插件的功能。

添加shortcode到visual composer编辑器

方法：在主题的functions.php中使用vc_map()添加shortcode。

注意：应先添加shortcode，在运行vc_map()函数。

Step 1. 创建一个shortcode bartag，有两个参数：foo和bar

// [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

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中添加如下代码

vc_remove_element("vc_column_text");

如何找到vc_column_text这个ID？

找到js_composer/config/map.php，打开，搜索vc_map，可以看到所有预注册的element。

Text Element的注册代码如下，base参数的值就是我们需要的ID。

/* 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的输出，最直接的方法是：

1. 在当前主题目录下新建vc_templates目录
2. 到js_composer/composer/shortcodes_templates/目录下，找到输出文件，copy到主题的vc_templates目录下进行修改即可

例如，修改Text Block的输出，copy vc_column_text.php

更新参数的值

vc_map()调用后，我们仍可以修改传递给每个element的参数，下面的代码就演示了如何给“Call to action” element的color参数添加更多选项。

//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 values
WPBMap::mutateParam('vc_cta_button', $param);

1. 获取call to action element中color参数的值
2. 给color增加新的颜色选项super color
3. 将新的参数列表添加回call to action element中

结果如下图所示

修改Visual Composer使用的css class

visual composer使用一些css class，例如

<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，方法如下：

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_column
add_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