Identifying the priority of style.css so I can make a small CSS file load last
-
18-01-2021 - |
문제
I have a small bit of hourly-changing css and I want to
keep it in a second file (apart from style.css) and
load it after my theme's
style.css
file.
I believe I can make it load before style.css
by setting its priority to the style.css
minus one (e.g. if the main style.css has a priority of 10, my bit of code would have a priority of 9).
But here's my problem: apart from trial and error I don't know how to identify, programmatically the priority of a style sheet. I know could simple use the method of halving to hone in on the value, but I'd rather not do that. It would be nice to learn a principled way of solving this problem. Perhaps there is a default priority of main-theme CSS file? If this is the case I can easily try the ($defaultPriorityValue - 1). Is this possible, and if not what is a good way to do this?
p.s. I do not want to enqueue inline styles in my functions.php
because I need to keep this code in a separate file
Although I found the functional solution I listed in the answers below, I would still like it if someone could explain if there is a way to id, programmatically, the priority of a sheet. Thanks!
해결책
When you properly enqueue a file, an instance of the wp_styles
(more on this) class is created. The priority of actions is ignored. So it doesn't matter if you write anything like
add_action ('wp_enqueue_scripts','function_adding_main_style',10);
add_action ('wp_enqueue_scripts','function_adding_small_style',11);
The reason is exactly the existence of the dependency system. WP first collects all enqueued style files and then checks them for dependencies. If A.css
is enqueued before B.css
but the former depends on the latter, they will be loaded accordingly. You can see this reordening happen in the all_deps
method of the parent class.
To cut a long story short: you're not supposed to mess with the priority of style files outside the dependency system that WP gives you. Your own solution is the best.
That said, you can always circumvent the enqueueing system and echo your file directly towards the end of the wp_head
hook. Unelegant, but effective.
다른 팁
The Dependency Solution
One functional solution I found and successfully tested came from @helgatheviking's answer to this question. This solution involves setting a dependency on small CSS file (which is a third argument) when enqueuing it. You set the small CSS file's dependency to the handle/id of the main CSS file.
wp_enqueue_style(
'my-little-css-style',
get_stylesheet_directory_uri() . '/my_little_style.css',
'themename-style' // this is the dependency, which I set to the handle of the main css stylesheet. It makes the small sheet load before the main one.
);