如何在WordPress 4.9.5中正确入队子主题样式与JavaScript？

Hey Carol, let's walk through how to properly enqueue your child theme's styles and JavaScript files while working with your existing code in WordPress 4.9.5. I'll break this down step by step so it's easy to integrate.

Your current code already loads the parent theme's style and Bootstrap, but to add your child theme's custom styles correctly, keep these points in mind:

• Use get_stylesheet_directory_uri() (this targets your child theme's folder, unlike get_template_directory_uri() which points to the parent)
• Set the parent theme's style as a dependency, so your child styles load after the parent (this ensures your custom styles override parent styles properly)

Here's how to add this to your existing function:

function enqueue_parent_theme_style() {
    if ( is_page( 'product builder' ) || is_page('shopping products')) {
        // Parent theme style
        $parentStyle = 'parent-style';
        wp_enqueue_style($parentStyle, get_template_directory_uri() . '/style.css');

        // Bootstrap CSS (your existing code)
        wp_enqueue_style('bootstrap-4.0.0', get_stylesheet_directory_uri() . '/css/bootstrap.min.css', array($parentStyle));

        // Completed DataTables CSS URL
        wp_enqueue_style('dataTables', '//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css', array($parentStyle));

        // Child theme custom styles
        wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parentStyle, 'bootstrap-4.0.0'));
    }
}
add_action('wp_enqueue_scripts', 'enqueue_parent_theme_style');

Note: If your child theme's custom styles are in a subfolder (like /css/child-custom.css), adjust the path accordingly.

For JavaScript, use wp_enqueue_script() instead of wp_enqueue_style. Key best practices:

• Declare dependencies (like jQuery—Bootstrap JS relies on it)
• Load scripts in the footer (set the 5th parameter to true) for better page performance
• Use get_stylesheet_directory_uri() to target your child theme's JS files

Add this inside your existing conditional block:

// Inside the same if() block as your styles
// jQuery is registered by WordPress by default, so we can use it as a dependency
wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '4.0.0', true);

// DataTables JS (depends on jQuery)
wp_enqueue_script('dataTables-js', '//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js', array('jquery'), '1.10.16', true);

// Child theme custom JS
wp_enqueue_script('child-script', get_stylesheet_directory_uri() . '/js/child-custom.js', array('jquery', 'bootstrap-js'), '1.0.0', true);

Adjust the version number (e.g., 1.0.0) and file path to match your actual child theme JS file.

Putting it all together, your functions.php code should look like this:

function enqueue_child_and_parent_assets() {
    // Only load these assets on the specified pages
    if ( is_page( 'product builder' ) || is_page('shopping products')) {
        // Parent theme style
        $parentStyle = 'parent-style';
        wp_enqueue_style($parentStyle, get_template_directory_uri() . '/style.css');

        // External & parent-dependent styles
        wp_enqueue_style('bootstrap-4.0.0', get_stylesheet_directory_uri() . '/css/bootstrap.min.css', array($parentStyle));
        wp_enqueue_style('dataTables', '//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css', array($parentStyle));

        // Child theme custom styles
        wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parentStyle, 'bootstrap-4.0.0'));

        // JavaScript files
        wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '4.0.0', true);
        wp_enqueue_script('dataTables-js', '//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js', array('jquery'), '1.10.16', true);
        wp_enqueue_script('child-script', get_stylesheet_directory_uri() . '/js/child-custom.js', array('jquery', 'bootstrap-js'), '1.0.0', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_child_and_parent_assets');

• Double-check your page slugs: is_page('product builder') uses the page's slug (not the display name). If your page slug is product-builder instead of product builder, adjust that parameter.
• Always use WordPress's enqueue functions instead of hardcoding <link> or <script> tags—this avoids conflicts with other plugins/themes.
• WordPress 4.9.5 fully supports all these functions, so you won't run into compatibility issues.

内容的提问来源于stack exchange，提问作者Carol.Kar