如何将全局样式包含到 elementor？答案

【问题标题】：How to include global styles to elementor?如何将全局样式包含到 elementor？
【发布时间】：2021-06-03 09:36:34
【问题描述】：

我想了解有关 elementor 主题开发的更多信息。我已经设置了 header.php、footer.php 和 index.php，并通过 wordpress admin 创建了一个新页面。我添加了一个新的小部件，它在我的编辑器中正确显示，但是当我发布页面时，我的全局元素样式没有应用。我尝试搜索文档和谷歌搜索，但一无所获。我假设我需要调用一些 elementor 函数来完成这项工作。我错过了什么？

例如：--e-global-color-primary 未定义

这是我的文件：

header.php

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body <?php body_class(); ?>>
    <?php wp_head(); ?>

footer.php

        <?php wp_footer(); ?>
    </body>
</html>

index.php

<?php get_header(); ?>

<?php the_content(); ?>

<?php get_footer(); ?>

【问题讨论】：

标签： wordpress wordpress-theming elementor

【解决方案1】：

我对此做了一些额外的研究。这是 elementor 中的错误，尚未修复。我最终做了一个解决方法。如果有人需要，请在下面提供。

add_action('the_content', 'load_elementor_style');

function load_elementor_style($content) {
    [
        $primary_color,
        $secondary_color,
        $text_color,
        $accent_color
    ] = get_elementor_colors();
    
    [
        $primary_font,
        $primary_font_weight,
        $secondary_font,
        $secondary_font_weight,
        $text_font,
        $text_font_weight,
        $accent_font,
        $accent_font_weight
    ] = get_elementor_fonts();
    
    $content .= sprintf(
        '
        <style>
            :root {
                --e-global-color-primary: %s !important;
                --e-global-color-secondary: %s;
                --e-global-color-text: %s;
                --e-global-color-accent: %s;
                --e-global-typography-primary-font-family: %s;
                --e-global-typography-primary-font-weight: %s;
                --e-global-typography-secondary-font-family: %s;
                --e-global-typography-secondary-font-weight: %s;
                --e-global-typography-text-font-family: %s;
                --e-global-typography-text-font-weight: %s;
                --e-global-typography-accent-font-family: %s;
                --e-global-typography-accent-font-weight: %s;
            }
        </style>
        ',
        $primary_color,
        $secondary_color,
        $text_color,
        $accent_color,
        $primary_font,
        $primary_font_weight,
        $secondary_font,
        $secondary_font_weight,
        $text_font,
        $text_font_weight,
        $accent_font,
        $accent_font_weight
    );

    return $content;
}

【讨论】：

【解决方案2】：

如果您查看浏览器开发人员工具检查器并查看 CSS 声明底部的 .elementor-kit-X {...}（其中 X 是 elementor 设置的数字），您会看到所有指定的 __globals__，其中也包括您的字体系列。

以这个控件为例：

    // Circle Color
    $this->add_control(
        'list_circle_color', [
            'label' => __('Circle Color', 'vs-elementor-elements'),
            'type' => \Elementor\Controls_Manager::COLOR,
            'default' => __('', 'vs-elementor-elements'),
            'frontend_available' => true,
            'label_block' => true,
            'placeholder' => __('E.g. #11a0c0', 'vs-elementor-elements'),
        ]
    );

接下来，在protected function render(){...} 顶部附近添加此内容：echo'<pre>';print_r($settings);echo'</pre>';

进入编辑模式，为list_circle_color 控件指定非全局颜色。然后保存。现在刷新您的页面。

您将看到您的数据打印在类似于以下内容的页面上：

    (
        [control_item1] => 6000
        [control_item2] => Lorem ipsum
        [list_circle_color] => #AFE039
        [control_itemETC] => Dolor Sit Amet
    )

您会看到 list_circle_color 设置为 #AFE039。

现在返回并再次编辑您的颜色，但这次选择 Elementor 全局颜色。然后保存。新的刷新你的页面。

您将看到您的数据打印在类似于以下内容的页面上：

    (
        [control_item1] => 6000
        [control_item2] => Lorem ipsum
        [__globals__] => Array
            (
                [list_circle_color] => globals/colors?id=13c6ce9
            )
        [list_circle_color] => 
        [control_itemETC] => Dolor Sit Amet
    )

现在如何处理这个？回想一下上面我提到过 Elementor 将您的全局变量存储在 .elementor-kit-N {...} 中？这是 w3schools 的参考资料。

但是你如何得到globals/colors?id=13c6ce9设置的值呢？您可以使用 PHP 的 str_replace 来执行此操作，如下所示：

$list_circle_color_global = $setting['__globals__']['list_circle_color'];
$list_circle_color_global = str_replace('globals/colors?id=','--e-global-color-',$list_circle_color_global);

这将为您提供所需的完整属性结尾的 var，如下所示：

--e-global-color-13c6ce9

现在可以通过小部件中的内部电子表格或作为内联样式进行分配：

.mycircle{ background-color: <?php echo 'var(' . $list_circle_color_global . ')'; ?>; }

最后，如何检查您使用的是全局还是非全局设置的颜色值？使用简单的 if 条件检查 __globals__ 和 list_circle_color：

$circlecolor = $list_circle_color_global ? 'var(' . $list_circle_color_global . ')' : $list_circle_color;

** $list_circle_color 应在指定变量时设置。我之前排除了那个。当您最初在上面指定$list_circle_color_global 时，您还将创建$list_circle_color = $settings['list_circle_color'];

【讨论】：