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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值