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

橙子主题打折出售

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

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

留言板

发表回复

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

热门文章

SharePoint2010升级到SharePoint2013操作手册 SharePoint2010升级到SharePoint2013操作手册目录第一章...SharePoint2010升级到SharePoint2013操作手册 作者:Pastore Antonio
1699 浏览量
C# DataTable 某一列求和 列为数字类型doubletotal=Convert.ToDouble(datatable.Com...C#DataTable某一列求和 作者:Pastore Antonio
1673 浏览量
修复moss本机访问SharePoint 401.1 HTTP错误 环境:DCServer&...修复moss本机访问SharePoint401.1HTTP错误 作者:Pastore Antonio
1661 浏览量
从0开始搭建SQL Server AlwaysOn 第三篇(配置AlwaysOn) 这一篇是从0开始搭建SQLServerAlwaysOn的第三篇,这一篇才真正开始搭建Alway...从0开始搭建SQLServerAlwaysOn第三篇(配置AlwaysOn) 作者:Pastore Antonio
1627 浏览量
SharePoint REST API – 概述 博客地址:http://blog.csdn.net/FoxDaveSharePointRES...SharePointRESTAPI–概述 作者:Pastore Antonio
1614 浏览量
Adding Docker Repository to CentOS 在CentOS系统上添加Docker官方仓库是安装和管理Docker的第一步。以下是详细...AddingDockerRepositorytoCentOS 2026-02-14 · Xzavier Aaron
Flowise 前端框架配置指南 用户需求问题:有没有适合配置Flowise的前端框架?目标:寻找类似OpenWebUI...Flowise前端框架配置指南 2026-02-14 · Xzavier Aaron
aspnet-wwwroot-error-solution ASP.NETCore启动报错:DirectoryNotFoundExceptionwwwroo...aspnet-wwwroot-error-solution 2025-12-28 · Pastore Antonio
SharePoint Server 出现 ERR_HTTP2_PROTOCOL_ERROR 如果SharePointServer在http的情况下能够访问,但是在https下不能访问报错如...SharePointServer出现ERR_HTTP2_PROTOCOL_ERROR 2025-10-21 · Pastore Antonio
.NET CORE 快速文本搜索器 简单的搜索引擎:usingSystem;usingSystem.Collections.Gen....NETCORE快速文本搜索器 2025-09-25 · Pastore Antonio
Sql Server 部署SSIS包完成远程数据传输 简介与背景在现代数据管理中,如何高效地完成远程数据的更新任务一直是一个重要的挑战。本文的背景起源于...SqlServer部署SSIS包完成远程数据传输 2026-02-14 · Xzavier Aaron
Coolify的使用 简介Coolify是一种功能强大的自托管综合解决方案,旨在简化应用、数据库以及开源服务的托管流程。...Coolify的使用 2026-02-14 · Xzavier Aaron
Coolify的使用 简介Coolify是一种功能强大的自我托管解决方案,专为那些希望掌控自己的应用、数据库以及开源服...Coolify的使用 2026-02-14 · Xzavier Aaron
SharePoint 2019 Web Application Creation 在SharePoint2019中创建WebApplication,可以使用PowerSh...SharePoint2019WebApplicationCreation 2026-02-14 · Xzavier Aaron
vscode使用sftp上传 简介在现代开发环境中,VSCode凭借其强大的扩展性和丰富的功能,成为许多开发者的首选代码编辑器。...vscode使用sftp上传 2026-02-14 · Xzavier Aaron
在现有Seafile 上追加 Azure Blob 磁盘 已有运行中的Seafile(Docker)现有数据保持不变新增几个AzureBlob作为...在现有Seafile上追加AzureBlob磁盘 2025-11-21 · Pastore Antonio
.NET CORE 传统方式调用SharePoint 直接贴代码:usingMicrosoft.SharePoint.Client;usingPnP....NETCORE传统方式调用SharePoint 2025-09-25 · Pastore Antonio
Azure 申请SharePoint 应用 登录后台如下:进入Azure:选择之后进入创建应用:进入之后输入名字按照如下图示点击注册:创...Azure申请SharePoint应用 2025-09-25 · Pastore Antonio
VS中MVC解决方案复制后修改调试端口 我之前是直接去解决方案属性中修改:然后恭喜你,你会喜提报错。正确方式,打开项目属性:这里重置切...VS中MVC解决方案复制后修改调试端口 2025-03-17 · Pastore Antonio
如何在C#WinForms应用程序中显示当前版本信息 在开发C#WinForms应用程序时,向用户展示当前版本信息是一个常见的需求。这不仅可以帮助用户了解...如何在C#WinForms应用程序中显示当前版本信息 2025-03-10 · Pastore Antonio
2022年4月30日 削苹果削了手,太懒不想收藏资料的时候复制粘贴所以开发了一个快速发布的组件。花了2天……浏览量:1...2022年4月30日 2022-04-30 · Pastore Antonio
2021年12月27日 头疼/胸闷/肋条疼/脚脖子疼……没钱……明天要给员工发工资了。浏览量:1,824 2021-12-27 · Pastore Antonio
2021年12月22日 今天天气:多云转晴早上太多雾,但怕迟到还是一路超速……赶到了目的地,在车库绕了四层没一个车位,绕晕...2021年12月22日 2021-12-22 · Pastore Antonio
aspnet-wwwroot-error-solution ASP.NETCore启动报错:DirectoryNotFoundExceptionwwwroo...aspnet-wwwroot-error-solution 2025-12-28 · Pastore Antonio
SharePoint Server 出现 ERR_HTTP2_PROTOCOL_ERROR 如果SharePointServer在http的情况下能够访问,但是在https下不能访问报错如...SharePointServer出现ERR_HTTP2_PROTOCOL_ERROR 2025-10-21 · Pastore Antonio
.NET CORE 快速文本搜索器 简单的搜索引擎:usingSystem;usingSystem.Collections.Gen....NETCORE快速文本搜索器 2025-09-25 · Pastore Antonio
.NET CORE 传统方式调用SharePoint 直接贴代码:usingMicrosoft.SharePoint.Client;usingPnP....NETCORE传统方式调用SharePoint 2025-09-25 · Pastore Antonio
Azure 申请SharePoint 应用 登录后台如下:进入Azure:选择之后进入创建应用:进入之后输入名字按照如下图示点击注册:创...Azure申请SharePoint应用 2025-09-25 · Pastore Antonio
.NET CORE 传统方式调用SharePoint 直接贴代码:usingMicrosoft.SharePoint.Client;usingPnP....NETCORE传统方式调用SharePoint 2025-09-25 · Pastore Antonio
Azure 申请SharePoint 应用 登录后台如下:进入Azure:选择之后进入创建应用:进入之后输入名字按照如下图示点击注册:创...Azure申请SharePoint应用 2025-09-25 · Pastore Antonio
.NET CORE 使用应用方案操作SharePoint Online 世纪互联版 我来为你创建一个.NETCore应用程序,用于向世纪互联SharePointOnline....NETCORE使用应用方案操作SharePointOnline世纪互联版 2025-09-25 · Pastore Antonio
Microsoft Excel 365 的 DCOMCNFG 中缺少 Microsoft Excel 应用程序 试试这个方法:这个方法不是解决你看不看得到,而是配置你看不到也能使用了。原操作方案:Micro...MicrosoftExcel365的DCOMCNFG中缺少MicrosoftExcel应用程序 2025-06-11 · Pastore Antonio
使用SPFX开发SharePoint SE\2019过程中的问题 遇到不能新建ListView控件的,不要怀疑重装就行。装好了去看:C:\Users\Adminis...使用SPFX开发SharePointSE\2019过程中的问题 2025-06-10 · Pastore Antonio
为你的wordpress主题添加支持文章格式 如果你的主题不支持文章格式,首先你需要在functions.php中添加如下类似代码让你的主题支持该...为你的wordpress主题添加支持文章格式 2024-04-17 · Pastore Antonio
wordpress新增文章类型 要在WordPress中添加自定义文章类型,您可以按照以下步骤进行:使用函数创建自定义文章类型:...wordpress新增文章类型 2024-04-17 · Pastore Antonio
去除WordPress登录页面的翻译组件 在主题function.php中添加如下内容:add_filter(‘login_d...去除WordPress登录页面的翻译组件 2023-08-30 · Pastore Antonio
Linux 下Wordpress博客搭建 WordPress#下载安装文件cd/usr/local/nginx/html/blogw...Linux下WordPress博客搭建 2021-12-11 · Pastore Antonio
从零开始在linux下搭建wordpress博客 一,准备linux环境本地虚拟机可以忽略第一部分微博以及微信的公共平台现在正火的一塌糊涂。既...从零开始在linux下搭建wordpress博客 2021-12-11 · Pastore Antonio
centos 常见问题 1:DNS配置域名无法在Linux下解析是一个比较普遍的问题,造成这个问题有很多原因,比如:服务器...centos常见问题 2023-11-08 · Pastore Antonio
linux中查找包含指定内容的文件 文件名+内容根据时间查找日志查询指定时间段内的日志查找关键字只显示包含内容的文件名文件名+...linux中查找包含指定内容的文件 2021-12-11 · Pastore Antonio
Linux 下Wordpress博客搭建 WordPress#下载安装文件cd/usr/local/nginx/html/blogw...Linux下WordPress博客搭建 2021-12-11 · Pastore Antonio
从零开始在linux下搭建wordpress博客 一,准备linux环境本地虚拟机可以忽略第一部分微博以及微信的公共平台现在正火的一塌糊涂。既...从零开始在linux下搭建wordpress博客 2021-12-11 · Pastore Antonio
linux 安装php8 准备工作  创建空文件夹>mkdir/opt/php//创建目录>cd/...linux安装php8 2021-12-11 · Pastore Antonio

最新发布

Sql Server 部署SSIS包完成远程数据传输 简介与背景在现代数据管理中,如何高效地完成远程数据的更新任务一直是一个重要的挑战。本文的背景起源于...SqlServer部署SSIS包完成远程数据传输 转载 2026-02-14
Coolify的使用 简介Coolify是一种功能强大的自托管综合解决方案,旨在简化应用、数据库以及开源服务的托管流程。...Coolify的使用 转载 2026-02-14
Coolify的使用 简介Coolify是一种功能强大的自我托管解决方案,专为那些希望掌控自己的应用、数据库以及开源服...Coolify的使用 转载 2026-02-14
SharePoint 2019 Web Application Creation 在SharePoint2019中创建WebApplication,可以使用PowerSh...SharePoint2019WebApplicationCreation 转载 2026-02-14
vscode使用sftp上传 简介在现代开发环境中,VSCode凭借其强大的扩展性和丰富的功能,成为许多开发者的首选代码编辑器。...vscode使用sftp上传 转载 2026-02-14
aspnet-wwwroot-error-solution ASP.NETCore启动报错:DirectoryNotFoundExceptionwwwroo...aspnet-wwwroot-error-solution #C# 2025-12-28
SharePoint Server 出现 ERR_HTTP2_PROTOCOL_ERROR 如果SharePointServer在http的情况下能够访问,但是在https下不能访问报错如...SharePointServer出现ERR_HTTP2_PROTOCOL_ERROR #C# 2025-10-21
.NET CORE 快速文本搜索器 简单的搜索引擎:usingSystem;usingSystem.Collections.Gen....NETCORE快速文本搜索器 #C# 2025-09-25
.NET CORE 传统方式调用SharePoint 直接贴代码:usingMicrosoft.SharePoint.Client;usingPnP....NETCORE传统方式调用SharePoint #C# 2025-09-25
Azure 申请SharePoint 应用 登录后台如下:进入Azure:选择之后进入创建应用:进入之后输入名字按照如下图示点击注册:创...Azure申请SharePoint应用 #C# 2025-09-25