快速掌握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 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
JavaScript中String对象的方法介绍
2017/01/04 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
基于Python的身份证号码自动生成程序
2014/08/15 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python3实现单目标粒子群算法
2019/11/14 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
出纳岗位职责范本
2013/12/01 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
人事任命书格式
2014/06/05 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang