WordPress自定义主题：将资源路径迁移至assets文件夹

Got it, let's walk through this step by step—moving your theme's static assets into an assets folder is a great way to keep your theme organized, and it's totally doable with WordPress's built-in functions. I'll break this down into simple, actionable steps:

First, physically move your assets into the new assets folder in your theme root:

• Drag all CSS files into wp-content/themes/your-theme/assets/css/
• Drop your JS files into wp-content/themes/your-theme/assets/js/
• Move images into wp-content/themes/your-theme/assets/img/
  Make sure you don't miss any nested files or dependencies here!

WordPress recommends using wp_enqueue_style() and wp_enqueue_script() to load assets (instead of hardcoding links in templates). We'll use get_template_directory_uri() (you probably meant this instead of get_template_repository_uri()) to get your theme's root URL, then append the assets path.

Example: Enqueue CSS #

Add this to your theme's functions.php:

function my_custom_theme_enqueue_styles() {
    // Get the absolute URL to your theme's root folder
    $theme_root_uri = get_template_directory_uri();
    
    // Enqueue your main stylesheet from the new assets path
    wp_enqueue_style(
        'custom-theme-main-style', // Unique handle for the stylesheet
        $theme_root_uri . '/assets/css/style.css', // Full URL to the file
        array(), // Dependencies (leave empty if none)
        wp_get_theme()->get('Version'), // Theme version (for cache busting)
        'all' // Media type (all screens)
    );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );

Example: Enqueue JS #

Similarly, for JavaScript files:

function my_custom_theme_enqueue_scripts() {
    $theme_root_uri = get_template_directory_uri();
    
    wp_enqueue_script(
        'custom-theme-main-script', // Unique handle
        $theme_root_uri . '/assets/js/main.js', // Full URL
        array('jquery'), // Dependencies (e.g., jQuery)
        wp_get_theme()->get('Version'), // Version
        true // Load in footer (better for performance)
    );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_scripts' );

Note for child themes: If you're working with a child theme, use get_stylesheet_directory_uri() instead—it points to the child theme's root, whereas get_template_directory_uri() targets the parent theme.

If you have hardcoded image links in templates (like header.php or single.php), update them to use the same URI function:

<!-- Old way (hardcoded) -->
<img src="/wp-content/themes/your-theme/logo.png" alt="Logo">

<!-- New way (dynamic and safe) -->
<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/logo.png' ); ?>" alt="Site Logo">

Always use esc_url() here—it sanitizes the URL to prevent security issues.

To avoid repeating the full path every time, add a tiny helper function to functions.php:

function my_theme_get_asset( $asset_path ) {
    // Trim leading slashes to avoid double slashes in the URL
    $clean_path = ltrim( $asset_path, '/' );
    return esc_url( get_template_directory_uri() . '/assets/' . $clean_path );
}

Now you can call assets with just:

// For images
<img src="<?php echo my_theme_get_asset( 'img/logo.png' ); ?>" alt="Site Logo">

// For enqueuing styles
wp_enqueue_style( 'custom-theme-main-style', my_theme_get_asset( 'css/style.css' ), array(), wp_get_theme()->get('Version'), 'all' );

After making these changes:

1. Clear your browser cache and any WordPress caching plugins you use
2. Load your site to verify all assets load correctly (check the browser's DevTools > Network tab if something breaks)

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