如何给WordPress网站添加Javascript代码

直接修改主题文件，主题一升级，代码就没有了。

其实可以通过插件来引入Javascript代码。

WordPress提供了函数 wp_enqueue_script 和钩子 wp_enqueue_scripts 。

以方便开发者管理Javascript代码。

添加的方法步骤：

在插件目录下新建一个目录，进入目录后新建一个插件文件index.php，插入如下示例代码：

<?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 函数五个参数说明

1. string $handle #对当前引入的javascript文件的代号

2. string $src = ” #javascript代码资源url

3. array $deps = array() #依赖得代码，就是参数1中handle的值

4. string|bool|null $ver = false #版本号，如果未指定，与WordPress系统版本号一致

5. bool $in_footer = false #是否在文档底部，如果是false，则默认在文档头部就载入

最后保存文件，去插件中心激活插件，在浏览器页面查看页面源代码，就可以看到引入的 javascript 文件了。

使用 wp_enqueue_script 函数有以下优点：

a. 可以设定与其他依赖代码的载入次序

b. 可以指定版本号利于让客户端的缓存失效

c. 可以指定嵌入代码在文档的位置

另外还有一个函数 wp_script_add_data

这个函数用来给你添加的javascript文件设定metadata

例如，添加下面的谷歌广告的代码：

<script data-ad-client="pub-123456789" async src="https://pagead2.googlesyndication
.com/pagead/js/adsbygoogle.js"></script>

应该按如下的方式来添加

<?php

wp_enqueue_script( 'google_adsense', 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', array(), false, false);

wp_script_add_data( 'google_adsense', 'data-ad-client', 'pub-123456789' );

参数说明：

wp_script_add_data( string $handle, string $key, mixed $value )

1> handle wp_enqueue_script函数定义的值

2> key  script标签的meta key

3> value script标签的meta value

参考资料
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_script_add_data/