wp由于依赖关系而使内联脚本排队


35

有没有一种方法可以将wp_enqueue_script()用于内联脚本?

我这样做是因为我的内联脚本依赖于另一个脚本,并且我希望在加载后插入它的灵活性。

另外,这是一个内联脚本,因为我正在将php变量传递到javascript中(例如主题路径等)

提前致谢。

Answers:


33

好了,您有wp_localize_script(),但这仅用于传递数据。

否则,您可以这样做:

function print_my_inline_script() {
  if ( wp_script_is( 'some-script-handle', 'done' ) ) {
?>
<script type="text/javascript">
// js code goes here
</script>
<?php
  }
}
add_action( 'wp_footer', 'print_my_inline_script' );

我们的想法是,你不应该依赖于正在打印您的嵌入式脚本正是剧本后,这取决于,但后来。


4
当然,这仅在您所依赖的脚本已经输出的情况下有效吗?如果您所依赖的脚本也已在wp_footer中注册,并且在内联脚本代码之后执行,则内联脚本根本不会被写入客户端,因此会执行吗?
山姆·和平

6
从wordpress 4.5开始,您可以将wp_add_inline_script() wp_add_inline_script与wordpress jquery一起
Dhinju Divakaran


7

此解决方案与@scribu的答案类似,但是采用的形式wp_enquque_script(),并且如果脚本的依赖项包含在标头中,则会将该脚本放在标头中。

/**
 * Enqueue inline Javascript. @see wp_enqueue_script().
 * 
 * KNOWN BUG: Inline scripts cannot be enqueued before 
 *  any inline scripts it depends on, (unless they are
 *  placed in header, and the dependant in footer).
 * 
 * @param string      $handle    Identifying name for script
 * @param string      $src       The JavaScript code
 * @param array       $deps      (optional) Array of script names on which this script depends
 * @param bool        $in_footer (optional) Whether to enqueue the script before </head> or before </body> 
 * 
 * @return null
 */
function enqueue_inline_script( $handle, $js, $deps = array(), $in_footer = false ){
    // Callback for printing inline script.
    $cb = function()use( $handle, $js ){
        // Ensure script is only included once.
        if( wp_script_is( $handle, 'done' ) )
            return;
        // Print script & mark it as included.
        echo "<script type=\"text/javascript\" id=\"js-$handle\">\n$js\n</script>\n";
        global $wp_scripts;
        $wp_scripts->done[] = $handle;
    };
    // (`wp_print_scripts` is called in header and footer, but $cb has re-inclusion protection.)
    $hook = $in_footer ? 'wp_print_footer_scripts' : 'wp_print_scripts';

    // If no dependencies, simply hook into header or footer.
    if( empty($deps)){
        add_action( $hook, $cb );
        return;
    }

    // Delay printing script until all dependencies have been included.
    $cb_maybe = function()use( $deps, $in_footer, $cb, &$cb_maybe ){
        foreach( $deps as &$dep ){
            if( !wp_script_is( $dep, 'done' ) ){
                // Dependencies not included in head, try again in footer.
                if( ! $in_footer ){
                    add_action( 'wp_print_footer_scripts', $cb_maybe, 11 );
                }
                else{
                    // Dependencies were not included in `wp_head` or `wp_footer`.
                }
                return;
            }
        }
        call_user_func( $cb );
    };
    add_action( $hook, $cb_maybe, 0 );
}

// Usage
enqueue_inline_script('test','alert(\'enqueue inline script test\');',array( 'jquery'));

注意:这使用匿名函数,但是对于5.3之前的PHP版本,可以很容易地将其转换为类。


5

从WordPress 4.5开始,您可以使用wp_add_inline_script()

add_action( 'wp_enqueue_scripts', 'cyb_enqueue_scripts' );
function cyb_enqueue_scripts() {
   wp_enqueue_script( 'myscript', 'url/to/myscript.js', array(), '1.0' );
   wp_add_inline_script( 'myscript', 'Your inline javascript code gos here' );
}

4

我发现更好的方法是使用wp_localize_script()@scribu建议。

通常,我决定使用嵌入式Javascript,因为我需要为脚本提供一些PHP变量。这可以用解决wp_localize_script()。我将提供一个示例:

您有一个$aFoo带有某些选项的数组,需要将其传递给脚本。

$aFoo = array( 'option1' => $option1Value, 'option2' => $option2Value ); 

使用内联脚本:

<script> 
    var oFoo = {};
    oFoo.option1 = <?php echo $aFoo['option1'] ?>;  
    oFoo.option2 = <?php echo $aFoo['option2'] ?>;            
    //do some stuff with oFoo
</script>

使用wp_localize_script()

wp_register_script( 'script_name', 'pathToScript/script.js', array( 'jquery' )); //if jQuery is not needed just remove the last argument. 
wp_localize_script( 'script_name', 'object_name', $aFoo ); //pass 'object_name' to script.js
wp_enqueue_script( 'script_name' );    

然后,pathToScript/script.js将是:

var oFoo = {};
oFoo.option1 = object_name.option1;   
oFoo.option2 = object_name.option2;            
//do some stuff with oFoo (no PHP needed)

这样,您就不再需要嵌入式脚本。


3

抄写是绝对正确的。无论如何,我想添加一些信息:

我希望我的函数一次输出一个脚本,而不管其调用频率如何。这是一个与内容相关的功能,因此我不能等待任何钩子。我使用了scribus信息和WP核心的一些阅读内容,以得出以下结论:

function print_script_once() {
    if(!wp_script_is('my-handle', 'done')) {
        echo "<script>alert('once!');</script>";
        global $wp_scripts;
        $wp_scripts->done[] = 'my-handle';
    }
}
add_action('get_footer', print_script_once);

使用这种方法,我可以打印一次内联脚本。就我而言,我有一个创建共享按钮并需要对所有按钮执行一个脚本的函数。但是只有一次。


echo内嵌脚本的方法是二十十七主题是如何构成的,至少在一个点上。我也使用这种技术。效果很好,并允许您挂接到不同的地方。
乔什·哈布达斯
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.