我有以下情况:
我将这个纯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都已加载,但无法工作,幻灯片也没有出现。
有什么区别?