WordPress子主题添加script.js后主题文件编辑器未显示该文件求助

一、解决编辑器无法显示script.js的问题 #

• 检查文件权限：通过主机控制面板的文件管理器或FTP工具，找到子主题文件夹下的script.js，将文件权限设置为644，子主题文件夹权限设置为755。权限不符合要求时，WordPress主题编辑器可能不会显示该文件。
• 让编辑器识别JS文件：WordPress主题编辑器默认只展示常见主题文件（如functions.php、style.css），可在子主题的functions.php中添加以下代码，让编辑器列出你的脚本文件：

  add_filter('wp_theme_editor_filetypes', 'allow_script_js_in_editor');
  function allow_script_js_in_editor($filetypes) {
      $filetypes[] = 'js';
      return $filetypes;
  }
  

  添加完成后刷新主题编辑器，就能看到script.js了。
• 直接绕开主题编辑器操作：如果上述方法无效，直接通过主机文件管理器或FTP工具打开script.js编辑保存，效果和在主题编辑器中操作一致。

二、确保script.js能被WordPress正常加载（关键步骤） #

仅将文件放入子主题文件夹还不够，需要在子主题的functions.php中注册并加载脚本，否则前端不会调用该文件。添加以下代码：

function child_theme_enqueue_scripts() {
    // 注册并加载script.js，若脚本不需要jQuery可移除array('jquery')
    wp_enqueue_script(
        'child-theme-script',
        get_stylesheet_directory_uri() . '/script.js',
        array('jquery'),
        wp_get_theme()->get('Version'),
        true // true表示在页脚加载，优化页面加载性能
    );
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_scripts');

说明：get_stylesheet_directory_uri()会自动获取子主题的URL，无需手动填写路径；wp_get_theme()->get('Version')用主题版本号作为脚本版本，便于缓存更新；最后一个true参数将脚本放在页脚加载，比在<head>中加载更高效。

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