WordPress怎么引用javascript和 CSS 文件

第一种就是常见的 link 标签引用 CSS 文件,Script 标签应用 JS 文件。这里不再赘述。

第二种就是使用 wp_head 函数。wp_head 函数用来输出一些自定义或者系统定义的内容,我们有时候会使用下面代码引用文件:

 代码如下 复制代码

<?php
add_action('wp_head', 'wpjam_normal_script');
function wpjam_normal_script() {
echo '资源文件的链接';
}
?>

将上面代码复制到 functions.php 文件中,即可引用对应的文件。

WordPress 的排队引用(Enqueue Scripts)资源机制
在 WordPress 中引用资源,应该使用 wp_enqueue_script 这个函数,函数名中有个单词 enqueue 是排队或者排序的意思。众所周知,WordPress 有很多的插件,几乎每个插件都会引用一些资源文件,难免会有两个插件引用的资源发生冲突等,这样会变得不稳定而且可能会影响效率。

使用这种方式引用,和对应文件以及核心代码分离的,如果用户想要禁用某个资源,直接删除、修改、注释掉即可,而不需要从核心代码中修改。

此外,WordPress 中内置了一些常用的库(例如 jQuery、jQuery UI 等),我们可以使用wp_enqueue_script 这个函数直接调用内置库,可以节约代码量,更加清晰规范。内置的已经定义库的列表和标识符(handle)请点击这里查看。

如果使用这个函数来引用自己的 JS 和 CSS 文件,首先需要使用 wp_register_script 这个函数注册一个标识(handle),然后使用 wp_enqueue_script 函数调取这个标志对应的资源。

 

WordPress 合理引入 JS 和 CSS 的方法
可以使用下面代码为你的插件引入 plugin.css 文件。

 代码如下 复制代码
<?php
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 的资源,随后将其排队请求添加到 wp_enqueue_scripts 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 文件的比较完整的例子:

 代码如下 复制代码
<?php
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 引入资源
上面的例子都是以插件开发引用资源为例,在主题中引用的方法相似,主要的区别就在于使用对应的函数获取主题目录从而得到主题下面的资源文件地址。

可以使用 get_template_directory_uri 这个函数来获取当前主题的目录,如果你使用的是子主题,那么需要使用 get_stylesheet_directory_uri 这个函数来获取父主题的目录从而得到对应资源。

时间: 2024-07-31 21:15:57

WordPress怎么引用javascript和 CSS 文件的相关文章

在服务端合并和压缩JavaScript和CSS文件

CSS Sprites和图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题,这项技术尚未大量使用.目前大部分网页中的JavaScript和CSS文件数量和开发时一致,少量的网页会根据实际情况采取本地合并,这些合并中相当多的是有选择地手动完成,每次新的合并都需要重新在本地完成并上传到服务器,比较的随意和繁琐,同样文件的压缩也有类似的情况.而利用服务端的合并和压缩,我们就可以按照开发的逻辑尽可能让文件的颗粒度变小,利用网页中URL的规则来自动实现文件的合并和压缩,这会

代码-请问怎么才能引用到这个.css文件?

问题描述 请问怎么才能引用到这个.css文件? 这句代码应该怎么改? 解决方案 ../../h-ui/css/h-ui.doc.css 解决方案二: ./././h-hui/css/xxxxx.css 解决方案三: ../../../h-hui/css/xxxxx.css 解决方案四: ./././h-hui/css/xxxxx.css 解决方案五: ./././h-hui/css/xxxxx.css 解决方案六: ./././h-hui/css/xxxxx.css 解决方案七: ../../w

yii2.0模板引用js与css文件

Yii2使用更加规范的方式,通过AppAsset::register($this)方法引入js和css文件,在Yii2的示例中,layouts的main.php中就有它的用法:AppAsset::register($this). 在WEB目录中,会有一个assets目录,这个目录下有个Appasset.php文件,内容如下: namespace frontend\assets;   use yii\web\AssetBundle;   /**  * @author Qiang Xue <qian

使用 YUI Compressor对JavaScript和CSS文件进行压缩优化(转)

本 文向您介绍如何通过在您的 CSS 和 JavaScript 文件中 - 两种易于优化的常见资源,使用社区中提供的工具即可完成优化 - 优化空间使用来实现更高的性能.然而,在继续之前,有一点是很重要的,压缩 CSS 和 JavaScript 文件只是为了让您的 web 应用程序 "轻巧" 的诸多操作其中的两个技术.    为了从本文中获得最大收益,您需要安装下列工具: 一个文本编辑器 Java Runtime Environment 1.4 或者更新版本    问题:空白内容 当 开

web系统js、css文件终极提速之gzip静态压缩+动态压缩

首先转载一个静态方法 web系统中免不了要使用大量的javascript和css文件,如开源的javascript框架prototype.jquery.extjs-core等等,这些js框架,少都有几百K,我曾经做过不少项目,都用了大量的js.特别是extjs,功能实在是强大,却也是体积最大的一个js框架.使用中稍不留神很容易导致你的系统反映缓慢.为了提高js.css文件的下载速度,从而提高页面的响应速度,减小文件的大小才是终极之道.减少这些文件的大小已经有了不少的js压缩工具可以做到,.在这里

ASP.NET MVC Bundles 用法和说明(打包javascript和css)_自学过程

在网页中,我们经常需要引用大量的javascript和css文件,在加上许多javascript库都包含debug版和经过压缩的release版(比如jquery),不仅麻烦还很容易引起混乱,所以ASP.NET MVC4引入了Bundles特性,使得我们可以方便的管理javascript和css文件. 原来,我们引用css和javascript文件我们需要这样一个一个的引用: 复制代码 代码如下: <scriptsrc="~/Scripts/jquery-1.8.2.js">

网站性能最佳体验-JavaScript和CSS

JavaScript和CSS 在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则,除此之外,JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面: CSS: 1.       把样式表置于顶部 2.       避免使用CSS表达式(Expression) 3.       使用外部JavaScript和CSS 4.       削减JavaScript和CSS 5.       用<link>代替@import 6.   

服务端合并和压缩JS和CSS文件

Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则.减少HTTP请求的方案主要有合并JavaScript和CSS文件.CSS Sprites.图像映射(Image Map)和使用Data URI来编码图片.CSS Sprites和图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题,这项技术尚未大量使用.目前大部分网页中的JavaScript和CSS文件数量和开发时一致,少量的网页会根据实际情况采取本地合并,这些合并中相当多

asp.net后台如何动态添加JS文件和css文件的引用?

  首先添加命名空间 using System.Web.UI.HtmlControls; 1.代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGenericControl(); myCss .TagName = "link"; myCss .Attributes.Add("type", "text/css"); myCss .Attributes.Add("rel", &qu