Question

我有一个简单的短代码，使用Visual Composer创建一个小元素，能够选择背景颜色和文本颜色等。选择链接和输入实际文本工作正常但background或color未设置??

这是代码：

add_shortcode( 'ColoredHelper', array( $this, 'renderColoredHelper' ) );

// add a colored helper ribbon
        vc_map( array(
            "name" => __("BS - Colored helper ribbon", 'vc_extend'),
            "description" => __("Add a colored helper ribbon", 'vc_extend'),
            "base" => "ColoredHelper",
            "class" => "",
            "controls" => "full",
            "category" => __('Beaglestreet', 'js_composer'),
            "params" => array(
              array(
                  "type" => "colorpicker",
                  "holder" => "div",
                  "class" => "",
                  "heading" => __("Background color", 'vc_extend'),
                  "param_name" => "BGcolor",
                  "value" => '#ffb434', //Default background color
                  "description" => __("Choose the background color", 'vc_extend')
              ),
              array(
                  "type" => "textfield", // it will bind a textfield in WP
                  "heading" => __("Anchor name", "vc_extend"),
                  "param_name" => "title",
                  "value" => __("NameHere"),
                  "description" => __("Add page title", 'vc_extend')
              ),
              array(
                  "type" => "colorpicker",
                  "holder" => "div",
                  "class" => "",
                  "heading" => __("Text color", 'vc_extend'),
                  "param_name" => "TEXTcolor",
                  "value" => '#fff', //Default background color
                  "description" => __("Choose the text color", 'vc_extend')
              ),
              array(
                  "type" => "vc_link", // it will bind a textfield in WP
                  "heading" => __("Link", "vc_extend"),
                  "param_name" => "link",
                  "description" => __("Link for the helper", 'vc_extend')
              ),
            )
        ) );

// add a colored helper ribbon
    public function renderColoredHelper( $atts, $content = null ) {

      $a = shortcode_atts( array(
          'title' => 'title',
          'BGcolor' => 'BGcolor',
          'TEXTcolor' => 'TEXTcolor',
          'link' => 'link'
      ), $atts );

      $title = $a["title"];
      $BGcolor = $a["BGcolor"];
      $TEXTcolor = $a["TEXTcolor"];
      $link = $a["link"];

      $href = vc_build_link( $link ); // build the link

      $end_content .= '<a href="'.$href["url"].'">';
      $end_content .= '<div class="helper__ribbon" style="background: '.$BGcolor.'">'; // <-- BGcolor not set
      $end_content .= '<div class="helper__title" style="color: '.$TEXTcolor.'">'.$title.'</div>'; <-- TEXTcolor not set
      $end_content .= '<i class="fa fa-arrow-right"></i></div></a>';

      return $end_content;

    }

我错过了什么明显的东西吗？

Answer 1

我使用以下内容，它适用于我

extract( shortcode_atts( array(
    //Load our inputs for using.
    'type' => 'type',
    'name' => 'name',
    'role' => 'role',
    'image' => 'image',
    'phone' => 'phone',
    'email' => 'email',
    'colour' => 'colour'
    ), $type ) );
$html_r .= "<h1 class='profile-name'>{$name}</h1>";

只要你开始使用“它就会让你将{at name}称为<$ name}

Answer 2

自视觉编辑器中的4.8以来，可以避免写shortcode_attr(bunch of array in attributes)

相反，你可以写：

public function renderColoredHelper( $atts, $content = null ) {

      $a = vc_map_get_attributes('ColoredHelper', $atts);
      var_dump($a); // will have all attributes defaults+modified
...

Wordpress短代码没有获取所有属性

2 个答案: