WordPress 教程：如何正确引用 JavaScript 和 CSS 文件
WordPress 教程：如何正确引用 JavaScript 和 CSS 文件
WordPress 教程：如何正确引用 JavaScript 和 CSS 文件
文章目录[隐藏]
在开发 WordPress 插件或者是制作 WordPress 主题的时候，都会引用一些 JavaScript 和 CSS 脚本资源。通常大家直接使用 link、script 标签写进 HTML 当中，其实 WordPress 内置了比较完善的引用脚本的函数和方法。显然，使用 WordPress 内置的方法引用，更专业更具有可扩展性一些。
有缺陷的引用方法
下面是两种常见的引用方法，并没有错，只是说不完善或者不合理。
第一种就是常见的 link 标签引用 CSS 文件，Script 标签应用 JS 文件。这里不再赘述。
第二种就是使用 wp_head 函数。wp_head 函数用来输出一些自定义或者系统定义的内容，我们有时候会使用下面代码引用文件：
add_action('wp_head', 'wpjam_normal_script');
function wpjam_normal_script() {
echo '资源文件的链接';
将上面代码复制到 functions.php 文件中，即可引用对应的文件。
WordPress 的排队引用（Enqueue Scripts）资源机制
在 WordPress 中引用资源，应该使用
这个函数，函数名中有个单词 enqueue 是排队或者排序的意思。众所周知，WordPress 有很多的插件，几乎每个插件都会引用一些资源文件，难免会有两个插件引用的资源发生冲突等，这样会变得不稳定而且可能会影响效率。
使用这种方式引用，和对应文件以及核心代码分离的，如果用户想要禁用某个资源，直接删除、修改、注释掉即可，而不需要从核心代码中修改。
此外，WordPress 中内置了一些常用的库（例如 jQuery、jQuery UI 等），我们可以使用 wp_enqueue_script 这个函数直接调用内置库，可以节约代码量，更加清晰规范。内置的已经定义库的列表和标识符（handle）请。
如果使用这个函数来引用自己的 JS 和 CSS 文件，首先需要使用
这个函数注册一个标识（handle），然后使用 wp_enqueue_script 函数调取这个标志对应的资源。
WordPress 合理引入 JS 和 CSS 的方法
可以使用下面代码为你的插件引入 plugin.css 文件。
function wpjam_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
add_action( 'wp_enqueue_scripts', 'wpjam_add_styles' );
上面先用 wp_register_script 函数创建了一个标识符为 plugin_stylesheet 的资源，随后将其排队请求添加到
action 中。虽然函数名中是 script，但是跟资源文件的类型没有关系，对 CSS 和 JS 都有效。
很显然 wp_register_script 函数没有这么简单，它可以有五个参数：
$handle：资源标识符，供 wp_enqueue_script 调用。
$src：资源的位置。相对地址或者绝对地址或者使用 WordPress 内置的函数获取地址等。常用定位函数有 plugins_url、get_template_directory_uri 等。
$deps：依赖关系。如果引用的是 jQuery 插件，需要依赖 jQuery 组建，那么就需要填写上 jQuery。注意，以数组的形式传递。
$ver：资源版本，可选的。
$in_footer：是否放在底部。一般来说，JS 文件要放在页面的底部，就可以设置这个参数为 True，留空或者 False 会输出到顶部。
下面看一个引用 JavaScript 文件的比较完整的例子：
function wpjam_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
add_action( 'wp_enqueue_scripts', 'wpjam_add_scripts' );
在 WordPress 主题开发中使用 wp_enqueue_script 引入资源
上面的例子都是以插件开发引用资源为例，在主题中引用的方法相似，主要的区别就在于使用对应的函数获取主题目录从而得到主题下面的资源文件地址。
这个函数来获取当前主题的目录，如果你使用的是，那么需要使用
这个函数来获取父主题的目录从而得到对应资源。
&我爱水煮鱼，如果本文对你有帮助，你可以扫描右边的二维码打赏：
你可能也喜欢
& Copyright 2016
，页面生成时间：0.000616秒。
Icons by .
Powered by .
Hosting by .javascript css:如何用JavaScript动态建立或增加CSS样式表_脚本技术_前端技术
您的位置： &
& 详细内容
&&&1。简单的方法，不管不顾，直接这样就可以：
document.createStyleSheet().cssText = '标签{color:' +// 这个注释只在当前JS中帮助理解，并不会写入CSS中'width:300height:150px}' +'.类名{……}' +'#ID们{……}';&//完活。我喜欢分号这样写，和指令书写的起始位置对齐比较好一点，尤其是后面有其它语句的时候。& 2。&完善一点的方法，防止重复添加，可以通过添加样式表ID并对其判断来实现： if (!document.styleSheets['要建立的样式表ID如theforever']) { //先检查要建立的样式表ID是否存在，防止重复添加var ss = document.createStyleSheet();ss.owningElement.id = '要建立的样式表ID如theforever';ss.cssText = '标签{display:inline-overflow:' +// 这个注释只在当前JS中帮助理解，并不会写入CSS中'text-align:width:300height:150px}' +'.类名{……}' +'#ID们{……}';}&
本文链接/html/wyzz/JavaScript_Ajax/06.html
( 20:01:51)
( 20:01:49)
( 20:01:48)
( 20:01:44)
( 20:01:42)
( 20:01:41)
( 20:01:39)
( 13:20:42)
相关排行总榜如何实现JavaScript动态加载CSS和JS文件
投稿：lijiao
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JavaScript动态加载CSS和JS文件，需要的朋友可以参考下
项目中需要用到动态加载CSS 文件，整理了一下，顺便融合了动态加载JS 的功能写成了一个对象，先上代码：
var dynamicLoading = {
css: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href =
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
js: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src =
script.type = 'text/javascript';
head.appendChild(script);
对象包含两个完全独立的方法，分别用来加载CSS 文件和JS 文件，参数均为欲加载的文件路径。原理非常的简单：对于不同的加载文件类型创建不同的节点，然后添加各自的属性，最后扔到head 标签里面。经测试，本方法兼容各浏览器，安全、无毒、环保，是 web 开发人员工作常备代码。
下面是调用代码，异常简单：
//动态加载 CSS 文件
dynamicLoading.css("test.css");
//动态加载 JS 文件
dynamicLoading.js("test.js");
以上就是告诉大家如何实现JavaScript动态加载CSS和JS文件，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具主题推荐：
& 怎样通过JS来为网页元素添加CSS样式？
在开发网页时，有时不想通过CSS源文件来添加网页元素的CSS样式代码，这时，我们可以通过JS来添加这些元素的CSS样式。那么怎样通过JS来为网页元素添加CSS样式呢？
下面举一个简单案例：&div id="box"&&/div& 我们要为这个id为 box 的div添加样式。我们要为它添加宽度、高度、背景色。
var head= document.getElementById("box"); //获取到id为box的div标签元素。
head.style.width = "70px"; //设置宽度为70
head.style.height = "70px";//设置高度为70
head.style.display = "#ccc";//设置背景色为灰色
这种方法比较简单，但是，如果CSS样式很多的话，如还有margin、padding、font-size等，这时，我们还这样写的话，那会一大堆。这时，我们可以用方法二。
var head= document.getElementById("box");//获取到id为box的div标签元素。
head.style.cssText="width:70height:70display:#ccc";
这种方法中，我们用到了“ cssText”，这样我们就大大地减少了代码。就像写CSS源文件里一样。
文章作者：
本文地址：
版权所有 & 转载时必须以链接形式注明作者和原始出处！
或许你会感兴趣的文章：
ssmay主题专题