如何在PHP中为wp_enqueue_script引入的脚本添加defer属性？

我在HTML中使用如下代码引入了Google地图脚本：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrAbBwliakQCs7vDgLGilKQnicEc0-8hA&callback=initMap&v=weekly" defer></script>

现在需要在PHP中使用wp_enqueue_script函数引入该脚本时，为其添加defer属性，当前代码如下：

wp_enqueue_script('google-map', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCrAbBwliakQCs7vDgLGilKQnicEc0-8hA&callback=initMap&v=weekly', [], $version, true);

请问是否有可行的解决方案？

WordPress的wp_enqueue_script本身没有直接设置defer属性的参数，但可以通过script_loader_tag过滤器来给指定脚本加上这个属性，具体操作如下：

1. 保留你现有的wp_enqueue_script调用（最后一个参数true是让脚本加载在页脚，和defer不冲突）：

wp_enqueue_script('google-map', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCrAbBwliakQCs7vDgLGilKQnicEc0-8hA&callback=initMap&v=weekly', [], $version, true);

2. 添加下面的过滤器函数，专门给google-map这个脚本句柄添加defer属性：

add_filter('script_loader_tag', function($tag, $handle) {
    if ('google-map' !== $handle) {
        return $tag;
    }
    return str_replace(' src=', ' defer src=', $tag);
}, 10, 2);

补充说明 #

• 这个过滤器会拦截所有脚本的输出标签，当匹配到我们指定的google-map脚本时，就在src属性前面插入defer关键字，这样最终输出的脚本标签就会带有defer属性了。
• 如果需要同时添加async属性，也可以用同样的思路修改，比如把替换内容改成 defer async src=即可。
• 把这段过滤器代码放到主题的functions.php文件里，或者自定义插件中就能生效。

内容的提问来源于stack exchange，提问作者bgood