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

bartag-testing1

点击该shortcode,弹出的选项中可以看到两个参数foo和bar。

bartag-testing2

从编辑器中移除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中

结果如下图所示

call-to-action

修改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

18条留言

  1. 博主您好哈,Visual Composer这个插件你会优化吗?我现在主题里自带这个插件,但是因为它都延迟1.5秒左右,伤不起啊。所以想咨询咨询您是否有针对性的解决方法。

    1. 1.5秒应该不仅仅是visual composer的问题,因为这个插件原本没这么慢的。
      主题会对插件进行定制,比如增加一些和主题搭配的小部件,如果这些优化不足,就可能导致网站速度变慢。

      你可以先看看站点的内存使用率和sql查询次数,安装debug bar插件就能看。如果启用visual composer后sql查询次数明显变多,可能就是定制的部分有问题。

  2. 请问博主现在可以接项目了吗? 有 编辑器二次开发的项目

  3. 请问附带visual composer的theme好不好?
    听说如果wordpress再出新版本而刚好不兼容visual composer,那么你需要回到你的theme卖家哪里升级VC?

    1. 自带vc的主题一般会深度定制,这样更新主题基本就是唯一途径。

  4. 对了,博主。我现在自己创建了一个主题,但是visual composer好像有些功能不兼容。 比如row变成3列,我的主题就出现问题了,想问下这是什么回事么? 其他主题row变3列都没问题,我的主题变3列就成了3横。

    1. 这个只能具体看一下才知道,比如你的outer div可能有什么特殊的样式,或者你主题影响了row的样式。

  5. 终于找到定制的文章了。 我想问一下 我使用visual composer的tab功能,他的默认是显示在左上角的,我想把他挪到中间来 怎么实现呢?求教!

    1. 我没研究过tab element,从你的描述看,应该可以通过定制css实现吧。

      1. visual composer编辑那有个CSS的 是不是在那里编辑? 我试过敲代码进去 不行。 有没有关于这个插件CSS的设置? 是导入CSS样式表还是直接在CSS那个框里面写CSS样式就行?

        1. 直接在主题样式表里覆盖规则就行了

          1. – – 问题是 visual composer不是有他自己独有的代码么 类似[vc_text】这些,直接在里面加入class就行?

        2. 改样式又不涉及html结构,直接写主题里就得了。很多主题自带这插件,定制的都看不出是这插件了

          1. 好的,谢谢啦 -。-

评论功能已关闭