Elementor Custom Widget (add_control) - 如何在我的数组中获取这些数据？ （背景网址）

Question

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

这是我的代码：

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

一切都好。 控件和小部件工作正常！

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

在我的网站上， css 属性显示： 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

Icon Control 提供了两种访问 Icons 的可能性，第一种是来自 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>';
}