个性化阅读
专注于IT技术分析

为什么wp_enqueue_script会忽略我的”wp_head”钩子?

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

#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

更新:

令人失望的是, 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' );
赞(0)
未经允许不得转载:srcmini » 为什么wp_enqueue_script会忽略我的”wp_head”钩子?

评论 抢沙发

评论前必须登录!