WordPress 加载自定义 JavaScript

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

函数语法参数

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

参数	类型	必须	说明
$handle	字符串	是	脚本名称
$src	字符串	否	默认值：None, WordPress 目录下的 JavaScript 路径, 如：/wp-content/uploads/js/xxx.js
$deps	数组	否	默认值: array(), 依赖关系数组, 加载该脚本前需要加载的其它脚本
$ver	字符串	否	默认为 false, 指明脚本版本号的字符串
$in_footer	布尔	否	默认值: false, 引用会放置在区块中, 为 true 时, 引用会放置在最下方

用法

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

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
否则该动画不生效

functions.php

// 加载自定义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 文件被引用了