Quickly learn how to load JavaScript scripts in WordPress _ javascript skills

This article describes how to quickly learn how to load JavaScript scripts in WordPress and how to load CSS styles in response, for more information about how to load a script (CSS and JS, the same below) in WordPress, most people directly use the header. adding the link label to the php file or adding the link label directly to the head label through the wp_head Hook does not comply with official regulations.

The standard Script Loading method should be based on the functions officially provided by WordPress (as will be said later). There are several advantages to unified standards: security and management, and convenience and efficiency, in addition, not only can scripts be mounted to themes, but also plug-ins, but also scripts can be managed and the Mount sequence and position and other content can be adjusted.

In which hook is the file loaded?

Before calling the script function, we must first determine the hook where the function is executed. There are four common Script Loading hooks: wp_enqueue_scripts (loaded on the frontend), admin_enqueue_scripts (loaded in the background), login_enqueue_scripts (loaded on the logon page), and init (globally loaded ).

The most common method is wp_enqueue_scripts. Mount the script to this directory and load it only on the foreground.

Load JavaScript scripts

For example, I want to load a JS file on the foreground, which is the themes. JS file in the js folder of the topic 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'); // register the JS script wp_enqueue_script ('themes _ js') with the ID of themes_js; // mount the script} add_action ('wp _ enqueue_scripts ', 'bing _ enqueue_scripts ');

Load CSS scripts

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 just briefly explains how to load the script and make rational use of the script queuing mechanism, which can make the program flexible and speed up the efficiency.