How to force wp_enqueue_style to display CSS at the very bottom of the head tag to override all CSS rules?
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开发者_如何学JAVA=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?
Hey. There's an argument called $deps
for wp_enqueue_style
, you should give it a try. You might be able to mention that your stylesheet depends on all the rest, thus putting it below the others. Other than that, you can also go ahead with !important
. More info on dependencies: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
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/
精彩评论