1. 背景说明

在网页中加入JavaScript脚本是一种很常见的需求,一般html+js 的网页或者传统的jsp都是 通过html 的header中通过link 标签加入。WordPress也可以这么做,只是一来不优雅,二来不符合官方建议,也不便于管理。

标准的脚本加载方式应该是使用 WordPress 官方提供的函数加载,而常用的函数有四个:

  • wp_enqueue_scripts(在前台加载)
  • admin_enqueue_scripts(在后台加载)
  • login_enqueue_scripts(在登录页加载)和
  • init(初始化时加载)。

这几种函数的区别看字面就很好理解。比如admin_enqueue_script()里面加载的js文件前台一般是不需要的,就不用在wp_enqueue_scripts加载。 而jQuery这种库文件,一般会被其他的js脚本依赖, 所以应该使用init的方式来加载(也可以根据需要,采用局部加载)。

 

这里我们用百度统计代码来做个列子介绍一下 wp_enqueue_script()的使用,它的基本功能就是注册脚本文件并加载到生成的页面中。

2. 函数语法

 

参数详解

1. $handle,脚本的名字。应当是唯一的,用于在整个系统中标识该脚本。如果handle中,前半部分指注册的脚本的handle,后半部分作为查询字符串添加到URL后面。

2. $src,脚本的路径。对于本地的样式表不要使用http://www.mydomian.com/css/myscript.js这样的硬编码。

    • 在主题中应该使用get_template_directory_uri()来取得路径,
    • 在插件中应该使用plugins_url(),
    • 在远程的脚本应该使用协议无关URL,如//cdn.xxbootcdn.com/js/jQuery.min.js

3. $deps,表示该脚本是否依赖的其他的脚本,赖的脚本会被自动的加载。参数形式为handle数组。比如如果myscript.js 依赖jQuery, 就应该使用 array(‘jQuery’) 来做这个参数。 如果没有依赖其他脚本,就使用false。 默认值为false。该参数可选。

4. $ver,用于指定脚本的版本号的字符串。版本号将会作为查询字符串附加在脚本URL的后面,默认值为false。如果为null,则不添加使用字符。该参数可选。 (如果是自己的本地的脚本,建议不要使用版本。pindom的网站测试优化建议里面就有这条)。

5. $in_footer,表示是否把脚本添加到<header>部分。如果参数为true,脚本被加载到<body>标签底部(此处请注意:如果想要脚本加载到<body>标签底部,除了参数值为true外,要确保你的主题模板中</body>之前添加了<?php wp_footer(); ?>。这句一般在主题的footer.php文件里面 )。默认为false,该参数为可选。

 

3. 如何使用

 

这段代码不要直接copy使用的。因为theme_name_scripts 可以地方可以修改成有意义的名字。

 

我们用百度统计代码来做列子:

百度统计的官方说明不是针对WordPress的,它使用概述的方式描述怎么添加统计js代码:

  • 1. 请将代码添加到网站全部页面的</head>标签前。
  • 2. 建议在header.php类似的页头模板页面中安装,以达到一处安装,全站皆有的效果。
  • 3. 如需在JS文件中调用统计分析代码,请直接去掉以下代码首尾的,<script type=”text/JavaScript”>与</script>后,放入JS文件中即可。

我们把统计js代码copy下来,保存到我们主题目录下的js目录下,就可以用wp_enquene_scripts的函数加载了。

比如在我的主题使用的是 下面这样的代码:

 

add_action( ‘wp_enqueue_scripts’, ‘lingonberry_load_JavaScript_files’ );

这里面一共加入4个脚本,他们之间是没有关联的,放在一起,是告诉你可以加载多个js脚本。 其中有两个都是在页面载入的时候放在尾部加载的,这样就可以不让页面被加载这些js而拖住不展示,提高用户体验。

 

4. 注意的问题:

我把百度和谷歌的统计代码加载的$in_footer设置成false, 他们会来页面头部加载。 按照他们官方网站上说明,也是建议在头部加载,因为他们本身是异步加载的,即使放在头部,加载也不会阻止页面html和样式的加载。 他们的代码具体实现方式我还没有研究,但是一点可以明确:如果放在页面底部,可能用户还没有等统计代码开始执行,就是已经关闭浏览器或者跳转了,这样是统计不到。

另外,我的例子里面, flexslider和global.js都需要依赖jQuery, 所以就有array(‘jQuery’)做依赖的参数。而我的jQuery库文件没有使用WordPress自带的库,而是在init函数中使用了又拍的库cdn的远程加载方式,来优化客户端的性能。代码如下:

 

下次我们再来详细讨论jQuery加载的方式的优化吧。