文章目录
用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_scripts
actions操作中。
虽然函数名称是一个脚本,但它与资源文件的类型无关,并且对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.chenweiliang.com/ ) 分享的《WordPress如何适当引入JavaScript?自定义加载JS和CSS文件》,对您有帮助。
欢迎分享本文链接:https://www.chenweiliang.com/cwl-950.html
欢迎加入Telegram频道,获取最新更新!
喜欢就分享和按赞!您的分享和按赞,是我们持续的动力!