wp_enqueue_style和wp_enqueue_script加载CSS和JS
函数:wp_enqueue_script() 1 <?php wp_enqueue_script( $h…
函数:wp_enqueue_script()
1
|
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
|
参数解释:
-
$handle
:用于区别 JS 名称,即标识字串 (string); -
$src
:JS 的文件 URL (string); -
$deps
:加载的 JS 所依存的其他 JS 标识字串数组 (array:string, 非必需); -
$ver
:JS 的版本号,留空则使用当前 WP 版本号 (string, 非必需); -
$in_footer
:是否放置到网页 HTML 底部加载 (boolean, 非必需)。
函数:wp_enqueue_style()
1
|
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
|
参数解释:
-
$handle
:用于区别 CSS 的名称,即标识字串 (string); -
$src
:CSS 的文件 URL (string); -
$deps
:加载的 CSS 所依存的其他 CSS 标识字串数组 (array:string, 非必需); -
$ver
:CSS 文件的版本号,留空则使用当前 WP 版本号 (string, 非必需); -
$media
:用于加载 CSS 的头部标签 link 的 media 参数值 (string, 非必需)。
示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?php
function my_enqueue_scripts() {
if( !is_admin ) { // 前台加载的脚本与样式表
// 去除已注册的 jquery 脚本
wp_deregister_script( ‘jquery’ );
// 注册 jquery 脚本
wp_register_script( ‘jquery’, get_template_directory_uri() . ‘/js/jquery.js’, false, ‘1.0’, false );
// 提交加载 jquery 脚本
wp_enqueue_script( ‘jquery’ );
}
}
// 添加回调函数到 init 动作上
add_action( ‘init’, ‘my_enqueue_scripts’ );
?>
|
在以往我们制作 WP 主题的时候,当引入 JS 文件或 CSS 文件时,通常是直接编辑 header.php 文件,然后将相应的页面头部 HTML 代码添加进去。或者利用 wp_head()
函数钩子插入 HTML 代码。
遇到一个插件或主题功能比较多的 WordPres 网站时,如果仍使用自行插入代码的方式引入 JS / CSS,将可能导致 JS 的重载和 CSS 的重定义或覆盖的后果。而使用 wp_enqueue_script()
和wp_enqueue_style()
等函数操作头部引用,将输出 HTML 语句的工作交给 WP 内核去完成(几乎所有插件都这么做),不仅能够避免重复加载的现象出现,也可实现按 PHP 脚本顺序,任意修改、覆盖、删除即将被加载的 JS 文件和 CSS 文件。
类别:WordPress开发、
本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。
还没有任何评论,赶紧来占个楼吧!