Elementor 自定义小部件颜色控制在实时编辑中不起作用

Question

我正在开发一个自定义小部件，我想向该小部件添加样式配置。我发现的一个小问题是实时编辑中的颜色控制不起作用（它将用于预览和保存后重新加载）。

如下所示，Tab 的标题和内容字体颜色在实时编辑器中没有变化。

当您点击预览时，它按预期工作。

我从 Elementor Developers page 上提供的示例代码开始：

echo '<h2 class="title" style="color: ' . $settings['title_color'] . '"> .. </h2>';

但是我得到的结果与第一部分中描述的相同。

然后我尝试将参数传递给 css class，正如堆栈溢出 post 中所建议的那样。虽然设置成功，但设置不正确。
我的 php 文件：

echo "<p id='narrative' style=' --fontColor : ".$settings['content_color']."'></p>";

在我的 css 文件中：

#narrative {color: var(--fontColor);}

当我检查开发工具时：

我不太确定哪里出了问题，如果有人能指出正确的方向，我将不胜感激。谢谢。

Answer 1

阅读 Elementor Code Reference 上的示例源代码后。

我发现我错过了两个重要的步骤：

在添加新颜色控件时将选择器添加到您的 class 属性：

$this->add_control(
    'border_color',
    [
        'label' => __( 'Border Color', 'elementor' ),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .title' => 'color: {{VALUE}};', <-- add selector
        ],
    ]
);

(重要) 添加_content_template()函数，这个函数是生成实时预览：请注意，此函数中的任何 for 循环都应在 javascript 和 <# #> 中编写，而不是在 render().

<h2 class="title"> .. </h2>';

Elementor 自定义小部件颜色控制在实时编辑中不起作用

Elementor Custom Widget Color Control does not work in live editing

javascript

php

css

wordpress

elementor