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

【问题标题】：Elementor Custom Widget Color Control does not work in live editingElementor 自定义小部件颜色控制在实时编辑中不起作用
【发布时间】：2021-09-16 06:53:15
【问题描述】：

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

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

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

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

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

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

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

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

在我的 css 文件中：

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

当我查看开发工具时：

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

【问题讨论】：

标签： javascript php css wordpress elementor

【解决方案1】：

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

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

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

$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() 中使用 <# #> 而不是 php。

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

【讨论】：