WordPress如何适当引入JavaScript？自定义加载JS和CSS文件
1 有缺点的引用方法
- 2 WordPress Enqueue Scripts资源机制
- 3 WordPress怎样适当引入JS和CSS文件？
- 4 WordPress主题使用wp_enqueue_script引入资源
用WordPress建站的程序员，在开发WordPress插件或定制WordPress主题时，会引用一些JavaScript和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函数获取父主题的目录以获取相应的资源。
希望我们网站（ https://www.wordpressx.com/ ） 分享的《WordPress如何适当引入JavaScript？自定义加载JS和CSS文件》，对您有帮助。