Question

我有以下情况：

我将这个纯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都已加载但无法正常工作，幻灯片显示不会出现。

有什么区别？

Answer 1

WordPress在nonConflict模式下运行jQuery，你必须用$替换所有jQuery。

示例：

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

变为

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

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

为什么在WP主题中，如果我从functions.php加载它，那么SlideShow（JQuery FlexSlider）无法工作，但是如果我从footer.php文件加载它就可以工作？

1 个答案: