WordPress资源入队异常：样式表MIME类型错误及配置求助

Let's break down the issues in your current code and fix them step by step to properly enqueue all your assets without MIME type errors or missing styles.

主要问题分析 #

• 回调函数错误：add_action( 'wp_enqueue_scripts', '/add_theme_scripts' ); 里的函数名多了不必要的斜杠，WordPress无法识别带斜杠的函数名，应该直接传入函数名字符串。
• 主样式表路径错误：wp_enqueue_style( 'generic-style', get_stylesheet_directory_uri() ); 只传入了主题目录URI，没有指向具体的style.css文件，服务器会返回目录列表（HTML）而非CSS文件，直接导致MIME类型不匹配的错误。
• Favicon处理不当：Favicon不是样式表，不能用wp_enqueue_style加载，需要单独输出对应的<link>标签。
• LESS文件配置缺失：原代码里的LESS文件需要指定正确的type属性，同时要确保less.js在LESS文件之前加载，才能正常编译LESS代码。
• 打印样式表未指定媒体类型：print.css没有设置media="print"，会默认在所有设备上加载，不符合原需求。
• 资源路径混淆：原header用bloginfo('template_directory')（对应get_template_directory_uri()，指向父主题目录），而你用了get_stylesheet_directory_uri()（指向当前激活主题目录，子主题时就是子主题目录），如果资源在父主题中，路径需要调整。

修正后的functions.php代码 #

function add_theme_scripts() {
    // 主样式表（对应原bloginfo('stylesheet_url')）
    wp_enqueue_style( 'generic-style', get_stylesheet_uri() );

    // Bootstrap样式（父主题资源用get_template_directory_uri()）
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/bootstrap.min.css' );

    // MegaMenu样式
    wp_enqueue_style( 'megamenu-stylesheet', get_template_directory_uri() . '/assets/megamenu.css' );

    // Webfont Kit样式
    wp_enqueue_style( 'webfont-kit', get_template_directory_uri() . '/assets/MyFontsWebfontsKit.css' );

    // LESS文件：设置正确的type属性，确保less.js能识别
    wp_enqueue_style( 'less', get_template_directory_uri() . '/assets/stylesheet.less', array(), false, 'all', array(
        'type' => 'stylesheet/less'
    ) );

    // Less.js：确保在LESS文件之前加载，设为head中加载
    wp_enqueue_script( 'less-js', get_template_directory_uri() . '/assets/less.js', array(), false, false );

    // 打印样式表：指定media为print
    wp_enqueue_style( 'print-css', get_template_directory_uri() . '/assets/print.css', array(), false, 'print' );

    // Touchscroll.js：可选设为footer加载优化速度
    wp_enqueue_script( 'touchscroll', get_template_directory_uri() . '/assets/touchscroll.js', array(), false, true );
}
// 正确绑定回调函数
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

// 输出Favicon到head
function add_theme_favicon() {
    echo '<link rel="shortcut icon" href="' . get_template_directory_uri() . '/favicon.ico" />';
}
add_action( 'wp_head', 'add_theme_favicon' );

// 输出Google Translate元标签
function add_google_translate_meta() {
    echo '<meta name="google-translate-customization" content="d4ae87e62341359b-83f2b047a4c8818c-g4cbb26cb8a5f11dd-11">';
}
add_action( 'wp_head', 'add_google_translate_meta' );

关键说明 #

1. 主样式表：用get_stylesheet_uri()是WordPress推荐的写法，它会直接指向当前主题的style.css文件，避免手动拼接路径出错。
2. 资源路径区分：如果资源在父主题中，使用get_template_directory_uri()；如果是子主题自定义资源，才用get_stylesheet_directory_uri()。
3. LESS编译顺序：less.js的最后一个参数设为false，确保它在<head>中加载（必须早于LESS文件加载，才能实时编译）。
4. 非样式资源处理：Favicon和Google Translate元标签通过wp_head钩子输出，符合WordPress的钩子机制，无需修改header.php。
5. JS加载位置：touchscroll.js的最后一个参数设为true，表示在页面底部加载，能优化首屏加载速度，可根据实际需求调整。

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