WordPress如何适当引入JavaScript？自定义加载JS和CSS文件

用WordPress建站的程序员，在开发WordPress插件或定制WordPress主题时，会引用一些JavaScript和CSS脚本资源。

WordPress HTML引入加载JavaScrip（JS）和CSS文件

通常，人们直接为HTML使用link、script标记。
实际上，WordPress内置完善的引用脚本的函数和方法。
所以，使用WordPress的内置方法引用更专业，更具可扩展性。
有缺点的引用方法
有两种常见的引用方法，它没有问题，只是它不完美或不合理。

第1种：link 标签引用CSS文件

Script标签应用JS文件。这里不详述了。
第2种：使用wp_head函数

wp_head函数用于输出一些自定义或系统定义的内容。

我们有时使用以下代码来引用此文件：

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

将以上的代码复制到 functions.php 文件中以引用相应的文件。
WordPress Enqueue Scripts资源机制
大家都知道，WordPress有非常多插件：

几乎每个插件都会引用某些资源文件。
不可避免地，两个插件引用的资源之间会发生冲突，这些资源将变得不稳定并可能影响效率。
使用wp_enqueue_script函数

要在WordPress中引用资源，你应该使用wp_enqueue_script函数，该函数在排队或排序的函数名中有一个单词enqueue。
通过这种WordPress 的排队引用（Enqueue Scripts）资源的方式，引用与相应的文件和核心代码分开。
如果用户想要禁用该资源，他可以删除，修改和注释它，而无需从核心代码修改它。
此外，一些常用的库（如jQuery，jQuery UI等）内置于WordPress中。

我们可以使用wp_enqueue_script函数直接调用内置库，这样可以节省代码和更清晰的规范。

此处提供了内置定义库和标识符（handle）的列表
若用此函数引用自己的JS和CSS文件，则需先使用wp_register_script函数注册一个标识（handle），然后使用wp_enqueue_script函数调取与此标志对应的资源。

WordPress怎样适当引入JS和CSS文件？
WordPress提供JS和CSS方法的合理引入方法。

你可以使用以下代码给插件引入plugin.css文件 ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

以上使用wp_register_script函数，创建具有标识符plugin_stylesheet的资源。

然后，将其排队的请求添加到wp_enqueue_scriptsactions操作中。

虽然函数名称是一个脚本，但它与资源文件的类型无关，并且对CSS和JS都有效。

wp_register_script函数，确实并不那么简单，它可有五个参数：

1）$handle：资源标识符。

由wp_enqueue_script调用。
2）$src：资源的位置。

相对地址或绝对地址使用WordPress内置函数来获取地址等。
常见的定位函数有plugins_url、get_template_directory_uri等。
3）$deps：依赖。

如果你指的是jQuery插件并且需要依赖jQuery构建，则需要填写jQuery。
请注意以数组形式传递。
4）$ver：资源版本，可选。

5）$in_footer：是否将它放在底部？

通常，JS文件应放在页面底部，你可以将此参数设置为True，将其留空或False会输出到顶部。
让我们看一个更完善的JavaScript文件引用示例 ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

WordPress主题使用wp_enqueue_script引入资源
程序员在WordPress主题开发中，使用wp_enqueue_script引入资源。

以上示例是WordPress插件开发引用资源的示例。
主题中引用的方法类似。
主要区别是使用相应的函数，用于获取主题目录，以获取主题下的资源文件地址。

你可以使用get_template_directory_uri函数来获取当前主题目录。

如果你使用的是子主题，则需要使用get_stylesheet_directory_uri函数获取父主题的目录以获取相应的资源。

本期内容就到这里啦～以上内容均可在 方包博客「http://fang1688.cn」 网站直接搜索名称访问哦。欢迎感兴趣的小伙伴试试，如果本文对您有帮助，也请帮忙点个 赞 + 在看 啦！❤️

欢迎大家加入方包的「优派编程」学习圈子，和多名小伙伴们一起交流学习，向方包 1 对 1 提问、跟着方包做项目、领取大量编程资源等。Q群「891029429」欢迎想一起学习进步的小伙伴~

另外方包最近开发了一款工具类的小程序「方包工具箱」,功能包括：抖音、小红书、快手去水印，天气预报，小说在线免费阅读（内含上万部热门小说），历史今天，生成图片二维码,图片识别文字，ai伪原创文章，数字摇号抽奖,文字转语音MP3功能...

‍‍‍ ⬇️ 点击链接阅读原文直达 方包博客