Logo

WordPress中加载JavaScript脚本的方法

photo

2020年09月08日

在 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' );

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
所有附件
该文章没有附件.
本文为原创文章,请注意保留出处!

留言板

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

热门文章

EWS(Exchange Service)基本使用(获取个人会议,会议室会议内容,会议室列表,发送会议,修改会议,删除会议) 最近公司要求和exchange服务对接,所以稍微研究了一下官方文档,做出以下总结,欢迎大家补充。先...EWS(ExchangeService)基本使用(获取个人会议,会议室会议内容,会议室列表,发送会议,修改会议,删除会议) 作者:Pastore Antonio
1598 浏览量
Sql Server 部署SSIS包完成远程数据传输 本篇介绍如何使用SSIS和作业完成自动更新目标数据任务。**温馨提示:如需转载本文,请注明...SqlServer部署SSIS包完成远程数据传输 作者:Pastore Antonio
1594 浏览量
SQL Server AG集群启动不起来的临时自救大招 背景前晚一朋友遇到AG集群发生来回切换不稳定的情况,情急之下,朋友在命令行使用命令重启WSFC集群...SQLServerAG集群启动不起来的临时自救大招 作者:Pastore Antonio
1582 浏览量
SharePoint2010升级到SharePoint2013操作手册 SharePoint2010升级到SharePoint2013操作手册目录第一章...SharePoint2010升级到SharePoint2013操作手册 作者:Pastore Antonio
1571 浏览量
C# DataTable 某一列求和 列为数字类型doubletotal=Convert.ToDouble(datatable.Com...C#DataTable某一列求和 作者:Pastore Antonio
1565 浏览量