![]() ![]() Note also that in the enqueue function, you may remove $theme_version, $random_number, or both to display the stylesheet URL as needed. Fixed issue with entry detail page displaying an error when. Note that all of the codes in this tutorial should be placed into your theme’s functions.php file. Fixed an issue with our block script loading that breaks the Gutenberg editor in WordPress 5.8. When included via functions.php, the cumulative result of this technique is observable in the source code of your web pages: $random_number) Īdd_action('wp_print_styles', 'wpmix_queue_css') '/lib/css/custom.css', false, $theme_version. Wp_register_style('custom_styles', get_template_directory_uri(). Here is an example: // include custom stylesheet With the version and random numbers now available, we can use them as needed when enqueueing CSS and other files. Lookup “cache-busting css” for all the gory details. But you could use wpaddinlinescript() (if there's an enqueue'd script to attach it to) or, as in olden times, just hook in to wphead or wpfooter. The random number may be appended to the URL of stylesheets during development to help encourage browsers to reload the file. Unfortunately, wpenqueuescript doesn't work that way the second parameter is for a URL as per the documentation. If version is set to false, a version number is automatically added equal to current installed WordPress version. Next we use a simple PHP function to generate a random number: // get random number (string bool null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. Here we use WordPress’ wp_get_theme() to get the theme version (as specified in the theme’s stylesheet, style.css): // get theme version This is useful for automatic versioning, cache-busting during development, or both. gulp.Learn how to append the theme version, random number, or both as a query-string parameter to your CSS stylesheet URLs. When I call it, it looks in my header filer for the string cache_bust= plus some value, and replaces it with a new randomized string based on the date and time. replace() method, and that’s available in Node/Gulp easily with the gulp-replace plugin. It occurred to me I might as well have Gulp do the query-string changing whenever changes are made to CSS or JavaScript. I’m using a Gulp-powered build process at the moment on this site, which does all the classic stuff: Sass, Babel, file concatenation, live reloading… ![]() I would sometimes forget to do it, and even if I did remember, I sort of resented having to do it. Hey that works, but it was me hand-manipulating that variable. I sometimes do it by handįor many years, I busted cache on this very site by setting a PHP variable and using it to break assets, like… The HTML, by the way, is either not cached or cached for a much shorter amount of time, so changes to HTML will be seen. I used to use YYYYMMDD as my version number for enqueued files, which was reasonably good, but caused issues when it changed more than once in a day and still meant having to remember to update the version number when changes were made to the file. Then you change that query string to break the cache when you need to: So, one day you ship it like this in your HTML: Fixed an issue which causes some performance optimization plugins to break certain form JavaScript methods. These days, changing the query string is fine (assuming you don’t change the default behavior, services like Cloudflare let you do it). There was an era where the prevailing wisdom was that changing the query string wasn’t enough, but even then it, the reasons it wouldn’t work were pretty much edge cases. But here’s one that I’ve used just recently that I wanted to document. It’s massively important for web performance, so do it!īut how do you force the browser to get a fresh version of the file? Well, there are a bunch of ways. That tells the browser “hang on to this file basically forever.” That way, when navigating from page to page on a site - or revisiting it, or refreshing the page - the browser doesn’t have to download it again which produces way faster page loads. You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |