如何在 WordPress 中使用 wp_enqueue_scripts 挂钩将脚本排入队列 

WordPress中如何有效管理脚本和样式表

如何在 WordPress 中使用 wp_enqueue_scripts 挂钩将脚本排入队列 

在WordPress中,使用wp_enqueue_script()wp_enqueue_style()这两个函数可以帮助你将JavaScript脚本和CSS样式表添加到网站的前端加载队列中。这种方法称为“排队”。

使用排队的好处主要有两个:

  1. 提升网站性能:通过优化加载过程,排队可以帮助减少网页的加载时间,使网站运行更快更流畅。
  2. 避免冲突:当多个插件或主题尝试加载同一个脚本或样式表时,排队有助于防止这些资源之间发生冲突,确保网站稳定运行。

了解 wp_enqueue_script

排队过程由wp_enqueue_scripts WordPress 挂钩和两个用于样式表和脚本的附加函数组成。

首先,wp_enqueue_scripts是一个操作钩子,用于将样式表和 JavaScript 文件排入 WordPress 网站上。这个钩子通常用在 WordPress 主题的functions.php或插件文件中。

如何在WordPress中使用样式表

在编辑functions.php中的代码之前,建议你创建网站的备份。

通过 WordPress 仪表板访问该文件,导航至外观 -> 主题文件编辑器。找到右侧边栏上的functions.php文件。

处理样式表主要通过两个函数:wp_register_style()wp_enqueue_style()

  1. 注册样式表:使用wp_register_style()函数来登记一个样式表。这个函数需要两个主要参数:
    • $handle:这是样式表的唯一标识名,用于在WordPress中识别该样式表。
    • $src:这是样式表文件的URL或路径。可以是相对于WordPress主题或插件目录的路径,或者是托管在其他地方的URL。如果你在注册函数中已经提供了路径,这个参数就可以省略。
  2. 加载样式表:一旦样式表注册完成,你可以使用wp_enqueue_style()函数来将其加载到你的WordPress网站上。如果你已经在注册时指定了路径,那么在排队时就不需要再提供路径了。
如何在 WordPress 中使用 wp_enqueue_scripts 挂钩将脚本排入队列 

下面是包含这两个函数的代码:

function register_plugin_styles() {
	wp_register_style( 'plugin-development', plugins_url( '/css/plugin.css' ) );
	wp_enqueue_style( 'plugin-development' );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

这是仅包含wp_enqueue_style()的代码:

function register_plugin_styles() {
wp_enqueue_style( 'plugin-development', plugins_url( '/css/plugin.css' ) );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

如何在WordPress中管理JavaScript脚本

WordPress通过两个主要函数来管理JavaScript文件:wp_register_script()wp_enqueue_script()

  1. 注册脚本
    • 使用wp_register_script()函数来注册一个自定义的JavaScript文件。
    • $handle:这是脚本的唯一标识名,用于WordPress中的识别。
    • $src:这是脚本文件的URL或路径。如果你在注册时已经指定了路径,那么在后续加载时就不需要再次指定。
  2. 加载脚本
    • 通过wp_enqueue_script()函数,将已注册的脚本加载到网站上。如果路径已在注册中指定,加载时则可省略此参数。
  3. 附加参数
    • $deps:列出当前脚本依赖的其他脚本数组,如jQuery
    • $ver:指定脚本的版本号,便于跟踪管理多个版本。
    • $in_footer:设置脚本是否应在HTML文档的页脚部分加载。默认情况下,脚本在<head>部分加载。

就像样式表一样,如果你已经知道脚本的详细信息,也可以直接使用wp_enqueue_script()来加载脚本,无需预先注册。

具有这两个函数的示例:

function register_plugin_script() {
	wp_register_script( 'new-script', plugins_url( '/script.js' ) );
	wp_enqueue_script( 'new-script' );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_script' );

我们看一个带有单个wp_enqueue_script()函数的示例:

function register_plugin_script() { 
wp_enqueue_script( 'new-script', plugins_url( '/script.js' ) ); 
add_action 
( 'wp_enqueue_scripts', 'register_plugin_script' );

如何在 WordPress 中使用 wp_enqueue_script

如何在 WordPress 中使用 wp_enqueue_scripts 挂钩将脚本排入队列 

如何将 wp_enqueue_script 与 jQuery 一起使用

wp_enqueue_script()函数有一个附加的array()参数,可让用户指定所需的脚本依赖项。

function my_custom_script() {
    wp_enqueue_script( 'registered-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_script' );

在代码中,我们使用wp_enqueue_scripts()函数将名为my-script.js的脚本排入队列。

你可以通过在页脚中加载脚本来提高网站的速度。当浏览器等待这些脚本时,这可能会导致页面加载时间变慢。如果将脚本移动到页脚部分,浏览器可以先显示内容,然后加载脚本。检查以下示例以获取更多信息:

function plugin_assets() {
wp_enqueue_script( 'custom-script', plugins_url( '/js/my-script.js' , __FILE__ ), array( 'jquery' ), true );
}
add_action( 'wp_enqueue_scripts', 'plugin_assets' );

示例中,我们创建了一个名为my_custom_styles的函数,该函数注册了一个名为my-styles.css 的自定义样式表并将其排入队列。

如何在 WordPress 中使用 wp_enqueue_scripts 挂钩将脚本排入队列 

结论

在WordPress中,使用wp_enqueue_scripts挂钩和相关的函数,比如wp_enqueue_script()wp_enqueue_style(),来方便且高效地添加自定义的JavaScript脚本和CSS样式。这些工具帮助你确保脚本和样式被正确地加载到网站上,同时避免了代码冲突和重复加载的问题。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/8343/

(0)
上一篇 2024年 5月 2日 下午8:23
下一篇 2024年 5月 3日 上午11:31

相关推荐

发表回复

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

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
购买我们的托管服务器,享受免费运维!