Как я могу отображать вложенные элементы в Visual Composer (WPBakery) для WordPress?

Я пытаюсь сделать некоторые пользовательские элементы для плагина Visual Composer (WP-Bakery) для WordPress.

У меня нет проблем с простыми пользовательскими элементами, но я пытаюсь сделать некоторые вложенные элементы (родительский элемент, содержащий некоторые дочерние элементы). У меня нет проблем с созданием дочерних элементов, и если я создаю их отдельно, они отображаются в WordPress, но когда я пытаюсь создать родительский элемент, я без проблем вижу элементы настройки, но они не отображаются.

Я думаю, что проблема заключается в функции рендеринга (html) в родительском классе, но я не могу ее решить.

РОДИТЕЛЬСКИЙ КЛАСС

    <?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();

ДЕТСКИЙ КЛАСС

<?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();

1 584
2

Ответы:

Возникла проблема с названием шорткода контейнера. Это должно было быть

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

Но есть еще проблема. У меня проблема с функцией do_shortcode_tag

Attempting to parse a shortcode without a valid callback

Кто-нибудь знает, как я могу это решить?


Решено

Я решил это. Вызов шорткода был неправильным, потому что он также имел неправильное имя функции.

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

должно быть

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