我使用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_style
和wp_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' );
} );