让 WordPress 加载 jQuery 后备

如果你的网页 jQuery 使用 Google CDN 或者 Cloudflare 的 CDN,万一加载不到,依靠 jQuery 的 scripts 就无法运作了。所以 HTML5Boilerplate 或者其他达人,就写了一些 script 可以让加载不到 CDN 的 jQuery,从网站加载后备。

jQuery 后备

<!-- 加载Google CDN 的 jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<!-- 测试是否能加载 CDN 的 jQuery,不过不能就写个 script 来加载服务器本身的 jQuery 文件 -->
<script>window.jQuery || document.write('<script src="http://DOMAIN.TLD/assets/js/jquery-1.9.1-min.js"><\/script>')</script>

在 WordPress 实现这个功能

添加下面的代码到主题的 functions.php 文件

function roots_scripts() {

  if ( !is_admin() ) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, null, false);
    add_filter('script_loader_src', 'roots_jquery_local_fallback', 10, 2);
  }

  wp_enqueue_script('jquery');

}
add_action('wp_enqueue_scripts', 'roots_scripts', 100);


// http://wordpress.stackexchange.com/a/12450
function roots_jquery_local_fallback($src, $handle = null) {
  static $add_jquery_fallback = false;

  if ($add_jquery_fallback) {
    echo '<script>window.jQuery || document.write(\'<script src="' . get_template_directory_uri() . '/assets/js/vendor/jquery-1.10.2.min.js"><\/script>\')</script>' . "\n";
    $add_jquery_fallback = false;
  }

  if ($handle === 'jquery') {
    $add_jquery_fallback = true;
  }

  return $src;
}
add_action('wp_head', 'roots_jquery_local_fallback');

过程:

  1. 针对前端用户
  2. 注销 WordPress 的 jQuery
  3. 注册 CDN 版的 jQuery
  4. 加载 jQuery
  5. 在 jQuery 后面附加后备的 script

[ via ROOTS ]