WordPress通过函数插入CSS和JS的方法教程-砝码网

WordPress通过函数插入CSS和JS的方法教程

前提说明

本文,主要讲的是通过“wp_enqueue_style()”函数和“wp_enqueue_script()”函数插入CSS和JS的方法,如果你是通过“link”和“script”标签,也就是绝对路径直接插入的方法,本文就就可以不必看了。

WordPress通过函数插入CSS和JS的方法教程插图

WordPress通过wp_enqueue_style()函数插入CSS和通过wp_enqueue_script()函数插入JS

插入CSS方法

wp_enqueue_style()函数

插入本地CSS实例

 wp_enqueue_style('video-js', trailingslashit(get_stylesheet_directory_uri()) . 'assets/css/video-js.min.css');

插入远程CSS实例

 wp_enqueue_style('video-js', 'https://cdn.jsdelivr.net/npm/video.js@7.17.0/dist/video-js.min.css');

参数说明

  • wp_enqueue_style”为引入css类型必要函数
  • video-js”为样式名称,可随意填写,多个样式时,名称需要区别开,可添加123等序列
  • get_stylesheet_directory_uri()”表示子主题目录;如果是主题目录(父级)则为“get_template_directory_uri()”

插入JS方法

wp_enqueue_script()函数

插入本地JS实例

 wp_enqueue_script('video-js', trailingslashit(get_stylesheet_directory_uri()) . 'assets/js/video.min.js?ver='7.17.0); 

插入远程JS实例

 wp_enqueue_script('video-js', 'https://cdn.jsdelivr.net/npm/video.js@7.17.0/dist/video.min.js); 

参数说明

  • “wp_enqueue_script为引入js类型必要函数
  • video-js”为样式名称,可随意填写,多个样式时,名称需要区别开,可添加123等序列
  • get_stylesheet_directory_uri()”表示子主题目录;如果是主题(父级)目录则为“get_template_directory_uri()”
  • ?ver=’7.17.0‘”为版本信息,可随意填写
© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享