本文讲解在 WordPress（特别是 WooCommerce）中，如何根据 PHP 条件（如 is_product()）安全、正确地动态加载外部 JavaScript 文件，避免直接 include 脚本或输出未闭合的 HTML 导致的错误。
本文讲解在 wordpress（特别是 woocommerce）中，如何根据 php 条件（如 `is_product()`）安全、正确地动态加载外部 javascript 文件，避免直接 `include` 脚本或输出未闭合的 html 导致的错误。
在 WordPress 主题或插件开发中，常需按页面类型（如 WooCommerce 商品页）条件化加载特定脚本。但常见误区包括：使用 include('script.js')（PHP 会尝试解析 JS 为 PHP 代码，导致错误），或拼接 <script> 标签时遗漏闭合标签、引号不匹配，引发致命错误或前端失效。</script>
✅ 正确做法是：在 HTML 输出阶段，用 PHP 判断条件，并仅输出标准 <script src="..."> 标签</script>。该标签由浏览器解析并异步加载 JS，完全符合 Web 标准。
例如，在 WooCommerce 商品页加载 script.js，推荐以下两种写法（任选其一）：
<?php if (is_product()) : ?> <script type="text/javascript" src="<?php echo esc_url(get_template_directory_uri() . '/js/script.js'); ?>"></script> <?php endif; ?>
或更简洁的内联写法：
立即学习“PHP免费学习笔记（深入）”；
<?php
if (is_product()) {
echo '<script type="text/javascript" src="' . esc_url(get_template_directory_uri() . '/js/script.js') . '"></script>';
}
?>⚠️ 注意事项：
- 务必使用 esc_url() 对脚本路径进行转义，防止 XSS 漏洞；
- 脚本路径建议使用 get_template_directory_uri()（子主题兼容）或 plugins_url()（插件内），而非硬编码相对路径；
- 避免在 template_redirect 等早期钩子中 echo HTML —— 此时 HTML 尚未开始输出，可能导致 headers 已发送错误；
- 如需依赖 jQuery 或确保 DOM 就绪，应在 JS 文件内部使用 document.addEventListener('DOMContentLoaded', ...) 或 jQuery(function($) { ... })，而非依赖 window.load（后者等待全部资源，延迟高）。
? 进阶建议：对于生产环境，推荐使用 wp_enqueue_script() 配合条件钩子（如 wp_enqueue_scripts），实现依赖管理、版本控制与正确加载时机：
add_action('wp_enqueue_scripts', 'conditionally_enqueue_product_script');
function conditionally_enqueue_product_script() {
if (is_product()) {
wp_enqueue_script(
'custom-product-script',
get_template_directory_uri() . '/js/script.js',
array('jquery'), // 依赖项
'1.0.0',
true // $in_footer
);
}
}这种方式更符合 WordPress 最佳实践，支持脚本去重、压缩合并及调试模式自动加版本号。
