快速掌握WordPress中加载JavaScript脚本的方法
更新时间：2015年12月17日 16:40:07 投稿：goldensun
这篇文章主要介绍了快速掌握WordPress中加载JavaScript脚本的方法,以及响应的CSS样式加载方法的简介,需要的朋友可以参考下
在 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之String常见的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了layer实现关闭弹出层刷新父界面功能,结合实例形式分析了使用layui的layer在关闭弹出层时刷新父界面的常用实现技巧与相关操作注意事项,需要的朋友可以参考下2017-11-11![[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例](//img.jbzj.com/images/xgimg/bcimg2.png)
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
下面小编就为大家带来一篇[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
在2016年10月11日facebook 公开了新的javascript包管理工具 yarn, 用来替代目前被广泛使用的npm(nodejs 自带的包管理工具)，本文将介绍yarn工具带来的优点和使用入门，以及对比npm解决了什么问题，带来哪些便利。有需要的朋友们下面来一起看看吧。2016-12-12
这篇文章主要介绍了JavaScript事件学习小结(二)js事件处理程序的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要给大家介绍了关于利用javascript存储函数的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了JS运动特效之完美运动框架,结合实例形式分析了javascript针对运动中的元素属性检测与判断相关操作技巧,需要的朋友可以参考下2018-01-01
JavaScript设计模式--简单工厂模式定义与应用案例详解
这篇文章主要介绍了JavaScript设计模式--简单工厂模式定义与应用,结合具体案例形式详细分析了JavaScript设计模式中简单工厂模式基本概念、定义、用法与相关注意事项,需要的朋友可以参考下2020-05-05
javascript两行代码即可实现按指定格式输出日期时间，非常不错，需要的朋友可以参考下2011-10-10
这篇文章主要介绍了js如何根据id删除数组中对象的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
![[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论