Wordpress 如何在VisualComposer中为自定义进度条插件创建快捷码？

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>

我们的技能
设计
35%
HTML
80%
PHP
60%

---

我的自定义进度条插件在wordpress后端编辑器中运行良好，但我不明白如何为该插件创建短代码以将其与HTML集成。这就是为什么我不能让它在前端可见。那么，我如何为这个插件创建短代码呢？

您必须在函数中使用add\u shortcode hook添加短代码函数

在vc映射参数中，在基本参数中添加您的短代码，并在参数数组中添加短代码属性

例如，您有自己的带有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" )
         )
      )
   ) );

---

您必须在函数中使用add_shortcode hook添加shortcode函数

在vc映射参数中，在基本参数中添加您的短代码，并在参数数组中添加短代码属性

例如，您有自己的带有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" )
         )
      )
   ) );