WordPress JS实现CSS异步加载如何正确调用template_directory变量？

问题根源 #

template_directory是WordPress服务端PHP侧的路径标识，纯前端JavaScript运行时根本无法直接读取服务端的PHP变量值。你之前尝试写的'template_directory + "/inc/css/ptth_nav.min.css"'，拼出来的是纯字面量字符串，浏览器会把这串内容当成当前页面路径下的相对地址发请求，根本匹配不到真实的主题文件目录，自然加载失败。

分场景解决方案 #

根据你的JavaScript代码存放位置不同，选对应实现方式即可，两种方式都能完全替代硬编码的完整URL：

场景1：JS代码直接嵌在主题PHP模板文件中（如header.php、footer.php） #

这是成本最低的实现方式，不需要额外配置。直接在loadCSS的参数位置，用PHP输出主题目录的URI值即可，渲染到浏览器端时就会自动生成完整的合法链接：

function loadCSS( href, before, media ){
  "use strict"; 
  var ss = window.document.createElement( "link" );
  var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
  ss.rel = "stylesheet"; 
  ss.href = href; 
  ss.media = "only x";
  ref.parentNode.insertBefore( ss, ref );
  setTimeout( function(){ 
    ss.media = media || "all"; 
  } );
  return ss; 
}
// 替换原硬编码URL的调用逻辑
loadCSS("<?php echo get_template_directory_uri(); ?>/inc/css/ptth_nav.min.css");

这里用到的get_template_directory_uri()，输出的就是你原本硬写的https://example.com/wp/wp-content/themes/theme_name的完整主题根路径，和你之前的硬编码效果完全一致。

场景2：JS代码存放在独立的.js静态文件中 #

这种情况没法在静态JS文件里直接嵌入PHP代码，需要用WordPress官方的脚本本地化机制，把主题路径值传递给前端JS全局变量：

• 在主题的functions.php文件中，找到注册加载该JS文件的代码段，用wp_localize_script把主题路径注入到全局配置中：

  // 替换成你实际的JS文件注册句柄、路径信息
  wp_enqueue_script( 
    'custom-async-loader', // 这是脚本的唯一句柄，和你自己注册的保持一致
    get_template_directory_uri() . '/js/your-async-css-loader.js', // 你的loadCSS函数所在的js文件路径
    [], 
    '1.0', 
    true 
  );
  // 将主题路径传递给前端JS，生成全局可访问的配置对象
  wp_localize_script( 'custom-async-loader', 'themeGlobalConfig', [
    'templateDir' => get_template_directory_uri()
  ] );
  

• 配置完成后，在独立的.js文件里直接读取全局配置的路径值，替换原硬编码的URL调用：

  // 原loadCSS函数保持不变，只修改调用时的路径参数
  loadCSS(themeGlobalConfig.templateDir + "/inc/css/ptth_nav.min.css");
  

注意事项 #

• 路径函数区分：如果是子主题开发场景，get_template_directory_uri()返回的是父主题的目录路径，需要换成get_stylesheet_directory_uri()才能匹配子主题的实际目录，避免路径指错。
• 你当前使用的loadCSS函数本身逻辑没有问题，之前硬编码完整URL可以正常运行，说明不需要调整函数内部实现，所有问题都出在路径参数的取值方式上。

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