快速掌握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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
javascript操作符"!~"详解
Feb 10 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
vue实现全选、反选功能
Nov 17 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
js实现时分秒倒计时
Dec 03 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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
DOMXML函数笔记
2006/10/09 PHP
谈谈PHP语法(4)
2006/10/09 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
Python+django实现文件上传
2016/01/17 Python
常用python编程模板汇总
2016/02/12 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
python实现矩阵打印
2019/03/02 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
最常使用的求职信
2014/05/25 职场文书
金融与证券专业求职信
2014/06/22 职场文书
五四青年节的活动方案
2014/08/20 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
学习党章的体会
2014/11/07 职场文书
郭明义观后感
2015/06/08 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
python神经网络ResNet50模型
2022/05/06 Python