为什么幻灯片放映(使用JQuery FlexSlider制作)在我从函数.php加载时不能工作,但如果我从footer.php文件中加载就可以了?

时间:2014-01-22 作者:AndreaNobili

我有以下情况:

我将这个纯HTML主题(使用引导CSS框架)带入WordPress主题。

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

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

正如您所看到的,与最初的演示网站和我的个人WP主题唯一的区别是,在第二个演示中,标题中的幻灯片(使用flexslider JQuery插件制作)没有显示。

我做了以下操作:

1) 在我的页脚中。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)我已在函数中插入以下代码。使用WP标准方式加载所有以前的JavaScript的php文件:

/* 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都已加载,但无法工作,幻灯片也没有出现。

有什么区别?

1 个回复
最合适的回答,由SO网友:bravokeyl 整理而成

正如@Milo所说,WP以无冲突模式加载jQuery,所以快捷方式$ 不可供jQuery使用。您不应该在WordPress中为jQuery使用$变量。正如您所说,您不喜欢jQuery,我只是给出下面的代码。。试试看。

jQuery(function ($) {
        $(window).load(function() { 
              $(\'#main-slider\').flexslider({
                 animation: "slide",
                 useCSS: false, 
                 pauseOnHover: true 
                }); 
          });

    })
将脚本放入页脚时。php,您从cdn加载了jQuery。所以$ 是可用的,这就是它工作的原因。

Update:我的意思是当你

<script src="http://code.jquery.com/jquery.js"></script>
jQuery的源代码。js与WP不同。

当您使用

  // Load JQuery:
    wp_enqueue_script(\'jquery\');
jQuery是从WP包加载的。

结束

相关推荐

JQuery表单插件,以WordPress的方式提交

正在尝试使用jQueryform plugin 在wordpress站点上载文件。HTML标记:<form id=\"myForm\" action=\"process.php\" method=\"POST\" enctype=\"multipart/form-data\"> <input type=\"file\" value=\"\" name=\"file_upload\" class=\"file_upload\"/> <br>&