如何将TensorFlow JS示例HTML页面及关联JS集成到本地测试WordPress站点

方案一：集成到现有WordPress页面（优先实现） #

操作步骤 #

• JS文件存储：在当前激活的WordPress主题根目录下新建tf-custom-js文件夹，将webcam.js、rps-dataset.js、index.js三个文件上传至该文件夹
• 脚本引入：将以下代码添加到主题functions.php文件末尾，需将代码中的123替换为你要放置该功能的WordPress页面ID

add_action( 'wp_enqueue_scripts', 'enqueue_tf_custom_scripts' );
function enqueue_tf_custom_scripts() {
    // 仅在指定页面加载脚本
    if ( is_page( 123 ) ) {
        wp_enqueue_script( 'tfjs-cdn', 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest', array(), 'latest', false );
        wp_enqueue_script( 'tf-webcam', get_template_directory_uri() . '/tf-custom-js/webcam.js', array('tfjs-cdn'), '1.0', true );
        wp_enqueue_script( 'tf-dataset', get_template_directory_uri() . '/tf-custom-js/rps-dataset.js', array('tf-webcam'), '1.0', true );
        wp_enqueue_script( 'tf-index', get_template_directory_uri() . '/tf-custom-js/index.js', array('tf-dataset'), '1.0', true );
    }
}

• 页面内容添加：新建/编辑目标WordPress页面，插入「自定义HTML」区块，将原HTML代码中<body>标签内的所有DOM内容复制到该区块即可，无需额外添加script、html等外层标签。

常见问题修复 #

之前预览正常发布后失效，大多是因为使用了硬编码的本地路径或相对路径，get_template_directory_uri()会自动生成适配站点的动态路径，可解决该问题。

方案二：独立HTML页面直接访问 #

操作步骤 #

• 文件存储：在WordPress站点根目录（与wp-content、wp-admin文件夹同级目录）新建tf-demo文件夹，将完整的原HTML文件和三个JS文件全部上传至该文件夹
• 访问方式：直接通过站点域名/tf-demo/即可访问该功能页面，如需在WordPress站点内添加入口，在菜单/文章中添加对应路径的链接即可。

优缺点说明 #

该方案无需修改主题代码，不会和WordPress现有功能产生冲突，调试成本低；缺点是页面默认不继承站点的主题样式、导航栏等公共元素。

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