Where to put js code in wordpress

#Where to put the js code in wordpress?

In WordPress, the js code is usually placed directly in the header.php or footer.php file to add the js file calling code.

In fact, the best way to reference js files in WordPress themes is to use WordPress’s built-in wp_enqueue_script() function. Through this function, JavaScript code can be safely added to pages created by WordPress, which not only ensures maximum compatibility It is also a way to improve the performance efficiency of WordPress.

Function code:

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

Parameter description:

$handle - the name of the called script, used to distinguish other js, so it cannot be used with other js The files are named the same.

$src – The path (that is, url) of the js file. Do not use the domain name url directly. Use the path function. For example, the parent theme uses get_template_directory_uri, and the child theme uses get_stylesheet_directory_uri. (Of the functions related to the WP template path, the one with template usually refers to the parent theme, and the one with stylesheet points to the child theme)

$deps – dependency, the identification of other js that the loaded js file depends on String array (array: string), which is the name of the code that needs to be loaded before this code (if the js script depends on the jquery library, then jquery must be written in the form of an array), which is not required.

$ver – The version number of the loaded js file is appended to the end of the path as a query string. Its function is to ensure that the correct version information is passed to the client to avoid being affected by the cache (such as changes in the js script) When changing the version number, you can force the customer's browser to update the cache). The default is false, which calls the version number of the current wordpress program. If you do not want to display it, set it to NULL (not recommended).

$in_footer – boolean type, sets whether the js file calling code is placed at the bottom of the html. If it is set to true, it will be placed at the bottom. If it is set to false, it will be placed in the head part. Tip: The template needs to correctly place the wp_footer() function.

Usage:

When loading a js file through the wp_enqueue_script function, it should be assigned to a hook. If it is called only in the foreground, use the hook wp_enqueue_script; only in the background To call, use admin_enqueue_scripts.

Example:

Only called in the foreground

<?php function boke8_theme_scripts() {      wp_enqueue_script( &#39;boke8&#39;, get_template_directory_uri() . &#39;/js/boke8.js&#39;, array(), &#39;1.0.0&#39;, true ); } add_action( &#39;wp_enqueue_scripts&#39;, &#39;boke8_theme_scripts&#39; ); ?>

Only called in the background

<?php function boke8_theme_scripts() {      wp_enqueue_script( &#39;boke8&#39;, get_template_directory_uri() . &#39;/js/boke8.js&#39;, array(), &#39;1.0.0&#39;, true ); } add_action( &#39;admin_enqueue_scripts&#39;, &#39;boke8_theme_scripts&#39; ); ?>

Attachment: function location wp-includes/functions.wp-scripts. php file

For more WordPress technical articles, please visit the WordPress Tutorial column!

The above is the detailed content of Where to put js code in wordpress. For more information, please follow other related articles on the PHP Chinese website!