快速掌握WordPress中加载JavaScript脚本的方法


Posted in Javascript onDecember 17, 2015

在 WordPress 中加载脚本(为 CSS 和 JS,下同)文件,大多数人的做法是直接在 header.php 文件中添加 link 标签,或者把 link 标签通过 wp_head 钩子直接添加到 head 标签里,这种做法是不符合官方规范的。

标准的脚本加载方式应该是使用 WordPress 官方提供的函数(后边会说),统一标准有几个好处,首先就是更加安全和利于管理,其次是更加的方便快捷,而且不仅主题能挂载脚本,插件也可以,并且还能管理脚本,并且调整挂载顺序和位置和其它内容。

在哪个钩子加载?

在调用加载脚本函数之前,我们首先要确定函数在哪个钩子处执行,有四个常用的脚本加载钩子,分别是 wp_enqueue_scripts(在前台加载)、admin_enqueue_scripts(在后台加载)、login_enqueue_scripts(在登录页加载)和 init(全局加载)。

最常用的应该是 wp_enqueue_scripts 了,挂载到这上面,脚本只在前台加载。

加载 JavaScript 脚本

比如说我想在前台加载一个 JS,是主题根目录 JS 文件夹的 themes.js 文件。首先需要使用 wp_register_script() 函数把 JS 添加到脚本库里边(注册脚本),然后再使用 wp_enqueue_script() 函数挂载脚本。

function Bing_enqueue_scripts(){
  wp_register_script( 'themes_js', get_bloginfo( 'template_directory' ) . '/js/themes_js.js' );//注册 ID 为 themes_js 的 JS 脚本
  wp_enqueue_script( 'themes_js' );//挂载脚本
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

加载 CSS 脚本

function Bing_enqueue_scripts(){
  wp_register_style( 'style', get_bloginfo( 'template_directory' ) . '/style.css' );
  wp_enqueue_style( 'style' );
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

小结

本文只是非常简单的讲解了怎么加载脚本,合理的利用脚本排队机制,可以让程序变得灵活,也可以加快效率。

Javascript 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
jQuery中库的引用方法
Jan 06 jQuery
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
JSONObject使用方法详解
Dec 17 #Javascript
JS实现alert中显示换行的方法
Dec 17 #Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 #Javascript
jQuery实现进度条效果代码
Dec 17 #Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 #Javascript
javascript日期格式化方法小结
Dec 17 #Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 #Javascript
You might like
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
PHP通用检测函数集合
2011/02/08 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
Python FTP操作类代码分享
2014/05/13 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
对python周期性定时器的示例详解
2019/02/19 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
flask项目集成swagger的方法
2020/12/09 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
数据库连接池的工作原理
2012/09/26 面试题
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
什么是方法的重载
2013/06/24 面试题
致跳远运动员加油稿
2014/02/11 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python