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' );

进一步阅读：http://codex.wordpress.org/Function_Reference/wp_enqueue_script

UPDATE：

令人失望的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' );

为什么wp_enqueue_script会忽略我的'wp_head'钩子？

1 个答案: