为什么wp_enqueue_style在这里不起作用？

Question

I'm developing a theme on WordPress. My index.php and style.css are in the same folder, at the root of the theme directory. My css files are in a "css" folder, my js files are in "js" folder. I want to add the CSS and JS to the index ( with the wp enqueue style/script ) in the functions.php file

add_action( 'wp_enqueue_scripts', 'add_stylesheet' );
function add_stylesheet() {
    wp_register_style('style', get_template_directory_uri() . '/style.css');
    wp_register_style('plugins', get_template_directory_uri() . '/css/plugins.css');
    wp_register_style('nav', get_template_directory_uri() . '/css/navigation-menu.css');
    wp_register_style('shortcode', get_template_directory_uri() . '/css/shortcodes.css');
    wp_enqueue_style('style');
    wp_enqueue_style('plugins');
    wp_enqueue_style('nav');
    wp_enqueue_style('shortcode');
}

But that doesn't work. I tried with a 'if' condition, I tried with just the wp_enqueue_style function ( and many other solutions I found on google ), but none of these work. I have no idea what the problem is.

Here's a screenshot of the file tree

Edit : It doesn't work as in the css is not linked to the php files, it shows plain HTML text. If I open the dev tools, it shows no CSS properties.

Like that

Thanks !

Answer 1

The main difference between wp_enqueue_* and respective wp_register_* functions, is that the first adds scripts/styles to the queue and the second prepares scripts/styles to be added.

You need to move the add action after the function and it'll work:

function add_stylesheet() {
    wp_register_style('style', get_template_directory_uri() . '/style.css');
    wp_register_style('plugins', get_template_directory_uri() . '/css/plugins.css');
    wp_register_style('nav', get_template_directory_uri() . '/css/navigation-menu.css');
    wp_register_style('shortcode', get_template_directory_uri() . '/css/shortcodes.css');
    wp_enqueue_style('style');
    wp_enqueue_style('plugins');
    wp_enqueue_style('nav');
    wp_enqueue_style('shortcode');
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );

Updated answer below:

Why not just enqueue the styles instead of registering and then enqueuing them, like this:

function theme_scripts()
{
    wp_enqueue_style('style', get_template_directory_uri() . '/style.css');

wp_enqueue_style('style', get_template_directory_uri() . 'wp_enqueue_style('plugins', get_template_directory_uri() . '/style.css');');

}

add_action('wp_enqueue_scripts', 'theme_scripts');