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

前提说明

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

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‘”为版本信息，可随意填写