WordPress下如何结合Functions.php与JS实现仅移动端加载CSS

核心问题就是搞混了两类代码的运行环境：

• wp_enqueue_style()是WordPress提供的PHP函数，只能在服务器端运行，作用是服务器生成页面HTML时，直接把对应的CSS引用标签写进页面源码，整个流程在用户看到页面前就完成了，根本等不到前端JS的判断结果
• 写在<script>标签里的JS是在用户本地浏览器上运行的，完全识别不了PHP语法，把PHP函数直接塞到JS代码块里，浏览器只会把这行当成无效纯文本忽略，自然加载不了样式

你本来想做的是等JS判断完设备类型，再决定要不要加载这个CSS，但wp_enqueue_style的执行时机在服务端就走完了，和前端JS的判断链路完全接不上，两种逻辑根本没法直接嵌到一起。

完全可以保留你一开始选的matchMedia判断规则，按照WordPress的规范写进functions.php，不需要单独创建外部JS文件，核心思路很简单：

• 先用PHP把要加载的CSS文件路径，输出成前端JS能直接读取的配置值，千万别在JS里硬塞PHP函数
• 等页面加载完成后，JS判断当前是760px以下的移动端尺寸时，动态创建CSS引用标签插到页面头部，触发样式加载

具体要加到functions.php里的代码如下：

// 把逻辑挂载到WordPress的脚本加载流程中
add_action('wp_enqueue_scripts', function() {
    // 这里填你主题实际已经加载的JS脚本句柄，大部分主题直接填'jquery'即可正常运行
    $mount_handle = 'jquery';

    // 把CSS的文件路径传给前端JS，无需在JS代码里硬写路径
    wp_localize_script(
        $mount_handle,
        'mobileStyleConfig',
        array(
            'responsive_css' => get_template_directory_uri() . '/responsive.css'
        )
    );

    // 注入移动端判断、动态加载样式的JS逻辑
    wp_add_inline_script($mount_handle, "
        jQuery(document).ready(function($) {
            // 完全沿用你之前写好的判断规则
            const isMobile = window.matchMedia('only screen and (max-width: 760px)');
            
            if (isMobile.matches) {
                // 动态生成CSS引用标签
                const styleLink = document.createElement('link');
                styleLink.rel = 'stylesheet';
                styleLink.href = mobileStyleConfig.responsive_css;
                document.head.appendChild(styleLink);
            }
        });
    ");
});

• 代码里的$mount_handle = 'jquery'，如果你的主题没加载jQuery，可以换成主题实际注册的前端脚本句柄（在主题原有wp_enqueue_script的注册代码里能看到对应的句柄值），保证内联的JS逻辑等依赖加载完成再执行，不会报“找不到jQuery”的错误
• 这套实现不会在桌面端发起对responsive.css的请求，只有当屏幕宽度符合判断条件时，才会动态拉取对应的样式文件，完全匹配你最初的需求
• 别学之前那种直接在functions.php里硬切PHP、写一堆?> <script>...</script> <?php的拼接写法，这种写法很容易把脚本输出到页面的错误位置，搞乱加载顺序、出现依赖找不到的报错，用WordPress自带的脚本挂载函数是最稳定的方式

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