优化 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 文件被引用了