WordPress中CSS/JS文件已在源码显示但无法加载问题求助

Hey there, let's work through why your CSS and JS files aren't loading even though their references show up in the page source. I took a quick look at your site and here are the most actionable fixes to try:

1. Double-Check File Paths #

When using WordPress's wp_enqueue_style() or wp_enqueue_script() functions, the file path has to match exactly where your assets live in your theme folder. For example, if your CSS is stored in a /css subdirectory, your code should look like this:

wp_enqueue_style('custom-theme-style', get_template_directory_uri() . '/css/main.css', array(), '1.0.0');

Open your browser's Network tab (press F12 to open Developer Tools) — if you see 404 errors for these files, that means the path is incorrect. Double-check your theme's folder structure and adjust the URI to match.

2. Fix File Permissions #

Incorrect server permissions can block access to your CSS/JS files. For individual files, set permissions to 644; for folders containing these assets, use 755. You can adjust this via your hosting control panel (like cPanel) or an FTP client.

3. Use the Correct Enqueue Hook #

Never paste enqueue functions directly in functions.php — always hook them to wp_enqueue_scripts to ensure WordPress loads assets at the right time in the page lifecycle. Here's a proper example:

function my_theme_load_assets() {
    // Enqueue CSS
    wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/style.css');
    // Enqueue JS (depends on jQuery, loads in footer)
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_load_assets');

4. Clear All Caches #

Caching can often be the culprit here. Try:

• Hard-refreshing your browser (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) to clear local cache
• Temporarily disabling WordPress caching plugins (like WP Super Cache)
• Purging your CDN cache if you're using one (e.g., Cloudflare)

5. Inspect Browser Console Errors #

Open your browser's Developer Tools (F12) and go to the Console tab. Look for error messages like:

• 404 Not Found: Confirms the file path is wrong
• CORS errors: Indicates cross-domain access issues (rare for local theme assets, but possible if loading from external sources)
• Failed to load resource: Points to server-side blocks preventing file access

These errors will give you direct clues about what's broken.

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