To properly introduce style files in WordPress themes or plugins, you should use the wp_enqueue_style() function. 1. Use wp_enqueue_style() to register and load the CSS file. The basic structure is wp_enqueue_style($handle, $src, $deps, $ver, $media), where $handle is a unique identifier, $src is the CSS file URL, $deps is a dependency style, $ver is the version number, and $media is the media type; 2. Use enqueue operations to place the functions.php file and execute it with the wp_enqueue_scripts hook to ensure correct loading; 3. Use conditions to judge such as is_front_page(), is_single() or is_page_template() to control the loading of specific pages for specific styles; 4. To avoid conflicts, each handle should be unique. It is recommended to be named with a prefix, and you can check whether it is registered through wp_style_is(); 5. The parent theme style should be loaded first in the child theme, then the child theme style should be loaded, and the dependencies should be set to ensure the correct order.

Properly introducing style files in WordPress themes or plugins is not as rough as simply echo '<link>' . The correct way is to use the wp_enqueue_style() function, which can avoid conflicts, improve performance, and better manage dependencies.

The basic structure using wp_enqueue_style

wp_enqueue_style() is an official function provided by WordPress, used to register and load CSS files. Its basic usage is as follows:

 wp_enqueue_style( $handle, $src, $deps, $ver, $media );

• $handle : a unique identifier (ID) of the style, such as 'my-style'
• $src : The URL address of the CSS file
• $deps : Other styles that this style depends on, such as 'main-style'
• $ver : version number, used for cache control, can be set filemtime(get_stylesheet_directory() . '/style.css') to automatically obtain the modification time
• $media : media types, such as 'all' , 'screen' , 'print' , etc., default is 'all'

Generally, we will place the enqueue operation in the functions.php file of the topic and execute it through the wp_enqueue_scripts hook.

Load specific styles only when needed

Sometimes we just want to load specific CSS files in a certain page or template, such as home page, article details page, or custom template page. At this time, you can use the condition to determine whether the enqueue is controlled.

Common ways of judgment are:

• is_front_page() : determines whether it is the home page
• is_single() : determines whether it is a single article page
• is_page_template('template-name.php') : determines whether a page template is used

For example:

 add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles' );
function enqueue_custom_styles() {
    if ( is_page_template( 'template-landing.php' ) ) {
        wp_enqueue_style( 'landing-style', get_template_directory_uri() . '/css/landing.css' );
    }
}

Doing so can reduce unnecessary resource loading, speed up page speed, and avoid style conflicts.

Pay attention to the naming and deduplication of handles

Each style file must have a unique handle name. If you accidentally register an existing handle repeatedly, the style may not be loaded or overwritten.

For example, if you use 'main-style' and a plugin also uses the same name, there may be problems. Therefore, it is recommended to give your style a prefixed name, such as 'yourtheme-main-style' or 'yourplugin-style' .

If you want to confirm whether a style has been registered, you can use wp_style_is( $handle, 'registered' ) to check it.

Handle style loading in child themes

If you are developing a child theme, you usually want to load the style of the parent theme first and then the style of the child theme. At this time, pay attention to order and dependencies.

Recommended writing method:

 add_action( 'wp_enqueue_scripts', 'enqueue_parent_and_child_styles' );
function enqueue_parent_and_child_styles() {
    // Register the parent theme style wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    //Register child theme styles again, relying on parent style wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
}

Note get_template_directory_uri() is used here to point to the parent theme directory, and get_stylesheet_directory_uri() is used to point to the current child theme directory.

Basically that's it. As long as you remember to use hooks, set handles and dependencies reasonably, and load on demand, you can avoid the problem of loading most styles.

The above is the detailed content of How to enqueue styles correctly in WordPress. For more information, please follow other related articles on the PHP Chinese website!