Пользовательский шорткод отображается в бэкенде WPBakery, а не в блоке.

Вопрос или проблема

У меня есть вложенный элемент под названием Hero Slider. Hero slider является контейнером и может содержать только Slider item.

Однако, мой шорткод отображается в бэкенде WPBakery, возможно, указывая на синтаксическую ошибку, но я не вижу ничего, что могло бы вызвать его появление таким образом:

enter image description here

Блок даже не появляется при добавлении нового элемента.

Вот мой пользовательский элемент:

<?php

if (!defined('ABSPATH')) die('-1');

class vcHeroSlider extends WPBakeryShortCode {

    // 1. Определите константы во время компиляции (используется в маппинге)
    const slug = 'tp_hero_slider';
    const base="tp_hero_slider";

    // 2. Интеграция с хуками
    function __construct() {
        // Для обертки родительского элемента
        add_action( 'vc_before_init', array( $this, 'tp_heroSlider_mapping' ) );
        add_shortcode( 'tp_hero_slider', array( $this, 'tp_heroSlider_html' ));
        // Для дочерних / вложенных элементов
        add_action( 'vc_before_init', array( $this, 'tp_heroSlider_content_mapping' ) );
        add_shortcode( 'tp_hero_slider_content', array( $this, 'tp_heroSlider_content_html' ));
    }

    // 3. Маппинг родительского элемента
    public function tp_heroSlider_mapping() {
        vc_map(
            array(
                'icon'                    => get_template_directory_uri().'/assets/src/images/html.svg',
                'name'                    => __( 'Hero Slider' , "text-domain" ),
                'base'                    => 'tp_hero_slider',
                'description'             => __( 'Добавьте slick slider на вашу страницу.', "text-domain" ),
                'as_parent'               => array('only' => 'tp_hero_slider_content'), // установить как родитель для карты/HTML содержимого
                'content_element'         => true,
                'show_settings_on_create' => false,
                "js_view"                 => 'VcColumnView',
                "category"                => __('Hero', "text-domain" ),
                'params'                  => array(
                    array(
                        "type" => "textfield",
                        "heading" => __( "Дополнительное имя класса", "text-domain" ),
                        "param_name" => "el_class",
                        "description" => __( "Дополнительный класс для кастомизации через CSS", "text-domain" )
                    ),
                    array(
                        'type' => 'css_editor',
                        'heading' => __( 'Индивидуальные опции дизайна', "text-domain" ),
                        'param_name' => 'css',
                        'group' => __( 'Опции дизайна', "text-domain" ),
                    ),
                ),
            )
        );
    }

    // 4. Маппинг дочернего элемента
    public function tp_heroSlider_content_mapping() {
        vc_map(
            array(
                'icon'                      => get_template_directory_uri().'/assets/src/images/html.svg',
                'name'                      => __('Элемент слайдера', "text-domain" ),
                'base'                      => 'tp_hero_slider_content',
                'description'               => __( 'Добавьте слайд в hero.', "text-domain" ),
                "category"                  => __('Content', 'text-domain'),
                'content_element'           => true,
                'as_child'                  => array('only' => 'tp_hero_slider'),
                'params'                    => array(

                    array(
                        'type' => 'textfield',
                        'heading' => __( 'Заголовок', 'text-domain'),
                        'param_name' => 'title',
                        'value' => esc_html__( '', 'text-domain'),
                        'admin_label' => true,
                        'weight' => 0,
                        'group' => __( 'Content', 'my-text-domain' ),
                    ),

                    array(
                        'type' => 'textarea',
                        'class' => '',
                        'heading' => __( 'Краткое описание', 'text-domain'),
                        'param_name' => 'standfirst',
                        'value' => esc_html__( '', 'text-domain'),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => __( 'Content', 'my-text-domain' ),
                    )

                ),
            )
        );
    }

    // 5. Разметка родительского элемента
    public function tp_heroSlider_html( $atts, $content = null) {
        $output="";
        $el_class="";

        extract(
            shortcode_atts(
                array(
                    'el_class'  => '',
                ), $atts
            )
        );

        static $i = 0;

        $output="<div id="slickslider-".$i++.'" class="Slick-Slider heroSlider">'. do_shortcode($content) .'</div>';

        return $output;

    }

