如何在 WordPress 中使用 wp_enqueue_scripts 挂钩将脚本排入队列 -光子波动网

How to Manage Scripts and Style Sheets Effectively in WordPress

In WordPress, use thewp_enqueue_script()respond in singingwp_enqueue_style()These two functions help you add JavaScript scripts and CSS stylesheets to the front-end loading queue of your website. This method is called "queuing".

There are two main benefits to using queues:

Improve website performance: By optimizing the loading process, queuing can help reduce the loading time of a web page and make a website run faster and smoother.
Avoiding conflicts: When multiple plugins or themes try to load the same script or stylesheet, queuing helps prevent conflicts between these resources and ensures a stable site.

Understanding wp_enqueue_script

The queuing process is handled bywp_enqueue_scripts WordPress hooksand two additional functions for stylesheets and scripts.

First.wp_enqueue_scriptsis an action hook for scheduling stylesheets and JavaScript files into a WordPress site. This hook is commonly used in WordPress themes for thefunctions.phpor in the plugin file.

How to Use Style Sheets in WordPress

In the edit functions.phpIt is recommended that you create a backup of your website before you code in the

To access the file via the WordPress dashboard, navigate to theAppearance -> Theme File Editor.Find the right sidebar on thefunctions.php file.

Stylesheets are handled primarily through two functions:wp_register_style()respond in singingwp_enqueue_style()The

Register Style Sheet: Usewp_register_style()function to register a stylesheet. This function takes two main arguments:
- $handle: This is the unique identifying name of the stylesheet and is used to identify the stylesheet in WordPress.
- $src: This is the URL or path to the stylesheet file. It can be a path relative to a WordPress theme or plugin directory, or a URL hosted elsewhere.This parameter can be omitted if you have already provided the path in the registration function.
Loading Style Sheets: Once the stylesheet is registered, you can use thewp_enqueue_style()function to load it onto your WordPress site. If you've already specified the path during registration, you don't need to provide it again when queuing.

Here is the code that contains both functions:

function register_plugin_styles() {
wp_register_style( 'plugin-development', plugins_url( '/css/plugin.css' ) );
wp_enqueue_style( 'plugin-development' );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

This is the only way to include wp_enqueue_style().of the code:

function register_plugin_styles() {
wp_enqueue_style( 'plugin-development', plugins_url( '/css/plugin.css' ) ); }
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

How to Manage JavaScript Scripts in WordPress

WordPress manages JavaScript files through two main functions:wp_register_script()respond in singingwp_enqueue_script()The

Registration Script::
- utilizationwp_register_script()function to register a custom JavaScript file.
- $handle: This is the unique identifying name of the script, used for identification in WordPress.
- $src: This is the URL or path of the script file. If you have already specified the path during registration, you do not need to specify it again for subsequent loads.
Loading Scripts::
- pass (a bill or inspection etc)wp_enqueue_script()function that loads the registered script to the website. If the path is already specified in the registration, this parameter can be omitted when loading.
additional parameter::
- $deps: Lists an array of other scripts that the current script depends on, such asjQueryThe
- $ver: Specify the version number of the script to make it easier to track and manage multiple versions.
- $in_footer: Sets whether the script should be loaded in the footer section of the HTML document. By default, scripts are loaded in the<head>Partially loaded.

Just like with style sheets, if you already know the details of the script, you can also just use thewp_enqueue_script()to load scripts without pre-registration.

Examples with both functions:

function register_plugin_script() {
wp_register_script( 'new-script', plugins_url( '/script.js' ) );
wp_enqueue_script( 'new-script' );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_script' );

Let's look at an example withSingle wp_enqueue_script()Examples of functions:

function register_plugin_script() {
wp_enqueue_script( 'new-script', plugins_url( '/script.js' ) );
add_action
( 'wp_enqueue_scripts', 'register_plugin_script' );

How to use wp_enqueue_script in WordPress

How to use wp_enqueue_script with jQuery

wp_enqueue_script()function has an additionalarray()parameter, which allows the user to specify the required script dependencies.

function my_custom_script() {
    wp_enqueue_script( 'registered-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_script' );

In the code, we useThe wp_enqueue_scripts() function will be named my-script.jsscripts into the queue.

How to load a script in the footer using wp_enqueue_script

You can increase the speed of your website by loading scripts in the footer. When browsers wait for these scripts, this can result in slower page load times. If you move the scripts to the footer section, the browser can display the content first and then load the scripts. Check the following example for more information:

function plugin_assets() {
wp_enqueue_script( 'custom-script', plugins_url( '/js/my-script.js' , __FILE__ ), array( 'jquery' ), true );
}
add_action( 'wp_enqueue_scripts', 'plugin_assets' );

In the example, we created a file namedmy_custom_styles function, which registers a function called my-styles.cssCustomize the stylesheet and put it in the queue.

reach a verdict

In WordPress, use thewp_enqueue_scriptshooks and related functions such aswp_enqueue_script()respond in singingwp_enqueue_style(), to easily and efficiently add custom JavaScript scripts and CSS styles. These tools help you ensure that scripts and styles are loaded correctly onto your website while avoiding code conflicts and double loading issues.

Contact Us
Can't read the article? Contact us for free answers! Free help for personal, small business sites!
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off