无依赖关系的WP_ADD_INLINE_SCRIPT

时间：2018-03-23 作者：jimlongo

我有一个javascript片段，我想将其注入页面的页脚。这是一个跟踪代码，可以说类似于谷歌分析。它没有依赖项，它是一个独立的代码段。

我可以这样做

function render_tracking_code(){
    wp_enqueue_script( \'depends-js\', \'https://rdiv.com/dummy.js\', array(), \'0.01\', true );
    wp_add_inline_script( \'depends-js\', \'aWholeBunchOfJavascriptCode\' );
}
add_action( \'wp_enqueue_scripts\', \'render_tracking_code\' );

看起来有点愚蠢（dummy.js是一个空白文件），但可以工作。有没有办法跳过依赖关系？

3 个回复

SO网友:birgire

wp_add_inline_style() - 无依赖关系wp_add_inline_style() 可以在没有源文件依赖关系的情况下使用。

这是一个example 来自@Flix：

wp_register_style( \'dummy-handle\', false );
wp_enqueue_style( \'dummy-handle\' );
wp_add_inline_style( \'dummy-handle\', \'* { color: red; }\' );

我们把它挂在wp_enqueue_scripts 行动

wp_add_inline_script() - 无依赖关系，根据票据#43565, 将支持类似的wp_add_inline_script() 版本<罢工>4.9.95.0 （感谢@MarcioDuarte、@dev101和@DaveRomsey在评论中的验证）：

wp_register_script( \'dummy-handle-header\', \'\' );
wp_enqueue_script( \'dummy-handle-header\' );
wp_add_inline_script( \'dummy-handle-header\', \'console.log( "header" );\' );

将在标题中显示以下内容，即<head>...</head> 标签：

<script type=\'text/javascript\'>
console.log( "header" );
</script>

要在页脚中显示它，请执行以下操作：

wp_register_script( \'dummy-handle-footer\', \'\', [], \'\', true );
wp_enqueue_script( \'dummy-handle-footer\'  );
wp_add_inline_script( \'dummy-handle-footer\', \'console.log( "footer" );\' );

默认值$position 中的输入参数wp_add_inline_script() 是\'after\'. 这个\'before\' value在上面打印\'after\'.

SO网友:Dave Romsey

Update: WordPress增加了对添加内联脚本和样式的支持，在v5中没有依赖项。0。请参见@birgire\'s answer for 实施。

使用时wp_add_inline_script(), WP_Scripts::print_inline_script() 最终将用于输出内联脚本。根据设计，print_inline_script() 需要有效的依赖项，$handle.

因为在这种情况下没有依赖关系，wp_add_inline_script() 不是工作的正确工具。使用wp_head 或wp_footer 要输出内联脚本，请执行以下操作：

add_action( \'wp_head\', \'wpse_add_inline_script\' );
function wpse_add_inline_script() {
  echo \'<script>\' . PHP_EOL;

  // aWholeBunchOfJavascriptCode

  echo \'</script>\' . PHP_EOL;
}

通常，应将JavaScript添加到.js 文件并使用排队wp_enqueue_script() 在wp_enqueue_scripts 钩可以使用以下命令将数据提供给脚本wp_localize_script(). 但有时可能仍然需要内联添加脚本。

SO网友:Morgan Estes

一种方法是创建一个函数，在<script> 标记，并将其挂到wp_print_footer_scripts 行动你应该小心避开任何你没有严格控制的东西，但这通常是一种安全而简单的方法。

例如：

add_action( \'wp_print_footer_scripts\', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );

结束

小码农CODE

无依赖关系的WP_ADD_INLINE_SCRIPT

相关推荐

在页面中使用JavaScript和JQuery