WordPress introduces css and js files to prevent repeated loading and configuration loading as needed

WordPress introduces many css/js methods and has many conditions. It is necessary to clarify when a script needs to be registered and then loaded only on certain pages.

Load css/js at the front end

Use the wp_enqueue_script () function to load js, use wp_enqueue_style () to load css, and the position (action) for loading resources has only one -- wp_enqueue_scripts.

Using the wp_enqueue _ series functions, you can better process the dependencies of the script style table and prevent repeated loading. Take the twentyfifteen topic as an example.

Function twentyfifteen_scripts (){
// Globally load a general style table form www.111cn.net
Wp_enqueue_style ('genericons', get_template_directory_uri (). '/genericons/genericons.css', array (), '3 ');
// Globally load the master style table
Wp_enqueue_style ('twentyfifteen-style', get_stylesheet_uri ());
// Globally load the style sheet for IE only
Wp_enqueue_style ('twentyfifteen-ie', get_template_directory_uri (). '/css/ie.css', array ('twentyfifteen-style'), '123 ');
Wp_style_add_data ('twentyfifteen-ie', 'conditional', 'Lt ie 9 ');
// Globally load js scripts
Wp_enqueue_script ('twentyfifteen-script', get_template_directory_uri (). '/js/functions. Js', array ('jquery'), '123', true );
// Pass variables to the js script to solve the problem that php cannot be called in the script
Wp_localize_script ('twentyfifteen-script', 'screenreadertext', array (
'Expand' => '<span class = "screen-reader-text"> '. _ ('expand child menu ', 'twentypolicteen '). '</span> ',
'Collapse' => '<span class = "screen-reader-text"> '. _ ('collapse child menu ', 'twentypolicteen '). '</span> ',
));
}
Add_action ('WP _ enqueue_scripts ', 'twentyfifteen _ scripts ');

When do I need to register css/js first?

That is, when the wp_register_script () and wp_register_style () functions need to be used.

When there are many css/js files that need to be loaded in different situations, wp_register_script () can be used to better manage resources and avoid repeated efforts. in the following sample code, register all the style sheets that need to be used on the init action. Then, you can simply use wp_enqueue_style ($ handle) wherever you want to introduce them) to load.

// Register the script in the init action, which can be put together with other logic code from www.111cn.net
Function my_init (){
$ Url = get_template_directory_uri ();
// Register the style sheet
$ Styles = array (
'Style1' => $ url. '/css/style1.css ',
'Style2' => $ url. '/css/style2.css ',
'Style3' => $ url. '/css/style3.css'
);
Foreach ($ styles as $ k => $ v ){
Wp_register_style ($ k, $ v, false );
    }
// Register the script
// Other scripts to be run in the init action
}
Add_action ('init ', 'My _ init ');

Run $ wp_scripts-> add ($ handle, $ src, $ deps, $ ver) when registering a script. If the script is not registered, directly use wp_enqueue_script. You must call the add method first, that is to say, if you repeat the enqueue script, the add method will run multiple times, reducing the program efficiency.

Global loading in the background

In general, some theme functions can be used.

Change action to admin_enqueue_scripts

Function my_enqueue (){
Wp_enqueue_script ('My _ custom_script ', plugin_dir_url (_ FILE _). 'Myscript. Js ');
}
Add_action ('admin _ enqueue_scripts ', 'My _ enqueue ');

For more methods, see wp-admin/admin-header.php.

Load on the WordPress login page

This situation is generally rare.

Replace the action with login_enqueue_scripts, for example

Function enqueue_for_login (){
Wp_enqueue_style ('core', 'style.css ', false );
Wp_enqueue_script ('My-JS', 'filename. Js', false );
}
Add_action ('login _ enqueue_scripts ', 'enqueue _ for_login ');

If you want to know other ways, you can carefully read the wp-login.php file.

Load on demand in the background

Resources for some pages in the background can only be loaded on these pages. Do not use them everywhere to reduce unnecessary conflicts.

1. $ hook_suffix

First, we can determine the page according to the $ hook_suffix parameter passed by the admin_enqueue_scripts action. For example, loading only in edit. php, the code is as follows:

Function my_enqueue ($ hook_suffix ){
If ('edit. Php' = $ hook_suffix ){
Wp_enqueue_script ('My _ custom_script ', plugin_dir_url (_ FILE _). 'Myscript. Js ');
    }
}
Add_action ('admin _ enqueue_scripts ', 'My _ enqueue ');

Edit. php is the list page of post, page, or custom post type, and the edit page is post. php, the new page is a post-new.php, you can print $ hook_suffix on different pages to learn how to use it. However, it can be seen that it cannot distinguish the current post page, and more global variables are needed to determine.

2. $ typenow

The global variable $ typenow can tell us the current post type. For example, you can judge this only when loading the post list page:

Function my_enqueue ($ hook_suffix ){
Global $ typenow;
If ('edit. Php' ==$ hook_suffix & $ typenow = 'post '){
Wp_enqueue_script ('My _ custom_script ', plugin_dir_url (_ FILE _). 'Myscript. Js ');
    }
}
Add_action ('admin _ enqueue_scripts ', 'My _ enqueue ');

3. get_current_screen ()

The above two global variables can be used to differentiate the majority of cases. If they cannot be distinguished, you can try the get_current_screen () function. This function returns the post type, ID, base, and other information on the current page, it can only be used after admin_init. For details, refer to the official documentation.

4. $ pagenow

The returned value of the global variable $ pagenow is similar to that of $ hook_suffix, but it can be accessed in the foreground background and is defined earlier. For example, the first three have no value at admin_init, but $ pagenow does.

It is defined in wp-uplodes/vars. php. This file also defines global variables for browsers and servers, such as $ is_winIE, $ is_apache, and wp_is_mobile () functions.

The above global variables and functions can distinguish most cases, but when there is still a weakness, you can use $ _ REQUEST to determine. The values of the above variables are also obtained from $ _ REQUEST, but check whether there are multiple values. Therefore, do not use $ _ REQUEST or $ _ GET if they can be used.