快速掌握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 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php实现文件编码批量转换
2014/03/10 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
一个javascript参数的小问题
2008/03/02 Javascript
javascript整除实现代码
2010/11/23 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
详解node中创建服务进程
2017/05/09 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
python计算圆周率pi的方法
2015/07/11 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
python实现简单五子棋游戏
2019/06/18 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
机械制造毕业生求职信
2014/03/03 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
临床护理求职信
2014/04/26 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
模范教师事迹材料
2014/12/16 职场文书
工作感言一句话
2015/08/01 职场文书