为什么wp_enqueue_script忽略了我的“wp_head”钩子？

Question

我希望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');

Answer 1

您的问题在于如何使用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' );

Answer 2

尝试wp_enqueue_scripts钩子而不是wp_head来对脚本和样式进行排队。

检查是否有wp_head()调用在header.php中

有关添加有条件的注释的内容，请参见代码库。

Answer 3

虽然被接受的答案有效，但我想我应该添加最新的方法来解决这个问题。

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，您可以使用它而不是上面的本地jquery，尽管您可能想考虑使用带局部后盾的接近。

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