快速掌握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' );

小结

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

您可能感兴趣的文章:

JS实现滑动门效果的方法详解
这篇文章主要介绍了JS实现滑动门效果的方法,结合实例形式分析了滑动门效果的实现原理、步骤与相关注意事项,需要的朋友可以参考下
2016-12-12
微信小程序实现左侧导航栏
这篇文章主要为大家详细介绍了微信小程序实现左侧导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
微信小程序向Java后台传输参数的方法实现
这篇文章主要介绍了微信小程序向Java后台传输参数的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
JavaScript实现在数组中查找不同顺序排列的字符串
这篇文章主要介绍了JavaScript实现在数组中查找不同顺序排列的字符串,本文用两个方法解决了这道算法题,需要的朋友可以参考下
2014-09-09
JavaScript实现滑块补图验证码效果
这篇文章主要给大家介绍了JavaScript如何实现滑块补图验证码效果，文章通过代码示例介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴可以参考阅读下
2023-07-07
JS实现的RC4加密算法示例
这篇文章主要介绍了JS实现的RC4加密算法,结合实例形式分析基于javascript实现的RC4加密算法简单定义与使用方法,需要的朋友可以参考下
2018-08-08
js创建一个input数组并绑定click事件的方法
这篇文章主要介绍了js创建一个input数组并绑定click事件的方法,需要的朋友可以参考下
2014-06-06
JavaScript日期库date-fn.js使用方法解析
这篇文章主要介绍了JavaScript日期库date-fn.js使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
WebGame《逆转裁判》完整版代码下载(1月24日更新)
WebGame《逆转裁判》完整版代码下载(1月24日更新)...
2007-01-01
Web技术实现移动监测的介绍
移动侦测，一般也叫运动检测，常用于无人值守监控录像和自动报警。通过摄像头按照不同帧率采集得到的图像会被 CPU 按照一定算法进行计算和比较，当画面有变化时，如有人走过，镜头被移动，计算比较结果得出的数字会超过阈值并指示系统能自动作出相应的处理
2017-09-09