Huang Cong: WordPress uses the get_current_screen function to selectively load JS and CSS in the plug-in.

Many people have said, "A good WordPress user only loads the files they need ." This principle applies to both the frontend and backend. When you just want CSS and JS to appear on the page you created, there is no need to load them in the background.

"Do Not Allow CSS and JS files on all management interfaces, which may cause conflicts with other plug-ins ."

WordPress functions can solve this problem.

Almost all administrator pages have a unique URL, so it is not difficult to load JS and CSS files on the desired page. Available$_SERVER['REQUEST_URI']Or$_GET['action']Parameters. In fact, there is a more convenient, simple, and standardized way to achieve this goal. That isget_current_screenFunction.

About get_current_screen functionWhat you need to know

• Is introduced in WordPress 3.1, So if you use the earlier versioncall to undefined functionError. If you are not sure, you can usefunction_existsFunction to check whether it is available.
• Inadmin_initAndinitThe hook is unavailable. Because this is initialized only after those hook requests.
• This function returnsWP_ScreenBut all we need is the aboveid.
• Unavailable at the backend.

A few lines of code can make it much different

Let's assume that your plug-in has an option page under the settings menu and you wrote it using the following line of code:

add_options_page('My Plugin', 'My Plugin', 'manage_options', 'my_plugin', 'my_plugin_options');

At this point, you need to add additional CSS and JavaScript to this page. The Code is as follows:

// Bad code below! Don't copy/paste!add_action('admin_enqueue_scripts', 'my_plugin_scripts'); function my_plugin_scripts() {    wp_enqueue_style('farbtastic');    wp_enqueue_script('farbtastic');}

 

The above is a very bad solution. Do not do that. The above code will display the Farbtastic color selector containing CSS and JS on every page of the administrator interface. If other plug-ins do not require your CSS and JS, they must usewp_dequeue_*Function. This is not necessary and reckless, because it can have better code. The Code is as follows:

add_action('admin_enqueue_scripts', 'my_plugin_scripts'); function my_plugin_scripts() {    // Include JS/CSS only if we're on our options page    if (is_my_plugin_screen()) {        wp_enqueue_style('farbtastic');        wp_enqueue_script('farbtastic');    }} // Check if we're on our options pagefunction is_my_plugin_screen() {    $screen = get_current_screen();    if (is_object($screen) && $screen->id == 'settings_page_my_plugin') {        return true;    } else {        return false;    }}

 

It is easy to implement this function.

If you see the improved code we wrote, you will find that only oneifStatement and a simple functionis_my_plugin_screen(This is used to confirm whether the plug-in option page is opened ). ControlWP_ScreenVariable$screenThere are many attribute values, but we are only interested in id. This id has a prefix.settings_page_The prefix is the same on all settings pages. And stringmy_pluginIt is unique because we are callingadd_options_pageThe function is positioned as the fourth parameter.

The code is simple and applicable to all administrator interfaces. You can easily see$screenWhat is the id

echo '<pre>' . print_r(get_current_screen(), true) . '</pre>';

Summary

• 1. Do not load CSS or JS files on all management pages. This will cause conflicts with other plug-ins.
• 2.initUseget_current_screenTo identify when your management interface is visible and when it is visible, load additional things.
• 3. the ID of the Core Management page can be found on the Codex page Admin Screen Reference.
• 4. Do not reference<script>Or<style>Label to usewp_enqueue_*Function.
• 5. Check whether your script is already in WP coreAbove.

Original article:Quick Tip: Conditionally Including JS and CSS With get_current_screen

This article is translated by CloudCheung. You can click a hyperlink to indicate the source address.