优化WordPress中CSS和JavaScript

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

　　一、CSS和Javascript合并优化

　　1、优化插件 WP Minify

　　wp Minify是将Minify引擎整合到WordPress中。一经启用，该插件就能够合并和压缩你的 JS 和 CSS 文件来提高页面的加载速度。生成类似，完后删除原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 内核代码的可能性。

补充：web前端 , HTML/CSS  ,