为什么在 WP 主题中，如果我从 functions.php 加载幻灯片（JQuery FlexSlider），但如果我从 footer.php 文件加载它就可以工作？答案

【问题标题】：Why in WP theme a SlideShow (JQuery FlexSlider) can't work if I load it form functions.php but work if I load it from my footer.php file?为什么在 WP 主题中，如果我从 functions.php 加载幻灯片（JQuery FlexSlider），但如果我从 footer.php 文件加载它就可以工作？
【发布时间】：2014-01-22 17:06:02
【问题描述】：

我有以下情况：

我将这个纯 HTML 主题（使用 BootStrap CSS 框架）带到 WordPress 主题中。

这是原始的纯 HTML 演示主题（我有完整的源代码，因为它是一个可下载的示例）：http://www.html.it/guide/img/bootstrap/demo/home.html

这是我正在研究的个人 WP 主题：http://onofri.org/WP_BootStrap/

正如您所见，与原始演示网站和我的个人 WP 主题的唯一区别是，在第二个中，标题中的 SlideShow（使用 flexslider JQuery 插件制作）没有显示。

我做了以下操作：

1) 在我的 footer.php 文件中，我禁用了 JavaScript 加载注释它们并调用 wp_footer()，以这种方式：

    <!--
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="/wordpress/wp-content/themes/AsperTheme/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/wordpress/wp-content/themes/AsperTheme/assets/plugins/flexslider/jquery.flexslider.js"></script>
    <script src="/wordpress/wp-content/themes/AsperTheme/assets/plugins/fancybox/jquery.fancybox.pack.js"></script>
    <script src="/wordpress/wp-content/themes/AsperTheme/assets/js/scripts.js"></script>
    -->
    <?php wp_footer(); ?>
</body>

2) 我已将以下代码插入到我的 functions.php 文件中，以使用 WP 标准方式加载所有以前的 JavaScript：

/* Function automatically executed by the hook 'load_java_scripts':
 * 1) Load all my JavaScripts
 */
function load_java_scripts() {

    // Load JQuery:
    wp_enqueue_script('jquery');
    // Load FlexSlider JavaScript
    wp_enqueue_script('flexSlider-js', get_template_directory_uri() . '/assets/plugins/flexslider/jquery.flexslider.js', array('jquery'), 'v2.1', true);
    // Load bootstrap.min.js:
    wp_enqueue_script('bootstrap.min-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), 'v3.0.3', true);

    // Load FancyBox:
    wp_enqueue_script('fancy-js', get_template_directory_uri() . '/assets/plugins/fancybox/jquery.fancybox.pack.js', array('jquery'), 'v2.1.5', true);
    // Load scripts.js:
    wp_enqueue_script('myScripts-js', get_template_directory_uri() . '/assets/js/scripts.js', array('jquery'), '1.0', true);
    // Load Modernizer:
    wp_enqueue_script('myodernizer-js', get_template_directory_uri() . '/assets/js/modernizr.custom.js', array('jquery'), '2.6.2', true);

}
add_action('wp_enqueue_scripts', 'load_java_scripts');

如您所见，我将所有脚本都设置为依赖于 JQuery，因此首先加载 JQuery。

但是您可以看到 jquery 和\或 jquery.flexslider.js 无法工作。

奇怪的是，我以这种方式更改了 footer.php 文件的结尾，幻灯片正确显示：

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="/wordpress/wp-content/themes/AsperTheme/assets/plugins/flexslider/jquery.flexslider.js"></script>

    <?php wp_footer(); ?>
</body>
</html>

那么我错过了什么？可能是什么问题？

查看我网站的源代码（在 FireFox 中），在我看来，所有 JavaScript 都已加载但无法工作，幻灯片不会出现。

有什么区别？

【问题讨论】：

你确定 jQuery 是通过 wp_enqueue_script 函数加载的吗？
我觉得可以，怎么查？
当您尝试通过 PHP 加载 jQuery 时，控制台会显示什么？
在 Firefox 中转到工具 > Web 开发人员 > Web 控制台。然后重新加载页面。

标签： javascript php jquery wordpress wordpress-theming

【解决方案1】：

WordPress 在非冲突模式下运行 jQuery，您必须将所有 $ 替换为 jQuery。

例子：

$('.flexslider').height();

变成

jQuery('.flexslider').height();

WordPress 代码：http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

【讨论】：