Quickly master the method of loading JavaScript scripts in WordPress_javascript skills

To load script (CSS and JS, the same below) files in WordPress, most people’s approach is to directly add the link tag to the header.php file, or add the link tag directly to the head tag through the wp_head hook. This practice is against official norms.

The standard script loading method should be to use the functions officially provided by WordPress (will be discussed later). Unifying the standard has several benefits. The first is that it is more secure and easier to manage. The second is that it is more convenient and faster, and not only the theme can be mounted Scripts and plug-ins can also be used, and they can also manage scripts, adjust the mounting order and location, and other content.

In which hook is loaded?

Before calling the loading script function, we must first determine which hook the function is executed at. There are four commonly used script loading hooks, namely wp_enqueue_scripts (loading in the foreground), admin_enqueue_scripts (loading in the background), login_enqueue_scripts (loading in the login page load) and init (global load).

The most commonly used one is probably wp_enqueue_scripts. If you mount it here, the script will only be loaded in the foreground.

Load JavaScript script

For example, I want to load a JS in the foreground, which is the themes.js file in the JS folder of the theme root directory. First, you need to use the wp_register_script() function to add JS to the script library (register the script), and then use the wp_enqueue_script() function to mount the script.

function Bing_enqueue_scripts(){
  wp_register_script( 'themes_js', get_bloginfo( 'template_directory' ) . '/js/themes_js.js' );//注册 ID 为 themes_js 的 JS 脚本
  wp_enqueue_script( 'themes_js' );//挂载脚本
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

Load CSS script

function Bing_enqueue_scripts(){
  wp_register_style( 'style', get_bloginfo( 'template_directory' ) . '/style.css' );
  wp_enqueue_style( 'style' );
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

Summary

This article only briefly explains how to load scripts. Proper use of the script queuing mechanism can make the program more flexible and speed up efficiency.