快速掌握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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
用js重建星际争霸
2006/12/22 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
python双向链表实现实例代码
2013/11/21 Python
Python3匿名函数用法示例
2018/07/25 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
举例讲解Python常用模块
2019/03/08 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
python 下划线的不同用法
2020/10/24 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
通信工程毕业生求职信
2013/11/16 职场文书
2013年军训通讯稿
2014/02/05 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
高中军训感想
2015/08/07 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书