How does WordPress properly introduce JavaScript?Custom loading of JS and CSS files

Programmers who use WordPress to build websites will reference some JavaScript and CSS script resources when developing WordPress plugins or customizing WordPress themes.

• Usually, people use link, script tags directly for HTML.
• In fact, WordPress has built-in sophisticated functions and methods for referencing scripts.
• So, using WordPress' built-in method references is more professional and more extensible.

The flawed citation method

There are two common citation methods, it's fine, it's just not perfect or reasonable.

Method 1: Using the link tag to reference a CSS file

• Script tags apply JS files.Not detailed here.

Method 2: Use the wp_head function

• The wp_head function is used to output some custom or system-defined content.
• We sometimes use the following code to reference this file:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Copy the above code into the functions.php file to reference the corresponding files.

WordPress Enqueue Scripts resource mechanism

As we all know, WordPress has a lot of plugins:

• Almost every plugin references some resource file.
• Inevitably, there will be conflicts between resources referenced by two plugins, which will become unstable and may affect efficiency.

Use the wp_enqueue_script function

• To reference a resource in WordPress you should usewp_enqueue_scriptA function that has the word enqueue in the name of the enqueued or sorted function.
• With WordPress' way of enqueueing resources (Enqueue Scripts), the references are separated from the corresponding files and core code.
• If the user wants to disable the resource, he can delete, modify and comment it without modifying it from the core code.

Also, some commonly used libraries like jQuery, jQuery UI, etc. are built into WordPress.

We can use the wp_enqueue_script function to call the built-in library directly, which saves code and a clearer specification.

If you use this function to reference your own JS and CSS files, you need to usewp_register_scriptThe function registers an identifier (handle) and then useswp_enqueue_scriptThe function calls the resource corresponding to this flag.

How to properly import JS and CSS files in WordPress?

WordPress provides sensible import methods for JS and CSS methods.

You can use the following code to import the plugin.css file into the plugin ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

The above uses the wp_register_script function to create a resource with the identifier plugin_stylesheet.

Then, add its queued requests towp_enqueue_scriptsactions are in operation.

While the function name is a script, it has nothing to do with the type of resource file and is valid for both CSS and JS.

The wp_register_script function is really not that simple, it can have five parameters:

1) $handle: Resource identifier.

• Bywp_enqueue_scripttransfer.

2) $src: The location of the resource.

• Relative or absolute addresses use WordPress built-in functions to get addresses, etc.
• CommonPositioningfunction hasplugins_url,get_template_directory_uriand so on.

3) $deps: Dependency.

• If you are referring to the jQuery plugin and need to rely on jQuery to build, you need to fill in jQuery.
• Note that it is passed as an array.

4) $ver: Resource version, optional.

5) $in_footer: Should it be placed at the bottom?

• Normally, JS files should be placed at the bottom of the page, you can set this parameter to True, leave it blank or False to output to the top.

Let's look at a more complete JavaScript file reference example ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

WordPress themes use wp_enqueue_script to import resources

Programmers in WordPress theme development, usewp_enqueue_scriptImport resources.

• The above examples are examples of referenced resources for WordPress plugin development.
• The method referenced in the topic is similar.

The main difference is to use the corresponding function to get the theme directory to get the resource file address under the theme.

you can useget_template_directory_urifunction to get the current theme directory.

If you are using a child theme, you will need to useget_stylesheet_directory_uriThe function gets the parent theme's directory to get the corresponding resources.