在PHP中调用外部JS文件内的函数实现WordPress站点各区域配色修改

1. 脚本调用语法错误 #

这是代码不生效的核心原因：浏览器规定，如果<script>标签设置了src属性，标签内部包裹的所有代码都会被直接忽略，不会执行。
你需要把外部脚本引入和函数调用拆成两个独立的<script>标签：

<script type="text/javascript" src="正确的JS文件路径"></script>
<script type="text/javascript">
headerColor();
</script>

2. WordPress路径错误修正 #

你直接写js/change.color.js属于相对路径，在WordPress的不同页面（首页、详情页、归档页等）会自动拼接当前页面的URL作为前缀，大概率会出现404错误导致JS文件加载失败。
如果把JS文件放在当前主题的js目录下，需要用WordPress官方提供的路径函数输出绝对路径：

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/change.color.js"></script>
<script type="text/javascript">
// 等待DOM加载完成后再执行，避免找不到对应DOM元素
document.addEventListener('DOMContentLoaded', function() {
    headerColor();
    // 其他页面的配色函数可以根据页面判断调用，比如归档页可加判断 if(is_archive()) { archiveColor(); }
});
</script>

3. JS代码语法错误修正 #

你提供的JS代码本身存在语法错误，会导致函数执行中断：

// 修正前
function titleColor() {
    init();
    changeBackgroundColor();
    changeTextBlackWhite();
    changeTiktokIconBlackWhite // 这里缺少调用括号和结束分号
}
// 修正后
function titleColor() {
    init();
    changeBackgroundColor();
    changeTextBlackWhite();
    changeTiktokIconBlackWhite(); // 补全函数调用标识
}

4. 可选优化：WordPress标准脚本入队方式 #

如果需要更规范的引入方式，符合WordPress开发规范，推荐在主题的functions.php中使用wp_enqueue_script方法加载JS文件，避免重复加载、依赖管理等问题：

function custom_color_script_enqueue() {
    // 入队自定义配色JS
    wp_enqueue_script( 'custom-color-script', get_stylesheet_directory_uri() . '/js/change.color.js', array(), '1.0.0', true );
    // 注入执行代码
    wp_add_inline_script( 'custom-color-script', '
        document.addEventListener("DOMContentLoaded", function() {
            headerColor();
        });
    ' );
}
add_action( 'wp_enqueue_scripts', 'custom_color_script_enqueue' );

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