您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
4-34. 推荐的引入css和js文件的方式(wp_enqueue_style与wp_enqueue_script)
发布时间：2023-03-17 22:46:51编辑：雪饮阅读（）
上篇中引入css和js虽然也使用了wordpress的方法get_theme_file_uri，但这种还是wordpress不推荐的，wordpress比较推荐的还是在页面的head标签中引入wp_head以及在body结束标签前引入wp_footer，其中wp_footer会产生类如下工具条
那么这里以index.php测试如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<?php wp_head();?>
</head>
<body>
<!--
wp_footer引入后在网页中会显示一个工具条
-->
<?php wp_footer();?>
</body>
</html>
那么还需要在当前主题目录中建立functions.php如
<?php
function myfunc01(){
/*
wp_enqueue_style方法的第一个参数可以随便自定义，像是标记一样吧
第二个参数就是css文件的路径（看这种情况应该是支持http协议的css文件）
*/
wp_enqueue_style('mystyle01',get_theme_file_uri().'/1.css');
/*
wp_enqueue_script：
参数1：也是和标记一样可以自定义
参数2：js文件路径
参数3：$deps：
$deps
[] (optional) 当前脚本依赖的脚本数组（必须在当前脚本之前加载）。
如果没有依赖关系则$deps参数失效。
$deps参数仅在WordPress没有内置当前脚本时是必填项。
Default: []
其实参数3这里没有过多探索，应该是可以写成["jquery"]类似这样或者是完全路径吧，但不管怎样据说这个数组里面的js会在参数2定义的js文件先加载
参数4：就是版本号，在script的src里面引入该文件后面带一个版本号例如：
<script type="text/javascript" src="http://localhost/wpcourse/wp-content/themes/themes05/1.js?ver=0.07"></script>
这里版本号就是0.07
具体作用暂时不详
参数5：
是否将当前引入的参数2的这个js文件放置于footer中，应该就是wp_footer中，
但不管怎样根据我的实际测试是放置于body标签结束前，如果是false
则是放置于head标签里
下面是借用一个有点像是官方的资料
$in_footer
(boolean) (optional) 通常脚本位于<head>区域。如果$in_footer参数设置为true，脚本会位于<body>底部。
$in_footer参数需要主题在适当的位置有wp_footer()钩子。请注意，您必须在wp_head运行之前加载当前脚本，即使脚本放置在页脚。
Default: false
*/
wp_enqueue_script('myjs01',get_theme_file_uri().'/1.js',[],'0.07',false);
}
/*
如果有执行wp_footer函数，则会执行wp_enqueue_scripts钩子
这个钩子应该是用来加载一些css或js的脚本用的钩子
那么这里就挂钩我们的myfunc01来加载我们要的1.css
*/
add_action('wp_enqueue_scripts','myfunc01');
?>
关键字词：wp_enqueue_script,wp_enqueue_style
上一篇：4-33. 传统的引入css和js文件的方式(get_theme_file_uri)
下一篇：4-35. 使用推荐方式引入css和js文件的好处 1(wp_enqueue_style,wp_enqueue_script)
相关文章
-
无相关信息