wp_add_inline_script没有依赖性

11

我有一个要插入页面页脚的JavaScript代码段。这是一个跟踪代码，可以说类似于Google Analytics（分析）。它没有依赖关系，是一个独立的代码段。

我可以做这样的事情

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是一个空白文件），但是可以工作。有没有办法跳过依赖关系？

javascript wp-enqueue-script

— 金隆戈
source

13

`wp_add_inline_style()` -没有依赖

在wp_add_inline_style()可以在没有源文件相关使用。

这是@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()在版本中支持类似内容（感谢@ MarcioDuarte，@ dev101和@DaveRomsey进行评论中的验证）：~~4.9.9~~ 5.0

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输入参数in 的默认wp_add_inline_script()值为'after'。该'before'值将其打印在上方'after'。

— 比尔吉雷
source

在wp_add_inline_script()不依赖仍然被认为是4.9.9，这并不一定意味着它会被添加。因此，在使用此功能之前，等待确认是明智的。

— Marcio Duarte '18

1

从WP 5.0开始我们很好。

— 戴夫·罗姆西

有人从这里删除了我的评论（我确认birgire的答复者说，它确实适用于WP 5.0+），一个月后，我实际上再次需要此代码，谷歌搜索，找到了这个答案，扫了一眼，没有找到我的评论，然后就搬了。其他结果。一个小时后，我回到这里，意识到这就是我想要的答案！主持人：请不要删除我的有用评论，它们不仅为他人服务，还为我提供服务以及将来的参考和提醒。谢谢。

— dev101

不幸的是，我必须坚持使用4.9.x版本。

— 卢卡斯·文德拉米尼

5

更新： WordPress添加了对添加内联脚本和样式的支持，而v5.0中没有依赖项。有关实现，请参见@birgire的答案。

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

由于在这种情况下没有依赖关系，wp_add_inline_script()因此不是正确的工具。代替创建伪造的依赖文件（以及不希望的其他HTTP请求），使用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()。有时仍然可能需要内联添加脚本。

— 戴夫·罗姆西
source

0

一种实现方法是创建一个在<script>标签内回显脚本的函数，并将其挂接到wp_print_footer_scripts动作上。您应该小心避免逃避任何您无法严格控制的事情，但这通常是一种安全且容易的方法。

例如：

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

— 摩根·埃斯特斯
source

wp_add_inline_script没有依赖性

wp_add_inline_style() -没有依赖

wp_add_inline_script() -没有依赖

`wp_add_inline_style()` -没有依赖

`wp_add_inline_script()` -没有依赖