分享
 
 
 

优化WordPress中CSS和JavaScript

王朝互联网·作者佚名  2013-03-02
窄屏简体版  字體: |||超大  

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 内核代码的可能性。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有