Question

我已经看到在function.php，WordPress中应用了script_loader_tag函数，但是我很难完全理解它是如何工作的。

例如，我看过这样的示例：

function add_async_defer($tag, $handle) {

    if('googlemaps' !== $handle) {
        return $tag;
    }
    return str_replace(' src', 'async="async" defer="defer" src', $tag);
}
add_filter('script_loader_tag', 'add_async_defer', 10, 2);

并用于为Google Maps API生成脚本标签：

<script type='text/javascript'async="async" defer="defer" src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBz02VRxO_dgaKsBS62TLL6AW4McNTQiKU&#048;callback=initMap&#038;ver=5.2.1'></script>

但是$ tag和$ handle参数是什么意思？

数字10和2在add_filter的末尾是什么意思？

可以修改此功能以仅在特定页面中有条件地显示标签吗？

Answer 1

$handle是您在使用wp_enqueue_script时为脚本指定的名称。

$tag是将在DOM中呈现的脚本标记。

10是过滤器的优先级。更改为更大的数字将使过滤器在该过程的稍后执行。

最后，2是回调正在接受的参数数量。您的情况是$tag和$handle是2。

有关更多信息：

Answer 2

参数定义如下：

$ tag ：已排队脚本的标签。

$ handle ：脚本的注册句柄。例如，WordPress排队的jQuery的句柄为'jquery'

数字 10 表示WordPress队列中回调函数处理所有挂在script_loader_tag钩上的函数的优先级。

数字 2 表示回调函数中允许的参数数量。

@chinLeung也作了参考。

考虑您的代码示例，以下内容应进一步说明：

function add_async_defer($tag, $handle, $src) {
    if('googlemaps' !== $handle) {//Here we check if our handle is googlemaps
        return $tag; //We return the entire <script> tag as is without modifications.
    }
    return "<script type='text/javascript' async='async' defer='defer' src='".$src."'></script>";//Usually the value in $tag variable looks similar to this script tag but without the async and defer
}
add_filter('script_loader_tag', 'add_async_defer', 10, 3);

script_loader_tag函数如何工作？

2 个答案: