将外部脚本添加到functions.php答案

【问题标题】：Add external script to functions.php将外部脚本添加到functions.php
【发布时间】：2022-06-11 00:54:51
【问题描述】：

向我的functions.php 添加外部脚本时遇到问题。它会检查是否检查了 ACF 字段以及是否在某个模板上。

这是我要添加的脚本<script type="text/javascript" src="https://play.vidyard.com/embed/v4.js?ver=1.8.52" async="async" id="vidyard-v4-js"> </script>

在加载它时没有看到任何错误，所以我认为我没有正确注册它。谢谢

function add_vidyard_script(){
if (get_field('vidyard_video') && (is_page_template('templates-page/customers.php'))) {
        wp_get_script_tag(
            array(
                'id'        => 'vidyard-v4-js',
                'async' => true,
                'src'       => esc_url( 'https://play.vidyard.com/embed/v4.js?ver=1.8.52' ),
            )
        );
        wp_enqueue_script('wp_get_script_tag');
    }
}
add_action( 'wp_enqueue_vidyard', 'add_vidyard_script');

【问题讨论】：

wp_enqueue_vidyard - 这不是 WP 中的注册操作。尝试将其更改为 wp_enqueue_scripts

标签： php wordpress

【解决方案1】：

您要使用的钩子是wp_enqueue_scripts (https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/)。
您应该将 add_action 放在 if 语句中，以免不必要地运行它。
如果您使用 ACF 中的“真/假”字段，则需要检查它是否存在以及它具有什么值。真为 1，假为 0。

所以你的代码看起来像

function add_vidyard_script(){
   wp_enqueue_script( 'vidyard-v4-js', 'https://play.vidyard.com/embed/v4.js?ver=1.8.52' );
}


if ( ( get_field('vidyard_video') && get_field('vidyard_video') == 1 ) && (is_page_template('templates-page/customers.php')) ):
    add_action( 'wp_enqueue_scripts', 'add_vidyard_script'); 
endif;

其他信息：

使用wp_enqueue_scripts可以使用参数。

第一个参数是 ID。其次是网址。第三个可能是依赖项。第四个可以是版本号。第五个可以是一个布尔值，用于在页脚中加载脚本。

所以如果你有一个id为“myscript”，url为“https://script.js”的脚本，它只适用于“jquery”，版本号为“1.0”，应该加载页脚而不是页眉：

wp_enqueue_script( 'myscript', 'https://script.js', array( 'jquery' ), '1.0', true );

如果要异步加载，则需要添加过滤器script_loader_tag 来更改脚本标签并添加异步属性。

// add async attribute to enqueued script
function my_script_loader_tag($tag, $handle, $src) {
    if ($handle === 'myscript') { // id of your script defined in wp_enqueue_script 
        if (false === stripos($tag, 'async')) {
            $tag = str_replace(' src', ' async="async" src', $tag);
        }
    }
    return $tag;
}
add_filter('script_loader_tag', 'my_script_loader_tag', 10, 3);

就是这样，只是一个小过滤器。

综合起来，您的代码如下所示：

function add_vidyard_script(){
   wp_enqueue_script( 'vidyard-v4-js', 'https://play.vidyard.com/embed/v4.js?ver=1.8.52' );
}

// add async attribute to enqueued script
function my_script_loader_tag($tag, $handle, $src) {
    if ($handle === 'vidyard-v4-js') { 
        if (false === stripos($tag, 'async')) {
            $tag = str_replace(' src', ' async="async" src', $tag);
        }
    }
    return $tag;
}


if ( ( get_field('vidyard_video') && get_field('vidyard_video') == 1 ) && (is_page_template('templates-page/customers.php')) ):
    add_action( 'wp_enqueue_scripts', 'add_vidyard_script'); 
    add_filter('script_loader_tag', 'my_script_loader_tag', 10, 3);
endif;

希望这也能让您更好地了解在 wordpress 中使用操作和过滤器。

【讨论】：

如何添加 async 和 ID？
我用额外的脚本编辑了我的答案，为脚本标签添加了一个异步属性。希望对您有所帮助！