Loading scripts correctly avoids conflicts, improves performance, and ensures loading on demand. Use the wp_enqueue_script function to manage load order, paths, and dependencies uniformly to avoid duplicate loading and dependency confusion; the basic usage is to register and load scripts in functions.php through the wp_enqueue_scripts hook; advanced tips include using wp_register_script to separate registration and loading to control timing; precautions include using built-in libraries such as jQuery without repeated loading to ensure handle uniqueness; tips are to add async or defer attributes to scripts through filters to optimize loading methods.

Correctly loading scripts in WordPress is the basic operation in theme and plug-in development, but many people just follow the rules and do not know the meaning and correct method behind it. Simply put: the correct enqueue method can avoid conflicts, improve performance, and ensure that scripts load on demand .

The following is based on several common scenarios and talk about how to truly "correctly" use wp_enqueue_script .

Why can't I write the <script></script> tag directly?

In order to save trouble, many novices will directly insert <script></script> tags into the header or footer of the theme to introduce JS files. This seems to be fine, but there are actually many hidden dangers:

• It is easy to cause duplicate loading
• Unable to control dependencies (such as a script requires jQuery)
• Not conducive to cache optimization and performance management
• Conflicts are prone to between plug-ins and themes

Therefore, WordPress provides the wp_enqueue_script function, which is to uniformly manage the loading order, path and dependencies of scripts.

Basic usage: Register and load a script

The most commonly used function is wp_enqueue_script() , which is generally placed in the functions.php file of the topic and is called through wp_enqueue_scripts hook.

The sample code is as follows:

 function my_theme_scripts() {
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Parameter description:

• 'my-script' : The handle of the script, used to identify this script
• The second parameter is the URL path of the script
• The third parameter is the dependency array. For example, if you depend on jQuery, write array('jquery')
• The fourth parameter is the version number, used for browser cache control
• The last one is whether it is loaded in footer ( true means it is placed at the bottom)

Advanced tips: Use wp_register_script to register and load separately

If you want more flexibility in controlling the time of script loading, you can register the script before deciding where to load it.

 function my_theme_register_scripts() {
    wp_register_script( 'custom-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_register_scripts' );

// Load if ( is_front_page() ) {
    wp_enqueue_script( 'custom-slider' );
}

The benefits of doing this are:

• Avoid unnecessary loading and improve page speed
• Better control over resource requirements on different pages
• Easier to collaborate with plugins or reuse scripts

Notes: Alias and Avoid Conflicts

WordPress has many commonly used libraries built in, such as jQuery, React, etc. Do not reload these libraries yourself , otherwise it may cause plug-in to fail or function abnormalities.

For example, if you want to use jQuery:

 wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), null, true );

Just write 'jquery' here, and WordPress will automatically load the built-in jQuery for you, and you don't need to manually specify the path.

In addition, when naming your own script, you should also pay attention to the unique handle, such as not calling jquery or bootstrap to avoid conflicts with other plug-ins.

Tips: Script loading location and asynchronous loading

By default, the script is loaded in the head area, and it will be placed in the footer unless you set the 5th parameter to true .

If you want some scripts to load asynchronously (async) or deferredly (defer), you can add attributes through the filter:

 function add_async_attribute( $tag, $handle ) {
    if ( 'my-script' === $handle ) {
        return str_replace( ' src', ' async src', $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_async_attribute', 10, 2 );

This approach is suitable for non-critical scripts, such as statistical code or third-party services.

Basically that's it. Although the enqueue script does not seem complicated, the details are not done properly, which can easily affect the website stability and user experience. By mastering these methods, you can better control front-end resources and write more robust WordPress themes and plug-ins.

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