Вопрос или проблема
У меня есть вложенный элемент под названием Hero Slider
. Hero slider
является контейнером и может содержать только Slider item
.
Однако, мой шорткод отображается в бэкенде WPBakery, возможно, указывая на синтаксическую ошибку, но я не вижу ничего, что могло бы вызвать его появление таким образом:
Блок даже не появляется при добавлении нового элемента.
Вот мой пользовательский элемент:
<?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 на бэкэнде, где он должен отображаться в виде блока, а не текста. Давайте разберемся с возможными причинами и решениями.
Возможные причины проблемы
-
Ошибка в синтаксисе шорткода: Если синтаксис шорткода неверен, это может вызвать отображение шорткода в текстовом виде вместо визуального блока. Внимательно проверьте код на наличие ошибок, таких как пропущенные или лишние символы.
-
Конфликты с другими плагинами: Конфликты с другими активированными плагинами могут влиять на работу WPBakery. Попробуйте временно отключить все плагины, кроме WPBakery, и проверьте, сохраняется ли проблема.
-
Кэширование: Иногда кэш может препятствовать корректному отображению изменений. Очистите кеш вашего сайта и браузера.
-
Правильная регистрация элементов: Убедитесь, что ваши элементы
vc_map
зарегистрированы корректно и в нужной последовательности: сначала контейнер, затем его содержимое.
Решение проблемы
-
Проверьте ваш код: Внимательно изучите синтаксис. Например, в вашей функции
tp_heroSlider_html
переменные и строки не должны иметь синтаксическую ошибку. Проверьте использование точек с запятой и других символов. -
Убедитесь в правильности наследования классов: Проверьте, что ваши кастомные классы правильно наследуют
WPBakeryShortCodesContainer
иWPBakeryShortCode
, как в конце вашего кода. -
Настройки WPBakery: Перейдите в настройки WPBakery и убедитесь, что шорткоды разрешены к использованию и корректно отображаются.
-
Изменения в Опциях шорткодов: Если проблема повторяется, внимательно проверьте параметры внутреннего шорткода, такие как
as_child
иas_parent
, они должны быть настроены соответственно (как в приведённом вами коде). -
Ошибки PHP: Включите отображение ошибок и предупреждений PHP, чтобы выяснить, есть ли проблемы на уровне PHP, которые влияют на работу шорткодов.
Техническое обслуживание и поддержка
Рекомендуется регулярно обновлять WPBakery до последней версии, проверять совместимость всех используемых плагинов и тем. Также полезно периодически проводить ревизию пользовательских кодов и шорткодов, чтобы убедиться, что они соответствуют текущим стандартам безопасности и производительности.
Если после выполнения всех указанных шагов проблема остаётся нерешенной, рассмотрите возможность обратиться за помощью к разработчику или сообществу WPBakery для получения более детальной диагностики проблемы.