WordPress 加载自定义 JavaScript

优化 WordPress，实现前端一些功能时需要用到 JavaScript，可以用 wp_enqueue_script/5 函数加载

函数语法参数

函数总共 5 个参数：wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);

• $handle :（字符串，必需）脚本名称，小写字符串；
• $src :（字符串，可选）WordPress 目录下的 JavaScript 路径，如：“/wp-content/uploads/js/xxx.js”，默认值：None；
• $deps :（数组，可选）依赖关系数组，加载该脚本前需要加载的其它脚本，默认值： array()；
• $ver :（字符串，可选）指明脚本版本号的字符串，默认为 false；
• $in_footer :（布尔，可选）默认值：false，引用会放置在区块中，为 true 时，引用会放置在最下方；

用法

我的首页顶部有个模拟 shell 的打字动画，编写以下代码并保存为 simulate_shell.js

// 参数
var def_header_shell_text = '$> _';
var shell_code_str = 'echo "Code / Cola Forever !"';
var tap_speed = 80;
var header_shell_innerHTML = '<div id="header_shell"><div id="ps1">$> </div><div id="my_shell"></div><div id="my_curcor">_</div></div>';

// 检测是否播放动画
$(function() {
	var def_header_shell = document.evaluate('//*[@id="wrapper-inner"]/div[2]/div/h2', document).iterateNext();
	if(def_header_shell.innerText == def_header_shell_text) {
		def_header_shell.innerHTML = header_shell_innerHTML;
		var intervalId = setInterval('shell_curcor()', 500);
		setTimeout(tap_code, 3000, intervalId);
	}
});

// 光标
function shell_curcor() {
	curcor = document.getElementById("my_curcor");
	if (curcor.innerHTML == '_') {
		curcor.innerHTML = ''
	} else if (curcor.innerHTML == '') {
		curcor.innerHTML = '_'
	}
}

// 敲代码动画
function tap_code(intervalId) {
	clearInterval(intervalId)
	document.getElementById("my_curcor").innerHTML = '_';
	var my_shell_code = document.getElementById("my_shell").innerText;
	var my_shell_code_array = shell_code_str.split("");
	for (var i = 0; i < my_shell_code_array.length; i++) {
		my_shell_code += my_shell_code_array[i];
		setTimeout(tap_code_do, i * tap_speed, my_shell_code);
	}
	setTimeout(setInterval, my_shell_code_array.length * tap_speed + 500, 'shell_curcor()', 500)
}

function tap_code_do(my_shell_code) {
	document.getElementById("my_shell").innerText = my_shell_code;
}

然后上传该 js 文件到 /wp-content/uploads/js 目录下，再到当前主题的 functions.php 下添加引用，将 js 放在 footer 否则该动画不生效

// 加载自定义js
function my_js_fun() {
	wp_enqueue_script('simulate_shell', '/wp-content/uploads/js/simulate_shell.js', array(), '1.0', true);
}
add_action('wp_footer', 'my_js_fun');

最后保存并刷新页面，就可以看到效果了，在页面的源码里可以看到该 js 文件被引用了