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>';
}