Inline enqueue style
-
I enqueue a css on my child theme functions file:
https://www.piccoloprestitoinpdap.net/wp-content/themes/mytheme/css/cookie.css
.Then I checked the option: Inline all header CSS files, but this file does not get inlining.
Is this expected or there is any other option I must check?
Thanks
-
Hi,
Make sure that code is inside a function and enqueued to
wp_enqueue_scripts
https://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way–cms-20402
Something like this (adjust as needed)
function mytheme_enqueue_style() { wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); } add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
This is how I enqueue it:
function add_cookie_consent(){ wp_enqueue_style( 'cookie-consent', get_stylesheet_directory_uri() . '/css/cookie.css' ); wp_enqueue_script( 'cookie-consent', 'https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.6/cookieconsent.min.js', null, null, true ); wp_enqueue_script( 'cookie-js', get_stylesheet_directory_uri() . '/js/cookie.js', array(), '', true ); } add_action( 'wp_enqueue_scripts', 'add_cookie_consent' );
Do you point your domain dns records to your hosting provider using a cname or an A record?
When you “view source” on the final page, does your
/css/cookie.css
url, match the one on the domain name (exactly, including www or not) ?The cloudflare.com link won’t be merged, since that’s an external domain.
My guess is thatget_stylesheet_directory_uri()
is probably not matching your main domain.I’m testing it locally.
I’ve dumped css in
fastvelocity_min_merge_header_css
function and I see it is in the loop.FOr some reason the code skips this css.
Sorry, but can you explain in more detail?
On the first post, you posted that you were enqueueing
https://www.piccoloprestitoinpdap.net/wp-content/themes/mytheme/css/cookie.css
Further down, you posted as
get_stylesheet_directory_uri() . '/css/cookie.css'
And now you posted that it’s on a local machine.
Are you using another domain, such as//localhost
or are you pointing your hosts file to your machine, while using the same domain name?If you are pointing your dns only, it may not work because wordpress is trying to fetch from the remote site instead, where the file doesn’t exist.
The plugin will automatically exclude any urls that don’t match either
site_url
orhome_url
, so if your final enqued file ishttps://www.piccoloprestitoinpdap.net/wp-content/themes/mytheme/css/cookie.css
but yoursite_url
orhome_url
is different (even by one letter), it won’t be included.If you are on a windows machine, that may also be a problem.
I have it working on several windows machines, but each setup may differ.Please take a look at the Server Info for the
site_url
orhome_url
and make sure it matches the url of your enqueued file.If you’re using object cache, or file cache, it can also happens that the php has been cached. Although this is rare, it can happen. Try to restart your PHP and see if it works.
If the urls are different, you can add the domain name to the
External URLs to Merge
.
Whatever css or js file that matches the domains here, will be merged (as long as they were enqueued as you posted).I would start with:
piccoloprestitoinpdap.net www.piccoloprestitoinpdap.net
Check your ignore list.
It works by wildcard, so make sure you haven’t had anything there that match the url of the css file.I’m almost certain it will work on the live site, so my recommendation is to test that on the live site or some online, linux hosted staging version, rather than localhost.
One last thing, is that you must disable any other “option to merge css or js” files on any other plugins. There may be a conflict, especially if you’re running 2 or more plugins that are trying to do the same thing.
Do not minify or merge css or js file anywhere else.- This reply was modified 6 years, 9 months ago by Raul P..
I try to clarify.
I’ve uploaded my child theme on piccoloprestitoinpdap.net. After seeing some css not getting minified I made some tests on local.
If I try to dump css list
var_dump($styles->to_do); exit;
I see my cookie-consent css in the array. So I suppose the error is when plugin tries to inline all header css.
I have no plugin enabled, just a fresh wordpress install.
The child theme I’m using is https://github.com/Tropicalista/mytheme a generatepress child theme.
I want also add that in my functions.php
function add_cookie_consent(){ wp_enqueue_style( 'cookie-consent', get_stylesheet_directory_uri() . '/css/cookie.css' ); wp_enqueue_script( 'cookie-consent', 'https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.6/cookieconsent.min.js', null, null, true ); wp_enqueue_script( 'cookie-js', get_stylesheet_directory_uri() . '/js/cookie.js', array(), '', true ); } add_action( 'wp_enqueue_scripts', 'add_cookie_consent' );
I add css and js files.
The js files are minified correctly. The css simply got ignored.
After some more test I noticed that renaiming the file as
ciccio.css
it works. So I suppose that fastvelocity_ie_blacklist function remove it. However I haven’t add cookie.css file to blacklist.
Yes I found the code that strip out my cookie.css.
I think that
if (stripos($hurl, $i) !== false) { return true; }
match the default
ie.css
with cookie.css.So simply renaiming the css file will solve this. I’m not sure if this is a bug or by design, however this should be added in the documentation.
Thanks for reporting.
The default is not'ie.css'
but rather'/ie.css'
, so cookie should never match… but it seems I stripped too much information later, so that’s why it happens.It’s a bug, so I’ll fix it on the next release.
Thank you very much.Thank you for this great plugin.
I would also ask you something about the plugin optimization.
Does it minify on every request or it simply evaluate change on css and skip if it’s already minified?
I’d like to use it with openlitespeed cache module, any optimization you could suggest?
@tropicalista that is explained on the plugin description.
Minification is done in real time and done on the frontend only during the first uncached request. Once the first request is processed, any other pages that require the same set of CSS and JavaScript will be served that same static cache file.
In other words, it minifies each js or css file only once into an intermediary cache. Then for each set of files, it merges and creates a static cache file.
If all your pages use the same js and css files, then that merged file will be reused on all requests. If your pages need different js and css files, then a new cache file will be merged, out of the intermediary cache.
Most of the work, is basically opening, merging and saving files. It’s extremely lite on the server. It only minifies once and that’s it.
- The topic ‘Inline enqueue style’ is closed to new replies.