如何将全局样式包含到元素中？
我想了解更多关于元素主题开发的知识。我已经设置了header.php，footer.php和index.php，并通过wordpress管理创建了一个新页面。我添加了一个新的小部件，它在我的编辑器中正确显示，但是当我发布页面时，我的全局元素样式没有被应用。我试着搜索文档和搜索，但什么也没找到。我想我需要调用元素函数来实现这个功能。我遗漏了什么？
例如：-e-全局颜色-主色是未定义的。
这是我的档案：
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(); ?>回答 2
Stack Overflow用户
发布于 2021-03-04 19:21:17
我对此做了一些额外的研究。它是元素中的一个bug，还没有修复。最后我做了个解决方案。如果有人需要，请在下面提供。
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;
}Stack Overflow用户
发布于 2021-11-21 16:55:02
如果您查看浏览器开发人员工具检查器，并查看.elementor-kit-X {...} (其中X是元素设置的数字)，您将看到所有指定的__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设置为# see 039。
现在返回并再次编辑您的颜色，但这一次选择一个元素或全局颜色。那就省省吧。重新刷新页面。
您将看到打印在页面上的数据如下所示：
(
[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'];
https://stackoverflow.com/questions/66480115
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号