用wp_enqueue_style和wp_enqueue_script加载CSS和JS
文 / @UTHEME
在制作WordPress主题时,一般我们都是直接在header.php中写入link标签加载CSS样式表,但是,如果我们使用wp_enqueue_style加载样式表的话,可以避免重复加载,也就是说wp_enqueue_style会判断之前有没有加载过同样的样式表,如果已经加载过了就不再重复加载。另外,wp_enqueue_style的依赖功能也非常实用。
wp_enqueue_script和wp_enqueue_style的用法基本相同,加载原理也相同。
先来看一个例子:
function bzg_scripts() { wp_enqueue_style( 'normalize', get_template_directory_uri() . '/css/normalize.css' ); wp_enqueue_style( 'bzg-style', get_stylesheet_uri(), array( 'normalize', 'dashicons' ) ); wp_enqueue_script( 'bzg-js', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'bzg_scripts' );
第一行我加载了主题目录下的css/normalize.css样式表;
第二行加载了主题目录下的style.css样式表,同时,指明这个样式表依赖于normalize.css样式表和WordPress的Dashicons图标样式表,这样,WordPress就会为我们先加载normalize.css样式表,再加载Dashicons图标样式表,最后才加载style.css。
第三行加载了主题目录下的js/theme.js文件,同时,指明这个js需要依赖于jQuery库,因此,WordPress会为我们先加载jQuery库,再加载我们的JS文件。
需要说明的是,Dashicons图标样式表和jQuery库都是WordPress自带的,只是使用WordPress的jQuery库,我们需要在JS代码中把$替换为jQuery,例如:
jQuery(document).ready(function(){ });
wp_enqueue_style 函数介绍
函数用法:
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
参数解释:
- $handle:用于区别CSS的名称,即标识字串;
- $src:CSS 的文件 URL;
- $deps:非必需,加载的CSS所依赖的其他CSS标识字串数组,即其他CSS的$handle;
- $ver:非必需,CSS文件的版本号,留空则使用当前WordPress版本号;
- $media:非必需,link标签的media属性值。
wp_enqueue_script函数介绍
函数用法:
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
参数解释:
- $handle:用于区别JS的名称,即标识字串;
- $src:JS的文件URL;
- $deps:非必需,加载的JS所依赖的其他JS标识字串数组,即其他JS的$handle;
- $ver:非必需,JS的版本号,留空则使用当前WordPress版本号;
- $in_footer:非必需,如果为true,则该JS文件会在页脚加载而不是头部,但WordPress自带的jQuery库仍然会在头部加载。
提示:加载到头部,需要header.php中包含wp_head函数,即:
<?php wp_head(); ?>
同理,加载到页脚需要footer.php包含wp_footer函数。

相关文章
-
WordPress插件:All in One WP Security & Firewall 怎么样(附:AIOWPS拦截垃圾评论设置教程) 2023-01-26 21:51:51
-
在 PHP 中如何通过一行代码就交换两个变量的值 2023-01-26 00:18:31
-
WordPress主题:Pin Premium (WordPress仿Pinterest样式瀑布流主题) 2023-01-25 23:36:43
-
免费WordPress主题:Maupassant(WordPress中文博客主题) 2023-01-25 23:31:29
-
WordPress响应式图片(Responsive Image)功能关闭:取消WordPress图片宽带和高度参数 2023-01-24 10:49:32
-
wordpress报错:修复MySQL 1064错误问题 错误原因和解决方法 2023-01-24 10:42:04
-
WP Rocket – 强大的WordPress缓存加速优化插件(附:WP Rocket插件设置过程与七折优惠码) 2023-01-24 00:41:44
-
WordPress 实现静态化搜索结果页面的方法 2023-01-24 00:41:44
-
get_permalink、get_the_permalink和the_permalink有啥区别? 2023-01-24 00:41:08
-
为什么选用WordPress搭建独立站? 2023-01-23 20:25:21