如何强制wp_enqueue_style在head标签的最底部显示CSS以覆盖所有CSS规则？

发布于 2024-10-03 14:55:01 字数 1602 浏览 2 评论 0原文

我目前正在研究如何通过插件创建Wordpress管理模板，并根据Wordpress Wiki你可以使用 admin_head、wp_admin_css 和/或 login_head 等挂钩来手动回显链接 html 标记：

echo "<link rel="stylesheet" type="text/css" href="' . get_option('siteurl') . '/wp-content/plugins/blue-steel/login.css" />'."\n";

示例显然是 A坏事，因为链接标签在 php 逻辑中是硬编码的。

理想的情况是使用 wp_enqueue_style() 插入 CSS。然而，它有自己的何时插入 CSS 的想法，并且只对它喜欢的钩子做出反应。例如，wp_enqueue 样式在 admin_head 内响应不佳。到目前为止，我只能在 wp_print_styles 和 init 中使用它，但是在加载所有默认 CSS 后，你无法真正显示 CSS：

<link rel='stylesheet' href='http://localhost/wordpress/wp-admin/load-styles.php?c=0&amp;dir=ltr&amp;load=plugin-install,global,wp-admin&amp;ver=9e478aac7934ae559830ecb557b6511d' type='text/css' media='all' />
<link rel='stylesheet' id='pinq-admin-css'  href='http://localhost/wordpress/wp-content/themes/ardee/css/pinq-admin.css?ver=3.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='thickbox-css'  href='http://localhost/wordpress/wp-includes/js/thickbox/thickbox.css?ver=20090514' type='text/css' media='all' />
<link rel='stylesheet' id='colors-css'  href='http://localhost/wordpress/wp-admin/css/colors-fresh.css?ver=20100610' type='text/css' media='all' />

我只想 pinq-admin-css 显示在 head 标签的底部（最好是在结束 head 之前），以便它可以覆盖所有已加载的与 Wordpress 相关的 CSS。

对此有什么想法吗？

原文

I am currently studying on how to create Wordpress administration templates via plug-ins, and according to the Wordpress Wiki you can use hooks such as admin_head, wp_admin_css, and/or login_head to manually echo your link html tag:

echo "<link rel="stylesheet" type="text/css" href="' . get_option('siteurl') . '/wp-content/plugins/blue-steel/login.css" />'."\n";

The example obviously is A Bad Thing because of the way the link tag is hardcoded inside php logic.

The ideal is to use wp_enqueue_style() to insert CSS. However, it has it's own idea of WHEN the CSS is inserted, and only reacts to the hooks it likes. For example, wp_enqueue style doesn't respond well inside admin_head. So far I can only use it inside wp_print_styles and init, but then again you can't really display the CSS after all the default CSS has loaded:

<link rel='stylesheet' href='http://localhost/wordpress/wp-admin/load-styles.php?c=0&dir=ltr&load=plugin-install,global,wp-admin&ver=9e478aac7934ae559830ecb557b6511d' type='text/css' media='all' />
<link rel='stylesheet' id='pinq-admin-css'  href='http://localhost/wordpress/wp-content/themes/ardee/css/pinq-admin.css?ver=3.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='thickbox-css'  href='http://localhost/wordpress/wp-includes/js/thickbox/thickbox.css?ver=20090514' type='text/css' media='all' />
<link rel='stylesheet' id='colors-css'  href='http://localhost/wordpress/wp-admin/css/colors-fresh.css?ver=20100610' type='text/css' media='all' />

I just want pinq-admin-css to display at the rock-bottom of the head tag (preferably just before the closing head) so that it can override all Wordpress-related CSS that has been loaded.

Any thoughts on this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

￡噩梦荏苒 2024-10-10 14:55:01

嘿。对于 wp_enqueue_style 有一个名为 $deps 的参数，您应该尝试一下。您也许可以提到您的样式表依赖于所有其他样式表，因此将其放在其他样式表之下。除此之外，您还可以继续使用 !important。有关依赖项的更多信息：http://codex.wordpress.org/Function_Reference/wp_enqueue_style

回复收藏 0 原文

带上头具痛哭 2024-10-10 14:55:01

我知道这很古老，但这里有一些实际的代码，是从我的网站上剪切和粘贴的。这是在我的子主题的functions.php文件中：

 add_action('init', 'add_custom_styles', 99);
 function add_custom_styles() {
     wp_enqueue_style(
         'custom-styles',
         get_stylesheet_directory_uri() .'/custom.css',
         array('storefront-style', 'wc-bundle-style','storefront-child-style')
    );
 }

'custom-styles'只是子主题目录中标题为“custom.css”的文件，其中包含我想要的所有自定义样式最后加载。

此外，要查找要位于 custom.css 样式表上方的样式表句柄，请使用此处概述的技术：

http://crunchify.com/how-to-print-all-loaded-java-scripts -and-css-stylesheets-handle-for-your-wordpress-blog/

I know this is ancient, but here's some actual code, cut and pasted from my site. This is in the functions.php file of my child theme:

 add_action('init', 'add_custom_styles', 99);
 function add_custom_styles() {
     wp_enqueue_style(
         'custom-styles',
         get_stylesheet_directory_uri() .'/custom.css',
         array('storefront-style', 'wc-bundle-style','storefront-child-style')
    );
 }

The 'custom-styles' is simply a file titled "custom.css" in the child theme directory which contains all my custom styles I want to be loaded last.

In addition, to find the handles of the stylesheets that you want to be above your custom.css stylesheet, use the technique outlined here:

http://crunchify.com/how-to-print-all-loaded-java-scripts-and-css-stylesheets-handle-for-your-wordpress-blog/

回复收藏 0 原文

~没有更多了~