如何在Wordpress中正确出列某些Elementorcss文件

我使用 Elementor 来构建我的网站,并且有很多我没有使用的功能,但是在我的网站的每个页面上都加载了很多功能。所以我决定将我没有在我的子主题的 functions.php 中使用的 css 文件出列,并将我只部分使用的 css 文件出列,用文件的“清理”版本替换它们。

我使用 Elementor 来构建我的网站,并且有很多我没有使用的功能,但是在我的网站的每个页面上都加载了很多功能。所以我决定将我没有在我的子主题的 functions.php 中使用的 css 文件出列,并将我只部分使用的 css 文件出列,用文件的“清理”版本替换它们。

这就是我想要开始做的:

function adg_dequeue_unnecessary_files() {
    wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
        wp_deregister_style( 'elementor-frontend' );
    wp_register_style( 'new-elementor-frontend-css', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
        wp_enqueue_style( 'new-elementor-frontend-css' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );

但是,虽然我的功能的第二部分很好地添加了我的新自定义 css 文件,但第一部分删除了几乎 10 个其他 Elementor 的 css 文件以及我真正想要出列的文件。

这是要出列的文件列表:

custom-frontend.min.css

post-1501.css(这是我在进行这些更改时正在查看的页面的 css 文件)

前端 legacy.min.css

post-1396.css(一些全局 Elementor 的 css)

post-3556.css(这个和的 5 是我在我的网站上使用的插件的模板)

post-4473.css

post-5653.css

post-3489.css

post-3464.css

post-3458.css

我猜它与处理程序 'elementor-frontend' 不正确有关。custom-frontend.min.css 文件在 HTML 代码的链接标记中有 'elementor-frontend-css' ID,所以我从那里猜测处理程序。

有谁知道我怎么能出队只自定义 frontend.min.css 文件?

之后,我想出列这些文件以及:

animations.min.css

elementor-icons.min.css

global.css

前端 legacy.min.css

swiper.min.js

我已经浏览了几天,我开始感到失落,所以任何帮助将不胜感激!

2

您可以使用wp_deregister_stylewp_dequeue_style将 Elementor CSS 文件出列。为此,您需要传递 CSS 文件句柄名称。您可以使用以下代码将 Elementor 插件global.css文件出列。

function dequeue_elementor_global__css() {
  wp_dequeue_style('elementor-global');
  wp_deregister_style('elementor-global');
}
add_action('wp_print_styles', 'dequeue_elementor_global__css', 9999);

这里elementor-global是 global.css 文件的句柄名称。您可以通过样式表 ID 获取任何文件句柄名称。
例如:如果任何样式表 ID 是elementor-global-css,则此文件句柄将是elementor-global

1

我的理解是,所有 Elementor 前端样式,例如你的 post-1234.css 文件,是 'elementor-frontend' 的孩子,这意味着如果你卸载它,他们都不会加载。

如果您加载具有相同名称的新的,优化的 frontend.min.css 文件,那么它应该工作。

例如

function adg_dequeue_unnecessary_files() {
    wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
        wp_deregister_style( 'elementor-frontend' );
    wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
        wp_enqueue_style( 'elementor-frontend' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );

另外。你不能只将你的 custom-frontend.min.css 添加到你的子主题中的相关位置,它会默认覆盖父主题版本吗?

-1

这似乎工作。在几页和帖子上测试:

add_action( 'elementor/frontend/after_enqueue_styles', function() { 
    wp_deregister_style( 'elementor-frontend' );
    wp_dequeue_style( 'elementor-frontend' );
    wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
   wp_enqueue_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
} );

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(781)
Windows身份验证:允许哪些用户
上一篇
将OAuth2.0身份验证添加到 RESTfulAPI
下一篇

相关推荐

  • cssflex布局:和2个段落 标题 段落1 段落2

    CSS Flexbox 布局是一种弹性布局,用于定义元素在网页中的位置,并使其能够自动拉伸以适应不同尺寸的屏幕。它可以帮助我们轻松地创建响应式布局,以适应不同的屏幕尺寸。…

    2024-03-15 05:51:54
    0 75 27
  • jsp引入css:标题 这是一个标题

    jsp引入css的方法有以下几种:在页面头部使用标签引入css文件,代码如下:…

    2023-02-17 08:28:19
    0 37 61
  • css 媒体优化你的网站以适应各种设备

    CSS 媒体是一种用于为不同设备提供不同 CSS 样式的机制。它允许我们根据屏幕大小、设备类型等因素,使用不同的 CSS 样式。…

    2023-02-11 06:55:18
    0 80 58
  • sass转css:This is a Title

    Sass(Syntactically Awesome Style Sheets)是一种强大的CSS扩展语言,它允许你使用变量、嵌套、混合、导入等高级CSS特性,从而更加高效地书写样式表。…

    2023-08-21 08:53:28
    0 63 80
  • jquery的css:Unlock the Power of jQuery CSS to Enhance Your Web De

    jQuery的css()函数用于设置或返回元素的CSS属性值。该函数可以接受两个参数,第一个参数是CSS属性名,第二个参数是CSS属性值。…

    2023-02-23 14:15:41
    0 55 71
  • css3动画网站让你的网页变得更加生动有趣!

    CSS3动画网站是一种使用CSS3属性来创建动画效果的网站。它可以让你创建出令人惊叹的动画效果,而无需使用任何JavaScript代码或复杂的图像。…

    2023-03-01 02:25:26
    0 45 91
  • jq获取css属性值:使用jQuery获取CSS属性值的技巧

    jQuery可以使用css()方法获取CSS属性值,代码如下:上面的代码将会获取id为“test”的元素的背景颜色的属性值。…

    2023-05-10 15:31:04
    0 10 98
  • crestron是什么牌子领先的家庭自动化技术提供商

    Crestron是一家全球领先的自动化和控制技术公司,专注于提供先进的系统解决方案,用于智能家居,企业,教育,医疗和公共空间。 Crestron的产品结合了最新的技术,如触摸屏,遥控器,智能手机应用程序,智能家居技术,网络解决方案,多媒体控制和投影仪控制等,可提供完整的控制和自动化解决方案。 Crestron的核心代码是“CTRL”,它是Crestron的控制系统的基础。…

    2023-08-02 00:45:01
    0 89 90

发表评论

登录 后才能评论

评论列表(56条)