基于Gulp环境，如何不通过wp_enqueue_style为WP添加home目录样式

Hey there! I get it—sometimes you want to skip WordPress' standard wp_enqueue_style function for loading styles, especially when you're already using Gulp for your development workflow. Let's walk through exactly how to get your home/css/style.css file loaded up properly:

1. Directly Add a <link> Tag to Your Theme's Header #

The simplest way is to manually insert a stylesheet link in your theme's header file. Just make sure you're using a child theme if you're modifying a parent theme (to avoid losing changes when the parent updates).

• If home/ is in your WordPress root directory:
  Open your theme's header.php file, find the <head> section, and add this line:

  <link rel="stylesheet" href="<?php echo site_url('/home/css/style.css'); ?>">
  

• If home/ is a subfolder inside your current theme directory:
  Use WordPress' helper function to get the theme directory URL, so the path stays dynamic even if you move the theme:

  <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/home/css/style.css">
  

Pro tip for Gulp users: Just make sure your Gulp build task outputs the compiled CSS directly to home/css/style.css—that way, every time you compile your source styles, the file WordPress uses gets updated automatically.

2. Fix Browser Caching Issues #

One downside of skipping wp_enqueue_style is that WordPress won't automatically add a version number to bust browser cache. To fix this, you can append a file modification timestamp to the URL—this forces browsers to load the latest version whenever you update the CSS:

• For root directory home/:

  <link rel="stylesheet" href="<?php echo site_url('/home/css/style.css'); ?>?v=<?php echo filemtime(ABSPATH . 'home/css/style.css'); ?>">
  

• For theme-subfolder home/:

  <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/home/css/style.css?v=<?php echo filemtime(get_stylesheet_directory() . '/home/css/style.css'); ?>">
  

3. Gulp Workflow Tweaks for Smooth Development #

Since you're using Gulp, here are a couple of tweaks to make your workflow seamless:

• Set up Gulp watch to auto-compile and refresh:
  Add a watch task to your gulpfile.js that monitors your source CSS files, compiles them to home/css/style.css, and refreshes your browser automatically (using BrowserSync):

  const gulp = require('gulp');
  const sass = require('gulp-sass')(require('sass')); // Or your preprocessor of choice
  const browserSync = require('browser-sync').create();
  
  // Compile CSS to target directory
  gulp.task('css', function() {
    return gulp.src('src/css/**/*.scss') // Your source files
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest('home/css/')) // Output to your target path
      .pipe(browserSync.stream());
  });
  
  // Serve and watch for changes
  gulp.task('serve', function() {
    browserSync.init({
      proxy: 'your-local-wp-site.test' // Replace with your local WordPress URL
    });
  
    gulp.watch('src/css/**/*.scss', gulp.series('css'));
    gulp.watch('**/*.php').on('change', browserSync.reload);
  });
  
  // Default task: run css + serve
  gulp.task('default', gulp.series('css', 'serve'));
  

• Double-check your Gulp output path:
  Verify that your Gulp compile task's dest() points exactly to home/css/—this ensures your compiled styles end up where WordPress can find them without any path mix-ups.

A quick note: While these methods work perfectly for your use case, keep in mind that wp_enqueue_style is WordPress' recommended approach because it handles dependency management, avoids duplicate style loads, and integrates with core caching features. But if you have a specific reason to skip it, the above steps will get you sorted.

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