How WordPress correctly loads JS files and CSS files

In the process of making the wordpress theme monkey wordpress plug-in, we often need to add style files or js script files. Since most users run multiple plug-ins on their websites, various files may be loaded, which can easily cause conflicts. Therefore, the WordPress system provides developers with a good queuing system for scripts and style files, which helps prevent script conflicts between plug-ins. In this article, I mainly introduce how to add Javascript files and CSS files in WordPress. It is especially useful for those who are just starting to learn WordPress theme and plug-in development.

Wrong way

Wordpress provides the wp_head hook to help us add specified header messages, such as common keywords and descriptions, to the head of the page. Many people also use this method to add the external style of the site. file and script file, add the following code:

add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo '
'; //添加js文件
}
?>

Although this method is simple to use, it is not recommended. This loading method can easily cause conflicts with WordPress scripts.

Wordpress script queuing system

1. Introduction

Wordpress has a strong development community around the world. Many people are very actively involved in the development of WordPress themes and plug-ins, and they can be used for free. In order to prevent various developers from There are always script conflicts during the use of developed plug-ins. WordPress provides a very powerful script loading function wp_enqueue_script. Through this function, we can tell WordPress where to load the script and which frameworks the script depends on. Moreover, this function uses the built-in Javascript library, you can avoid loading the same script multiple times. This helps reduce page load times, as well as avoid conflicts with other themes and plugins.

2. Usage examples

Using the WordPress correct loading script is very simple, the code is as follows:

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

You can put the above code into your plug-in file or the functions.php file of your theme.

Explanation:

In the example, we first pass the function wp_register_script(), which receives 5 parameters:

$handle
(string) (必须) 脚本名称. 名称必须唯一在之后函数 wp_enqueue_script() 会使用到该名称.
Default: None
$src
(string) (必须) 脚本路径，可以使用绝对路径。
Default: None
$deps
(array) (可选) 脚本依赖包，依赖包会在脚本加载之前预先加载。
Default: array()
$ver
(string) (可选)脚本版本控制。
Default: false
$in_footer
(boolean) (可选) 定义脚本的位置，如果为true脚本会在页面底部加载，默认在head头部加载。
Default: false

When we use the wp_register_script() function to register the script file, we can use the function wp_enqueue_script() to load the registration script file.

Maybe someone will ask us why we don’t load the script file directly, but register it first and then load it. Isn’t this unnecessary? In fact, this is mainly for other developers on the site to easily reference your core script files in other plug-ins or themes.

How wordpress loads CSS style files

Wordpress The loading of css style files is the same as the script file loading method introduced above. The following example:

function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>

In the above examples, we also used the wp_register_script hook to load the style files.

In the example, we use plugins_url() to get the path of the style file. This is generally used in the plug-in development process. If we develop the theme and use the wp_register_script() function, we can use get_template_directory_uri() to get the style file. If the path is used in a child theme, you can use the function get_stylesheet_directory_uri() to obtain the path. The example is as follows:

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

Through the above analysis, I hope you will have a new understanding of adding Javascript files and CSS files to WordPress.