如何在Wordpress中正确地将某些Elementor 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文件以及我真正想要出列的文件。

这是正在退出队列的文件列表:

  • 自定义前端.min.css
  • poster 1501.css(这是我在进行这些更改时查看的页面的css文件(
  • 前端legacy.min.css
  • poster1396.css(一些全局Elementor的css(
  • poster 3556.css(这个和下面的5个是我在网站上使用的插件的模板(
  • 4473.css之后
  • 5653.css之后
  • 3489.css之后
  • 3464.css之后
  • 后3458.css

我猜这与处理程序"elementor frontend"不正确有关。customizedfrontend.min.css文件在HTML代码的链接标记中有"elementor frontend-css"ID,所以我猜是从那里得到的处理程序。

有人知道我如何只将自定义的frontend.min.css文件出列吗?

在那之后,我也想将这些文件排成队列:

  • 动画.min.css
  • element-or-icons.min.css
  • global.css
  • 前端legacy.min.css
  • 滑动器.min.js

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

您可以使用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

我的理解是,所有Elementor前端样式,例如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' );

此外。您是否可以不将自定义的frontend.min.css添加到子主题中的相关位置,并在默认情况下覆盖父主题版本?

这似乎有效。在几个页面和帖子上测试:

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' );
} );

最新更新