为什么在WordPress中我无法使用functions.php文件中的钩子加载我的JavaScripts?

时间:2014-01-22 16:28:16

标签: javascript php wordpress wordpress-theming

我是WP的新手(我来自Joomla),我有以下问题:

我将这个纯HTML主题(使用BootStrap CSS框架)转换为WordPress主题。

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

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

正如您所看到的,与原始演示网站和我的个人WP主题的唯一区别在于,在第二个版本中未加载JavaScript(因此上部水平主菜单无法正常工作并且标题幻灯片已固定在一个单一的immage)

我做了以下操作:

1)在我的 footer.php 文件中,我已禁用JavaScript加载,以这种方式对其进行评论:

        <!--
        <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>
        -->

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 bootstrap.min.js:
    wp_enqueue_script('bootstrap.min-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array(), 'v3.0.3', true);
    // Load FlexSlider JavaScript
    wp_enqueue_script('flexSlider-js', get_template_directory_uri() . '/assets/plugins/flexslider/jquery.flexslider.js', array(), 'v2.1', true);
    // Load FancyBox:
    wp_enqueue_script('fancy-js', get_template_directory_uri() . '/assets/plugins/fancybox/jquery.fancybox.pack.js', array(), 'v2.1.5', true);
    // Load scripts.js:
    wp_enqueue_script('myScripts-js', get_template_directory_uri() . '/assets/js/scripts.js', array(), '1.0', true);
    // Load Modernizer:
    wp_enqueue_script('myodernizer-js', get_template_directory_uri() . '/assets/js/modernizr.custom.js', array(), '2.6.2', true);

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

但是你可以看到JavaScript似乎没有加载而且无法工作。如果我在我的 footer.php 文件中加载JavaScript加载(删除评论)它运行良好,但我认为在WP中这不是一个好用的方法。

我错过了什么?这有什么不对?

TNX

安德烈

1 个答案:

答案 0 :(得分:0)

  1. 尝试清除浏览器缓存。
  2. 如果您使用的是任何缓存插件(虽然我没有看到),请尝试刷新缓存。
  3. 我看到你正在使用jQuery插件和Bootstrap.js。在该场景中,您必须指定哪个脚本依赖于哪个脚本。除此之外,我可以看到页面底部包含的脚本。如果您希望它们显示在<head>部分中,请删除wp_enqueue_script函数调用中的最后一个true争论。
  4. 试试这段代码: -

    function load_java_scripts() {    
        // Load JQuery:
        wp_enqueue_script('jquery');
        // 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');
        // Load FlexSlider JavaScript
        wp_enqueue_script('flexSlider-js', get_template_directory_uri() . '/assets/plugins/flexslider/jquery.flexslider.js', array('jquery'), 'v2.1');
        // Load FancyBox:
        wp_enqueue_script('fancy-js', get_template_directory_uri() . '/assets/plugins/fancybox/jquery.fancybox.pack.js', array('jquery'), 'v2.1.5');
        // Load scripts.js:
        wp_enqueue_script('myScripts-js', get_template_directory_uri() . '/assets/js/scripts.js', array(), '1.0');
        // Load Modernizer:
        wp_enqueue_script('myodernizer-js', get_template_directory_uri() . '/assets/js/modernizr.custom.js', array(), '2.6.2');    
    }
    add_action('wp_enqueue_scripts', 'load_java_scripts');
    

    如果我的myScripts-js依赖于jquery,那么你应该在其依赖列表中包含jquery,就像我为其他脚本添加的那样。