如何在visual composer中为自定义进度条插件创建简码？

问题描述：

在Visual Composer中有一个名为Progress Bar的内置插件。我想创建一个自己风格的自定义进度条。如何在visual composer中为自定义进度条插件创建简码？

我的自定义进度栏插件代码：

<?php 

    // About Us 2 addons 
    vc_map(array(
     'name'   => __('About Us & Progress Bar', 'f_triangle'), 
     'base'   => 'abt_us_progress_bar', 
     "category"  => __("F Triangle", "f_triangle"), 
     'description' => __('', 'f_triangle'), 
     'params'  => array(
     array(
      'type'   => 'param_group', 
      'heading'  => __('Values', 'f_triangle'), 
      'param_name' => 'values', 
      'description' => __('Enter values for graph - value, title and color.', 'f_triangle'), 
      'group'  => __('Progress Bar', 'f_triangle'), 
      'value'  => urlencode(json_encode(array(
       array(
        'label' => __('Design', 'f_triangle'), 
        'value' => '35', 
       ), 
       array(
        'label' => __('HTML', 'f_triangle'), 
        'value' => '80', 
       ), 
       array(
        'label' => __('PHP', 'f_triangle'), 
        'value' => '60', 
       ), 
      ))), 
      'params' => array(
       array(
        'type'   => 'textfield', 
        'heading'  => __('Label', 'f_triangle'), 
        'param_name' => 'label', 
        'description' => __('Enter text used as title of bar.', 'f_triangle'), 
        'admin_label' => true, 
       ), 
       array(
        'type'   => 'textfield', 
        'heading'  => __('Value', 'f_triangle'), 
        'param_name' => 'value', 
        'description' => __('Enter value of bar.', 'f_triangle'), 
        'admin_label' => true, 
       ), 

      ), 
     ), 
    ) 
    )); 


?>

我的HTML代码：

<div class="col-sm-5 wow fadeInRight" data-wow-duration="1000ms" data-wow-delay="300ms"> 
    <div class="our-skills"> 
     <h2 class="bold">Our Skills</h2> 
     <div class="single-skill"> 
      <h3>Design</h3> 
      <div class="progress"> 
       <div class="progress-bar progress-bar-primary six-sec-ease-in-out" role="progressbar" data-transition="35">35%</div> 
      </div> 
     </div> 
     <div class="single-skill"> 
      <h3>HTML</h3> 
      <div class="progress"> 
       <div class="progress-bar progress-bar-primary six-sec-ease-in-out" role="progressbar" data-transition="80">80%</div> 
      </div> 
     </div> 
     <div class="single-skill"> 
      <h3>PHP</h3> 
      <div class="progress"> 
       <div class="progress-bar progress-bar-primary six-sec-ease-in-out" role="progressbar" data-transition="60">60%</div> 
      </div> 
     </div> 
    </div> 
</div>

我的自定义进度栏插件工作在WordPress后台编辑不错，但我不明白，我怎么能为此插件创建简码以将其与我的HTML集成。这就是为什么我无法在前端显示它。那么，我如何为这个插件创建简码呢？

答

您必须在函数中使用add_shortcode挂钩添加简码功能 https://codex.wordpress.org/Function_Reference/add_shortcode

和VC地图参数添加简码的基础参数，还可以添加简码属性的参数数组 https://wpbakery.atlassian.net/wiki/spaces/VC/pages/524332/vc+map

例如，你有你的自己带foo属性的短码bartag

// [bartag foo="foo-value"] 
add_shortcode('bartag', 'bartag_func'); 
function bartag_func($atts) { 
    extract(shortcode_atts(array(
     'foo' => 'something' 
    ), $atts)); 

    return "foo = {$foo}"; 
} 

vc_map(array(
     "name" => __("Bar tag test", "my-text-domain"), 
     "base" => "bartag", 
     "class" => "", 
     "category" => __("Content", "my-text-domain"), 
     '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", "my-text-domain"), 
      "param_name" => "foo", 
      "value" => __("Default param value", "my-text-domain"), 
      "description" => __("Description for foo param.", "my-text-domain") 
     ) 
    ) 
    ));

如何在visual composer中为自定义进度条插件创建简码？

相关推荐