为什么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

您发布的代码有许多问题。

1)不应将其与wp_head或wp_footer挂钩。

正确的钩子是wp_enqueue_scripts。

更改：

add_action('wp_head', 'css_head_scripts');
add_action('wp_head', 'js_head_scripts');
add_action('wp_footer', 'js_footer_scripts');

至：

add_action('wp_enqueue_scripts', 'css_head_scripts');
add_action('wp_enqueue_scripts', 'js_head_scripts');
add_action('wp_enqueue_scripts', 'js_footer_scripts');

( 2)句柄应该是小写的，不应该包含空格。

例如，更改：

function css_head_scripts() {
    wp_enqueue_style( 'Master Stylesheet', get_template_directory_uri()."style.css" );
}

至：

function css_head_scripts() {
    wp_enqueue_style( 'master-stylesheet', get_template_directory_uri()."style.css" );
}

3)主样式表可以使用不同的函数。

function css_head_scripts() {
    wp_enqueue_style( 'master-stylesheet', get_stylesheet_uri() );
}

4)您不应该对自定义版本的jQuery进行排队。

删除wp_enqueue_script( "My jQuery", "http://code.jquery.com/jquery-1.10.2.min.js" );

5)在页脚中加载脚本的正确方法

更改：

function js_footer_scripts() {
    wp_enqueue_script( "bootstrap", get_template_directory_uri() . "/js/bootstrap.min.js" );
}

至：

function js_footer_scripts() {
    wp_enqueue_script( "bootstrap", get_template_directory_uri() . "/js/bootstrap.min.js", array( 'jquery' ), false, true );
}

6)添加IE条件的正确方法。

function js_head_scripts() {
    global $wp_scripts;    

    wp_register_script( "html5-shiv", "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js", array(), '3.7.0' );
    $wp_scripts->add_data( 'html5-shiv', 'conditional', 'lt IE 9' );

    wp_enqueue_script( "respond.js", "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js", array(), '1.4.2' );
    $wp_scripts->add_data( 'respond.js', 'conditional', 'lt IE 9' );
}

7)你需要3个函数来完成这个任务吗？

将所有这些合并成一个函数

如果您一直跟踪到目前为止，您已经完成的代码应该如下所示：

function wpse_scripts_styles() {
    global $wp_scripts;

    wp_enqueue_style( 'master-stylesheet', get_stylesheet_uri() );

    wp_enqueue_script( "bootstrap", get_template_directory_uri() . "/js/bootstrap.min.js", array( 'jquery' ), false, true );

    wp_register_script( "html5-shiv", "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js", array(), '3.7.0' );
    $wp_scripts->add_data( 'html5-shiv', 'conditional', 'lt IE 9' );

    wp_register_script( "respond.js", "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js", array(), '1.4.2' );
    $wp_scripts->add_data( 'respond.js', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'wpse_scripts_styles' );

进一步阅读：script

更新：

令人失望的是，IE条件不起作用。https://core.trac.wordpress.org/ticket/16024

这方面的工作是用wp_head操作将它们加载到头中，但这并不理想。在上面的示例中，您将使用的方法如下：

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