How does WordPress reference javascript and CSS files?

The first is the common link label that references CSS files. The Script label applies JS files. I will not go into details here.

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

The code is as follows:	Copy code
<? Php Add_action ('WP _ head', 'wpjam _ normal_script '); Function wpjam_normal_script (){ Echo 'resource File link '; } ?>

Copy the above code to the functions. php file to reference the corresponding file.

Enqueue Scripts resource mechanism
To reference resources in WordPress, use the wp_enqueue_script function. The function name contains the word enqueue, which means queuing or sorting. As we all know, WordPress has many plug-ins. Almost every plug-in will reference some resource files, and there will inevitably be conflicts between the resources referenced by two plug-ins, which will become unstable and may affect efficiency.

If you want to disable a resource, you can directly delete, modify, and comment it out from the corresponding file and core code without modifying it from the core code.

In addition, WordPress has built-in common libraries (such as jQuery and jQuery UI). We can use the wp_enqueue_script function to directly call the built-in libraries, which saves the amount of code and makes it clearer and more standardized. Click here to view the list and identifier (handle) of the built-in defined Library.

If you use this function to reference your own JS and CSS files, you must first use the wp_register_script function to register an identifier (handle), and then use the wp_enqueue_script function to retrieve the resource corresponding to this identifier.

 

How WordPress reasonably introduces JS and CSS
You can use the following code to introduce the plugin.css file for your plug-in.

The code is as follows:	Copy code
<? Php Function wpjam_add_styles (){ Wp_register_script ('In in _ stylesheet ', plugins_url('plugin.css', _ FILE __)); Wp_enqueue_script ('In in _ stylesheet '); }   Add_action ('WP _ enqueue_scripts ', 'wpjam _ add_styles '); ?>

The preceding code uses the wp_register_script function to create a resource with the identifier plugin_stylesheet, and then adds the queuing request to the wp_enqueue_scripts action. Although the function name is a script, it has nothing to do with the type of the resource file and is effective for both CSS and JS.

Obviously, the wp_register_script function is not that simple. It can have five parameters:

• $ Handle: Resource identifier, which can be called by wp_enqueue_script.
• $ Src: resource location. Obtain the relative address or absolute address, or use the built-in WordPress function to obtain the address. Common positioning functions include plugins_url and get_template_directory_uri.
• $ Deps: dependency. If the jQuery plug-in is referenced and dependent on jQuery, you must enter jQuery. Note: it is transmitted as an array.
• $ Ver: Resource version, optional.
• $ In_footer: whether to put it at the bottom. Generally, if a JS file is to be placed at the bottom of the page, you can set this parameter to True. If it is left blank or False, it will be output to the top.
The following is a complete example of referencing a JavaScript file:

The code is as follows:	Copy code
<? Php Function wpjam_add_scripts (){ Wp_register_script ('In in _ script', plugins_url ('In in _ script. JS', _ FILE _), array ('jquery '), '1. 1', true ); Wp_enqueue_script ('In in _ script '); }   Add_action ('WP _ enqueue_scripts ', 'wpjam _ add_scripts '); ?>

Use wp_enqueue_script to introduce resources in WordPress topic development.
The above examples use plug-in development to reference resources. The reference methods in a topic are similar. The main difference is that the corresponding function is used to obtain the topic directory and obtain the resource file address under the topic.

You can use the get_template_directory_uri function to obtain the Directory of the current topic. If you are using a subtopic, you need to use the get_stylesheet_directory_uri function to obtain the Directory of the parent topic and obtain the corresponding resource.