0

I had a hard time finding the correct way to do this. I want to load the CDN resources here: http://www.bootstrapcdn.com/ but use wp_enqueue_scripts and have local fallback.

This is the method I am using for local fall back now directly in header.php:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.js">\x3C/script>')</script>

I want something like this for all resources but also using wp_enqueue_scripts. I successful switched the enqueue Jquery using this method but this does not provide a fallback:

/** Jquery **/
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.5./jquery.min.js','', 'latest', true );
wp_enqueue_script('jquery','','',true);

Any help is greatly appreciated!

1

Since 4.5 there is a function that lets you append inline js to an enqueued js file, it is called wp_add_inline_script.

Now, this function does not let you add any js code that has a </script> in it for security reasons. But when you look at the wp_add_inline_script source code, you can see that it is just a wrapper for a wp_scripts()->add_inline_script() call with some added string parsing for malicious strings.

So, if you don't mind using this function directly without the added security layer of wp_add_inline_script which parses for security problems (just the </script> check for now, but might be more in the future) then you can do the following:

function _enqueue_my_scripts() {
  // the normal enqueue
  wp_enqueue_script( 'jquery-cdn', 'https://code.jquery.com/jquery-3.3.1.min.js' );
  // our custom code which will check for the existance of jQuery (in this case)
  wp_scripts()->add_inline_script( 'jquery-cdn',
    "window.jQuery || document.write('<script src=\"".get_template_directory_uri() ."/js/jQuery.js\">\\x3C/script>')", 'after');
}
add_action('wp_enqueue_scripts', '_enqueue_my_scripts', 100);

Make sure to copy the wp_scripts() call exactly and only switch out the library test ('window.jQuery') for a test of the library you want to test and the '/js/jQuery.js' part for a path to your library, because the string gets parsed before output and only this way it gets printed in the correct way.

That code above will give you

<script type='text/javascript' src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script type='text/javascript'>
window.Swiper || document.write('<script src="http://localhost/wordpress/wp-content/themes/wp-theme/js/jQuery.js">\x3C/script>')
</script>

in your HTML.

0

switch your function wp_register_script for immediate call of wp_enqueue_script.

Now, even though you are registering jquery and calling it through wp_enqueue_script, you are passing as an URL empty string, that is why you do not get it enqueued.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.