    // 6. Разметка дочернего элемента
    public function tp_heroSlider_content_html( $atts, $content = null ) {

    $output="";

        extract(
            shortcode_atts(
                array(
                    'title'                 => '',
                    'standfirst'            => '',
                ), $atts
            )
        );

        $background_img = wp_get_attachment_image_src(intval($background_img), 'full');
        $background_img = $background_img[0];

        $output .= '
                    <!-- Slide -->
                    <div class="heroSlider__slide">
                    <div class="overlay"></div>
                    ';

        $output .= '
                        <div class="container">
                            <div class="row justify-content-center justify-content-lg-start">
                                <div class="col-10 col-md-6 d-flex flex-column text-center text-lg-left content">';

                                    if (!empty($title)) { 
                                        $output .= '<h1>' . $title . '</h1>'; 
                                    }

                                    if (!empty($standfirst)) {  
                                        $output .= '<p class="standfist">' . $standfirst . '</p>'; 
                                    }

        $output .= '
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- Slide -->
                ';

        return $output;

    }

}

// 7. Добавление функциональности контейнера (чтобы вы могли выбрать элемент слайдера внутри элемента hero_slider)
if(class_exists('WPBakeryShortCodesContainer')){
    class WPBakeryShortCode_tp_hero_slider extends WPBakeryShortCodesContainer {}
}

if(class_exists('WPBakeryShortCode')){
    class WPBakeryShortCode_tp_hero_slider_content extends WPBakeryShortCode {}
}

new vcHeroSlider(); ?>

с последнего раза, когда я использовал WP Bakery, шорткоды не отображались в бэкенде (в отличие от elementor, например). Если это также отображается так на фронтенде, то вам нужно убедиться, что вы выбрали вкладку ‘текст’, а не ‘визуальную’ для текстового блока, в который вы добавили шорткод (на визуальной он иногда экранирует скобки).

Ответ или решение

Вопрос касается проблемы отображения пользовательского шорткода в WPBakery на бэкэнде, где он должен отображаться в виде блока, а не текста. Давайте разберемся с возможными причинами и решениями.

Возможные причины проблемы

  1. Ошибка в синтаксисе шорткода: Если синтаксис шорткода неверен, это может вызвать отображение шорткода в текстовом виде вместо визуального блока. Внимательно проверьте код на наличие ошибок, таких как пропущенные или лишние символы.

  2. Конфликты с другими плагинами: Конфликты с другими активированными плагинами могут влиять на работу WPBakery. Попробуйте временно отключить все плагины, кроме WPBakery, и проверьте, сохраняется ли проблема.

  3. Кэширование: Иногда кэш может препятствовать корректному отображению изменений. Очистите кеш вашего сайта и браузера.

  4. Правильная регистрация элементов: Убедитесь, что ваши элементы vc_map зарегистрированы корректно и в нужной последовательности: сначала контейнер, затем его содержимое.

Решение проблемы

  1. Проверьте ваш код: Внимательно изучите синтаксис. Например, в вашей функции tp_heroSlider_html переменные и строки не должны иметь синтаксическую ошибку. Проверьте использование точек с запятой и других символов.

  2. Убедитесь в правильности наследования классов: Проверьте, что ваши кастомные классы правильно наследуют WPBakeryShortCodesContainer и WPBakeryShortCode, как в конце вашего кода.

  3. Настройки WPBakery: Перейдите в настройки WPBakery и убедитесь, что шорткоды разрешены к использованию и корректно отображаются.

  4. Изменения в Опциях шорткодов: Если проблема повторяется, внимательно проверьте параметры внутреннего шорткода, такие как as_child и as_parent, они должны быть настроены соответственно (как в приведённом вами коде).

  5. Ошибки PHP: Включите отображение ошибок и предупреждений PHP, чтобы выяснить, есть ли проблемы на уровне PHP, которые влияют на работу шорткодов.

Техническое обслуживание и поддержка

Рекомендуется регулярно обновлять WPBakery до последней версии, проверять совместимость всех используемых плагинов и тем. Также полезно периодически проводить ревизию пользовательских кодов и шорткодов, чтобы убедиться, что они соответствуют текущим стандартам безопасности и производительности.

Если после выполнения всех указанных шагов проблема остаётся нерешенной, рассмотрите возможность обратиться за помощью к разработчику или сообществу WPBakery для получения более детальной диагностики проблемы.

Оцените материал
Добавить комментарий

Капча загружается...