如何在 Visual Composer (WPBakery) 上为 wordpress 呈现嵌套元素？

Question

我正在尝试为 wordpress 的 Visual Composer 插件 (WP-Bakery) 做一些自定义元素。

我对简单的自定义元素没有问题，但我正在尝试做一些嵌套元素（一个 parent 包含一些 child 元素）。我创建 child 元素没有问题，如果我自己创建它们，它们会显示在 wordpress 上，但是当我尝试创建 parent 元素时，我可以看到设置元素没有问题，但它没有呈现.

我认为问题出在 parent class 上的渲染函数 (html)，但我无法解决它。

PARENT CLASS

    <?php

class vcInfoCardContainer extends WPBakeryShortCodesContainer {

    // Element Init
    function __construct() {
        add_action( 'init', array( $this, 'vc_infocardcontainer_mapping' ) );
        add_shortcode( 'vc_infocard', array( $this, 'vc_infocardcontainer_html' ) );
    }

    // Element Mapping
    public function vc_infocardcontainer_mapping() {

        // Stop all if VC is not enabled
        if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
        }

        // Map the block with vc_map()
        vc_map(
        array(
            'name' => __('VC Info Card Container', 'ex5_vc_elements'),
            'base' => 'vc_infocardcontainer',
            'description' => __('Info Card Container for VC', 'ex5_vc_elements'),
            'category' => __('Ex5 Elements', 'ex5_vc_elements'),
            'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
            'as_parent' => array('only' => 'vc_infocard'),
            'is_container' => true,
            'js_view' => 'VcColumnView',
            'params' => array(

              array(
                    'type' => 'textfield',
                    'heading' => __('Button text','ex5_vc_elements'),
                    'param_name' => 'button_text',
                    'description' => __('Default is \'Más info\'', 'ex5_vc_elements'),
                    'group' => 'Button',
                )
            ),
        ));
    }

    //render
    public function vc_infocard_html( $atts, $content = null ) {

        // Params extraction
        extract(
            shortcode_atts(
                array(
                ),
                $atts
            )
        );

        $html = '<div class="ex5-vc-info-card-container">' . do_shortcode($content) . '</div>';

        return $html;

    }

}

new vcInfoCardContainer();

CHILD CLASS

<?php

class vcInfoCard extends WPBakeryShortCode {

    // Element Init
    function __construct() {
        add_action( 'init', array( $this, 'vc_infocard_mapping' ) );
        add_shortcode( 'vc_infocard', array( $this, 'vc_infocard_html' ) );
    }

    // Element Mapping
    public function vc_infocard_mapping() {

        // Stop all if VC is not enabled
        if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
        }

        // Map the block with vc_map()
        vc_map(
        array(
            'name' => __('VC Info Card', 'ex5_vc_elements'),
            'base' => 'vc_infocard',
            'description' => __('Info Card for VC', 'ex5_vc_elements'),
            'category' => __('Ex5 Elements', 'ex5_vc_elements'),
            'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
            'as_child' => array('only' => 'vc_infocardcontainer'),
            'params' => array(
                array(
                    'type' => 'attach_image',
                    'heading' => __( 'Main image', 'ex5_vc_elements' ),
                    'param_name' => 'image',
                    'group' => 'Images',
                ),
                array(
                    'type' => 'attach_image',
                    'heading' => __( 'Icon', 'ex5_vc_elements' ),
                    'param_name' => 'icon',
                    'group' => 'Images',
                ),
                array(
                    'type' => 'colorpicker',
                    'heading' => __( 'Icon background color', 'ex5_vc_elements' ),
                    'param_name' => 'icon_background_color',
                    'value' => __( '#000000', 'ex5_vc_elements' ),
                    'group' => 'Images',
                    ),
                array(
                    'type' => 'textfield',
                    'heading' => __('Title','ex5_vc_elements'),
                    'param_name' => 'Title',
                    'group' => 'Texts',
                ),

                array(
                    'type' => 'textfield',
                    'heading' => __( 'Text', 'ex5_vc_elements' ),
                    'param_name' => 'text',
                    'group' => 'Texts',
                ),
                array(
                    'type' => 'checkbox',
                    'class' => 'one-third',
                    'heading' => __( 'Show link button', 'ex5_vc_elements' ),
                    'param_name' => 'show_button',
                    'value' => 'show',
                    'description' => __( 'Indicates if link button is shown)', 'ex5_vc_elements' ),
                    'group' => 'Button',
                ),
              array(
                    'type' => 'textfield',
                    'heading' => __('Button text','ex5_vc_elements'),
                    'param_name' => 'button_text',
                    'description' => __('Default is \'Más info\'', 'ex5_vc_elements'),
                    'group' => 'Button',
                ),
                array(
                    'type' => 'vc_link',
                    'heading' => __( 'Button link', 'ex5_vc_elements' ),
                    'param_name' => 'button_link',
                    'group' => 'Button',
                ),
            ),
        ));
    }

    //render
    public function vc_infocard_html( $atts ) {

        // Params extraction
        extract(
            shortcode_atts(
                array(
                    'image'                 => '',
                    'icon'                  => '',
                    'icon_background_color' => '#000000',
                    'title'                 => '',
                    'text'                  => '',
                    'show_button'           => '',
                    'button_text'           => 'Más info',
                    'button_link'           => '',
                ),
                $atts
            )
        );
        if (empty($button_text)) $button_text = __( 'Más info', 'ex5_vc_elements' );

        if ($show_button === 'true') {
            if (!empty($button_link)) {
                $button = '<div class="ex5-vcic-button">
                            <a href="'. $button_link .'" target="_self" class="ex5-vcic-link" title="' . $button_text . '">
                                <span class="ex5-vcic-button-text">' . $button_text . '</span>
                            </a>
                        </div>';
            } else {
                $button = '<div class="ex5-vcic-button">
                            <span class="ex5-vcic-button-text">' . $button_text . '</span>
                        </div>';
            }
        } else {
            $button = '';
        }

        $image = wp_get_attachment_image_src($image);
        $icon = wp_get_attachment_image_src($icon);

        //vc_build_link(
        $html = '
            <div class="ex5-vc-infocard">
                <div class="ex5-vcic-content">
                    <div class="ex5-vcic-image">
                        <span>
                            <img src="' .  $image[0] . '" title="history_inner_14" alt="http://oxigeno.">
                        </span>
                    </div>
                    <div class="ex5-vcic-icon" style="background-color: ' . $icon_background_color . '">
                        <img src="' . $icon[0] . '" />
                    </div>
                    <header class="ex5-vcic-headline">
                        <h3>' . $title . '</h3>
                    </header>
                    <div class="ex5-vcic-text">
                        <p>' . $text . '</p>
                    </div>' .
                    $button
                . '</div>
                </div>';

        return $html;

    }

}

new vcInfoCard();

Answer 1

容器简码名称有问题。必须是

        add_shortcode( 'vc_infocardcontainer', array( $this, 'vc_infocardcontainer_html' ) );

但是还是有问题。 do_shortcode_tag 函数

有问题

Attempting to parse a shortcode without a valid callback

有人知道我该如何解决吗？

Answer 2

我已经解决了。短代码调用是错误的，因为它的函数名也有误。

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

必须是

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

如何在 Visual Composer (WPBakery) 上为 wordpress 呈现嵌套元素？

How can I render Nested elements on Visual Composer (WPBakery) for wordpress?

wordpress

visual-composer

wpbakery