当我们修改主题时, 经常需要引入 css, js
直接使用link标签不被支持
当你把一个 css, js 上传到模板所在位置, 比如上传 主题/assets/js/jquery.min.js
这时, 你在 主题/index.php 中使用 link 标签, 直接引用相对路径不被支持
<link rel="stylesheet" type="text/css" href="assets/js/jquery.min.js"/>
这时访问页面会提示404
如果非要使用 link, 只好使用绝对路径,
比如 href=”https://xxxxx.com/xxxxx.jquery.min.js”
虽然这样也可以用, 或者直接使用在线的 cdn 提供的链接, 但是不利于维护
放在自己空间上的, 一旦更换域名, 就得重新设置, 而使用在线 cdn, 万一cdn崩溃就麻烦了
wp_enqueue_script函数
wordpress禁止直接使用link, 但也给出了它引入css,js的函数, 比如
在任意的 php 标签内, 写上,如下内容, 即可加入css, js
- wp_enqueue_style ==> 添加css
- wp_enqueue_script ==> 添加js
wp_enqueue_style( 'zhufenghua-mouse', get_template_directory_uri() . '/assets/css/mouse.css' );
wp_enqueue_script( 'zhufenghua-jquery', get_template_directory_uri() . '/assets/js/jquery-3.5.1.min.js' );
wp_enqueue_script( 'zhufenghua-click', get_template_directory_uri() . '/assets/js/click.js' );
get_template_directory_uri获取主题目录
在写相对路径时, 这个函数是获取相对位置的, 可以配合php加载img等资源
比如 , 把 href 属性配合php写成
href="<?php echo get_template_directory_uri();?>/assets/img/group.png"
使用加载css/js函数, 配合动态获取主题目录函数, 就可以加载任意主题下的css/js