!
也想出现在这里? 联系我们
广告位

用wp_enqueue_style和wp_enqueue_script加载CSS和JS

在制作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 ); ?&gt;

参数解释:

  • $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函数,即:

&lt;?php wp_head(); ?>

同理,加载到页脚需要footer.php包含wp_footer函数。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

屏蔽网络运营商植入广告jQuery代码

2021-4-18 17:29:30

WordPress教程

-webkit-appearance导致checkbox复选框消失

2021-4-19 5:29:34

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索