注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

艾艾贴微商代理,微信:zeji110

艾艾贴,是30:1的五年黄金艾绒,效果是传统艾灸3~5倍!

 
 
 

日志

 
 
关于我

没基础?没资金?没关系!手把手教你低成本创业。加入我们,让你月薪过万,时间、金钱双自由。

网易考拉推荐

【wp优化】优化WordPress中CSS和JavaScript  

2013-03-02 20:20:34|  分类: Wordpress |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
  WordPress是一个强大的博客程序,但它的主题及插件通常需要一些CSS和Javascript来实现其功能。加载更复杂的主题或是更多插件导致网站速度变慢。加载相关CSS和Javascript耗费了大量的时间,特别是很多博友都是使用国外主机,优化CSS和Javascript可以在最大程度上减少加载时间。

  一、CSS和Javascript合并优化

  1、优化插件 WP Minify

  wp Minify是将Minify引擎整合到WordPress中。一经启用,该插件就能够合并和压缩你的 JS 和 CSS 文件来提高页面的加载速度。生成类似 这样的形式,减少浏览器对服务器页面url的请求次数。

  2、手动何必CSS和Javascript

  方法很简单,那就是把如a.js、b.js、c.js……中的代码复制在一个文件中,保存为all.js。将原来调用a.js、b.js、c.js……的引用代码替换成: ,完后删除原js即可

  这个方法唯一的缺点就是合并后的文件太大,影响加载速度。

  二、CSS和Javascript加载位置优化

  为了最大限度地保证兼容性,不至于出现Javascript失效的情况,所以一般在页头加载Javascript文件。但是根据 Yahoo 开发者论坛的建议,加载Javascript应该尽量在页尾以提高页面的显示(响应、渲染)速度。

  1、Javascript to Footer插件

  安装这个插件,可以自动把头部的Javascript自动的加载在footer,保证正常使用。

  2、手动调整

  使用Javascript to Footer会使某些必须加载在头部的js一并放在footer,会出现兼容和显示错误,因此。我们需要选择性的进行加载。使用的函数是 wp_enqueue_script()和 wp_register_script()使用的结构都一样。我们下面用wp_enqueue_script()来做例子。

  函数用法

  wp_enqueue_script(

  $handle

  ,$src

  ,$deps

  ,$ver

  ,$in_footer

  );

  参数解释:

  $handle:用于区别 JS 名称,即标识字串 (string);

  $src:JS 的文件 URL (string);

  $deps:加载的 JS 所依存的其他 JS 标识字串数组 (array:string, 非必需);

  $ver:JS 的版本号,留空则使用当前 WP 版本号 (string, 非必需);

  $in_footer:是否放置到网页 HTML 底部加载 (boolean, 非必需)。

  实例:

  
  function my_enqueue_scripts() {

  if( !is_admin ) { // 前台加载的脚本与样式表

  // 去除已注册的 jquery 脚本

  wp_deregister_script( 'jquery' );

  // 注册 jquery 脚本

  wp_register_script( 'jquery', 'http://code.jquery.com/jquery.min.js', array(), 'lastest', false );

  // 提交加载 jquery 脚本

  wp_enqueue_script( 'jquery' );

  // 注册 superfish 脚本

  wp_register_script( 'superfish', get_template_directory_uri() . '/js/superfish.js', array( 'jquery' ), '1.2', false );

  // 提交加载 superfish 脚本

  wp_enqueue_script( 'superfish' );

  // 注册并加载 custom 脚本

  wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '3.0', true );

  } else { // 后台加载的脚本与样式表

  // 取消加载 jquery 脚本

  wp_dequeue_script( 'jquery' );

  // 注册并加载 jquery 脚本

  wp_enqueue_script( 'jquery', 'http://code.jquery.com/jquery.min.js', array(), 'lastest', false );

  }

  }

  // 添加回调函数到 init 动作上

  add_action( 'init', 'my_enqueue_scripts' );

  ?>

  特别注意的是$in_footer默认值为false。如果留空或是false,则默认js加载在头部,如果是true,则显示在footer。

  运行上面的例子,只有customs.js会被加载在footer。其他的均加载在头部。

  三、总结

  WordPress 模板功能越来越强大,我们应尽量使用 WordPress内建的众多的模板函数标签,实现主题或插件的各种功能。同时,我们更必须避免修改 WP 内核代码的可能性。
  评论这张
 
阅读(407)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017