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

发表评论

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

滚动到顶部