wordpress主题加入css,js

当我们修改主题时, 经常需要引入 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