在自定义 WordPress 主题中调用脚本的问题答案

【问题标题】：Issues with calling scripts in custom WordPress theme在自定义 WordPress 主题中调用脚本的问题
【发布时间】：2016-02-13 15:52:18
【问题描述】：

我正在将 Bootstrap 模板转换为 WordPress 主题（我的第一个），并且我正在努力成功调用我的所有脚本，这在 WordPress 之前运行良好。

对于位于 header.php 中的脚本，我收到以下错误：

Uncaught ReferenceError: $ is not defined

脚本：

<script>
    $(window).on('beforeunload', function() {
        $(window).scrollTop(0);
    });
</script>

我尝试使用jQuery 而不是$，它可以修复一些其他脚本，但它告诉我没有定义 jQuery。

我也在尝试调用 webshim polyfill，但它说它没有定义：

Uncaught ReferenceError: webshim is not defined

脚本：

<script>
    webshim.setOptions('forms', {
        replaceValidationUI: true,
        lazyCustomMessages: true
    });

    //start polyfilling
    webshim.polyfill('forms');
</script>

此脚本也在 header.php 中。我唯一能想到的是 WordPress 在我的脚本之后加载 jQuery，但我试图避免手动调用它。我应该将这些脚本移动到 footer.php 中吗？

最后，我通过 @import 引用了两种 Google 网络字体，但都没有加载。我找不到使用 @font-face 的字体 URL，所以我不确定 WordPress 的最佳方法是什么。

我所有的主要 JS 文件都在 functions.php 中调用，除了这些初始化脚本。如果我需要提供更多详细信息，请告诉我。

任何帮助将不胜感激！

【问题讨论】：

form here wordpress.org/support/topic/jquery-library-not-loading -- $ 别名是有问题的，因为有几个库使用它。为了避免这个问题，WordPress 在“无冲突”模式下加载 jQuery。这意味着 $ 别名不起作用，您必须像 David Gwyer 那样加载 jQuery，在有限范围内定义 $ 别名，或者每次要调用 jQuery 函数时使用 jQuery.*。这就是为什么您在使用 $ 时遇到问题。
我尝试定义 $ 别名，它返回相同的错误：jQuery(window).on('beforeunload', function($) { $(window).scrollTop(0); });
另外，我通过更改 functions.php 中样式表的顺序修复了 CSS/字体问题。
嗨 - 不要将脚本放在头文件中。这就是你遇到问题的原因。您需要将它们添加为“WordPress 方式”，这意味着在主题的 functions.php 文件中使用 wp_enqueue_script。

标签： jquery wordpress wordpress-theming

【解决方案1】：

你可以试试这个：

(function($) {
  $(window).on('beforeunload', function() {
     $(window).scrollTop(0);
  });
}(jQuery));

【讨论】：

这也会返回一个错误，说 jQuery 没有定义。