为什么wp_enQueue_script忽略我的‘wp_head’挂钩？

时间：2014-02-15 作者：Wilhelm

我想css_head_scripts 和js_head_scripts 要附加到wp-head
但Wordpress完全忽略了这一点？我错过什么了吗？

    function css_head_scripts() {
        wp_enqueue_style( \'Master Stylesheet\', get_template_directory_uri()."style.css" );
    }
    function js_head_scripts() {
        echo \'<!--[if lt IE 9]>\';
        wp_enqueue_script( "HTML5 Shiv", "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" );
        wp_enqueue_script( "Respond.js", "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" );
        echo \'<![endif]-->\';
    }
    function js_footer_scripts() {
        wp_enqueue_script( "My jQuery", "http://code.jquery.com/jquery-1.10.2.min.js" );
        wp_enqueue_script( "Bootstrap", get_template_directory_uri()."/js/bootstrap.min.js" );
    }
    add_action(\'wp_head\', \'css_head_scripts\');
    add_action(\'wp_head\', \'js_head_scripts\');
    add_action(\'wp_footer\', \'js_footer_scripts\');

3 个回复

最合适的回答,由SO网友:Seamus Leahy 整理而成

您的问题在于如何使用wp_enqueue_script(). 它不会打印<script src=""></script>, 相反，它将其添加到Javascript文件列表中，以便在适当的时间打印出来。

当您应该添加Javascript和CSS时，会调用一个不同的挂钩：wp_enqueue_scripts （您也可以将其用于CSS）。你的css_head_script() 调用太晚，因为在wp_head 钩

至于js_head_scripts(), 不管怎样，这都不会像你期望的那样，因为wp_enqueue_script() 不打印脚本元素。它只是将其添加到要打印的脚本列表中。您将得到的最好的标记是没有任何内容的条件标记。

关于您的js_footer_scripts(), 你不需要额外的函数，因为wp_enqueue_script() 具有用于将脚本添加到页脚而不是页眉的参数。

function add_js_and_css() {
  global $wp_scripts;

  // CSS
  // The label should be safe for an ID, and you need the trailing slash
  wp_enqueue_style( \'master-stylesheet\', get_template_directory_uri()."/style.css" );

  // Javascript
  // By setting the fifth parameter to true, WP will print it in the footer
  wp_enqueue_script( "my-jquery", "http://code.jquery.com/jquery-1.10.2.min.js", array(), \'1.10.2\', true );
  wp_enqueue_script( "bootstrap", get_template_directory_uri()."/js/bootstrap.min.js", array(\'my-jquery\'), \'3\', true );

}
add_action( \'wp_enqueue_scripts\', \'add_js_and_css\' );

function add_conditional_js() {
  ?>
  <!--[if lt IE 9]
    <script src="<?php echo esc_attr(\'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js\'); ?>"></script>
    <script src="<?php echo esc_attr(\'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js\'); ?>"></script>
  <![endif]-->
  <?php 

}
add_action( \'wp_head\', \'add_conditional_js\' );

SO网友:Céline Garel

尝试wp_enqueue_scripts 改为挂钩wp_head 将脚本和样式排队。

检查是否有wp_head() 调用标头。php

有关添加内容，请参见codexconditional comments.

SO网友:Bryan Willis

虽然公认的答案是可行的，但我想我应该添加最新的方法来实现这一点。

add_action(\'wp_enqueue_scripts\', \'wpse_134784_enqueue_html5shiv_respond_bootstrap\');
/**
 * Enqueue Theme Scripts and Styles
 *
 * @link https://gist.github.com/bryanwillis/7fd5356a9d18d0c7815f
 */
function wpse_134784_enqueue_html5shiv_respond_bootstrap()  {

    // Theme Stylesheet
    wp_enqueue_style( \'master-stylesheet\', get_stylesheet_uri() );

    // Local jQuery
    wp_enqueue_script( \'jquery\' );

    wp_enqueue_script( \'bootstrap\',
        get_template_directory_uri().\'/js/bootstrap.min.js\',
        array(\'jquery\'),
        \'3.3.6\',
        true
    );
    wp_enqueue_script( \'html5shiv\',
        \'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js\',
        array(\'bootstrap\'),
        false,
        false
    );
    wp_enqueue_script( \'respond\',
        \'https://oss.maxcdn.com/respond/1.4.2/respond.min.js\',
        array(\'bootstrap\'),
        false,
        false
    );

    // Conditional comments
    wp_script_add_data( \'html5shiv\', \'conditional\', \'lt IE 9\' );
    wp_script_add_data( \'respond\', \'conditional\', \'lt IE 9\' );

}

如果要使用jquery cdn，可以使用它而不是上面的本地jquery，尽管您可能需要考虑approach with a local fallback.

wp_enqueue_script( \'my-jquery\', \'http://code.jquery.com/jquery-1.10.2.min.js\', false, false, true );

结束

小码农CODE

为什么wp_enQueue_script忽略我的‘wp_head’挂钩？

相关推荐

hooks & filters and variables