How to add Javascript code to WordPress website

This article introduces to you the method of adding Javascript code to WordPress website. It has certain reference value. Friends in need can refer to it.

If you are modifying the template theme you made, and you are in control of upgrading and updating, you can add javascript code freely and you can introduce it according to the actual business logic. But if you want to add JavaScript code that has nothing to do with the theme, such as visitor statistics, performance monitoring and other types of independent code , since it has nothing to do with the theme file, then the best way is to add the code in the plug-in.

WordPress provides functions wp_enqueue_script and hooks wp_enqueue_scripts

to facilitate developers to embed custom code.

The following is a brief description of the steps to add:

Create a new directory under the plug-in directory. After entering the directory, create a new plug-in file index.php and insert the following sample code:

<?php
/*
Plugin Name: custom javascript
Description: Add custom javascript
*/
function add_custom_scripts() {  
   wp_enqueue_script( 'jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js', array(), '1.12.1', false);
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );

wp_enqueue_script Description of the five parameters of the function

1. string $handle #The unique name for the currently introduced javascript file

2. string $src = '' #javascript document resource url

3. array $deps = array() #Dependency code handle

4. string|bool|null $ver = false #The version number, if not specified, is consistent with the WordPress system version number

5. bool $in_footer = false #Whether it is in At the bottom of the document, if it is false, the default is to load javascript

at the head of the document. Finally, save the file, go to the plug-in center to activate the plug-in, and view the page source code on the browser page to see the imported javascript file. .

Using the wp_enqueue_script function has the following advantages:

a. You can set the loading order with other dependent codes

b. You can specify the version number Conducive to cache management

c. You can specify the location of the embedded code in the document

Related recommendations:

How to understand the role of reflection in the di container source code of the yii2 framework

Another way to do Laravel database testing (SQLite)

The above is the detailed content of How to add Javascript code to WordPress website. For more information, please follow other related articles on the PHP Chinese website!