元素自定义小部件(add_control) -如何得到这个数据在我的数组?(背景URL)

Question

我已经创建了一个自定义element小部件，它具有用于为滑块选择SVG图标的特定控件。

下面是我的代码:

$this->add_control(
'arrows_icon_left',
[
'label' => esc_html__( 'Arrow left' ),
'type' => ElementorControls_Manager::ICONS,
'default' => [
'value' => 'fas fa-chevron-left',
'library' => 'solid',
],
'selectors' => [
'{{WRAPPER}} .swiper-button-prev' => 'background-image: url({{VALUE}});',
],
]
);

一切正常。控件和小部件工作正常!

除了我不知道如何访问后台URL路径。(

在我的网站上，css属性display: background-image(Array())

查看浏览器检查器

所以，我把这个测试

var_dump($settings[])

我现在得到这个:

["arrows_icon_left"]=>
array(2) {
["value"]=>
array(2) {
["url"]=>
string(66) "//website.local/files/2021/04/check-mark.svg"
["id"]=>
int(1128)
}
["library"]=>
string(3) "svg"
}

当我测试:

var_dump($settings[arrows_icon_left][value][url])

我访问URL没问题。

所以我尝试了很多方法来访问它，比如VALUE:

VALUE.url

VALUE.value.url

{{VALUE}} {{URL}}

{{VALUE}} {{VALUE}} {{URL}}

但是什么都没用。(((

你能帮我一下吗?

Answer 1

图标控件提供了两种访问图标的可能性，第一种是来自fa库的图标字体，它由::before集成，为此您需要将值(这是一个类)添加到包装器元素。

第二种是自定义图标，它集成为SVG图像。

我不知道你是否需要区分这两个，因为在你的问题中，你要求自定义图标。据我所知，在控件数组的选择器键中没有占位符。

我通过访问渲染方法中的值来解决这个问题，如下所示:

if ( !is_array( $settings['icon']['value'] ) and !empty( $settings['icon']['value'] ) ) {
echo '<div class="wrapper ' . $settings['icon']['value'] . '"></div>';
} elseif ( is_array( $settings['icon']['value'] ) and !empty( $settings['icon']['value']['url'] ) ) {
echo '<div class="wrapper"><img src="' . $settings['icon']['value']['url'] . '" /></div>';
}