WordPress引入JavaScript？自定义加载JS和CSS文件

原文链接：https://www.chenweiliang.com/cwl-950.html

文章目录

• 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函数获取父主题的目录以获取相应的资源。

欢迎转载《WordPress引入JavaScript？自定义加载JS和CSS文件》
陈沩亮版权所有，转载请注明出处链接：https://www.chenweiliang.com/cwl-950.html


网站地址：https://www.chenweiliang.com/



欲学更多秘技，请关注微信公众号：cwlboke