在 elementor 制作的特定元素中加载样式“example.css”

Question

我正在寻找一种解决方案，仅当该元素在页面上可见时才加载使用

elementor

制作的元素的样式表 'assets/styles/example.css'。该元素是一个自定义模板，ID 为 302。

我不想使用elementor的“自定义CSS”功能，因为稍后我需要在多个网站上部署对此文件的更新。

我可以访问我的文件

functions.php

。

帖子ID是302。我尝试了以下条件：

is_page()

，

is_singular()

，但没有被识别。

define('KS_CSS_PATH', get_stylesheet_directory_uri() . '/assets/css/');

if (! function_exists('load_example_style')):
  function load_example_style() {
    // if (is_page(302)) {
    wp_enqueue_style('ks-example-css', KS_CSS_PATH . 'example.css');
    // }
  }
endif;
add_action('wp_enqueue_scripts', 'load_example_style', 21);

实际上，这是在每个页面中加载的。感谢任何可能的帮助！

Answer 1

要仅将特定 Elementor 元素的自定义 CSS 排入队列，请使用 Elementor 挂钩而不是

wp_enqueue_scripts

。

Elementor 的

elementor/frontend/widget/before_render

操作挂钩仅当特定小部件在页面上呈现或可用时才能将 CSS 排入队列。

尝试以下代码：

function gs_enqueue_custom_css_for_elementor_element( $element ) {
    wp_register_style( 'custom-elementor-heading-css', get_stylesheet_directory_uri() . '/css/custom-elementor-heading.css', array(), '1.0.0' );
    // check if heading element adds in the page
    if ( 'heading' === $element->get_name() ) { //replace 'heading' with your widget name
        wp_enqueue_style( 'custom-elementor-heading-css');
    }
}
add_action( 'elementor/frontend/widget/before_render', 'gs_enqueue_custom_css_for_elementor_element' );

给定的代码会将CSS文件排入队列

custom-elementor-heading.css

如果页面有标题元素或小部件

注意： 将上述代码添加到子主题的functions.php中

代码已经过测试，可以按要求工作。