如何在 WordPress 中使用 wp_enqueue_scripts 挂钩将脚本排入队列 -光子波动网

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

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

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

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

了解 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()。

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

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

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()。

注册脚本：
- 使用wp_register_script()函数来注册一个自定义的JavaScript文件。
- $handle：这是脚本的唯一标识名，用于WordPress中的识别。
- $src：这是脚本文件的URL或路径。如果你在注册时已经指定了路径，那么在后续加载时就不需要再次指定。
加载脚本：
- 通过wp_enqueue_script()函数，将已注册的脚本加载到网站上。如果路径已在注册中指定，加载时则可省略此参数。
附加参数：
- $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

如何将 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的脚本排入队列。

如何使用 wp_enqueue_script 在页脚中加载脚本

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

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挂钩和相关的函数，比如wp_enqueue_script()和wp_enqueue_style()，来方便且高效地添加自定义的JavaScript脚本和CSS样式。这些工具帮助你确保脚本和样式被正确地加载到网站上，同时避免了代码冲突和重复加载的问题。

本文链接：

文章作者

光子波动

隐私政策

PrivacyPolicy

服务项目

UseGenerator

服务条款

NC-SA 4.0

THE END