前端优化

javascript

WordPress如何只在主页加载JavaScript

我的主页有一个Slideshow,这个slideshow需要加载一个jquery脚本才能正常显示。但其他的页面没有slideshow,所以其他的页面不需要加载这个jquery脚本。但我的wordpress主题默认在所有页面都加载这个jquery脚本,这个脚本有110K。所以,我需要修改一点代码,让这个脚本只在主页加载。 代码 下面这一段代码检测页面是否为主页,如果是主页就加载<script>标签里的脚本。如果不是主页,那么显示“ This is not the homepage”消息。 <?php if( is_home() ) { ?> <script> content </script> <?php } else...

最小化

WordPress如何最小化JavaScript和CSS文件

什么是JavaScript和CSS最小化? 所谓最小化(minification)就是将JavaScript和CSS文件中的空白、注释等不必要的字符删除以降低文件大小的过程。这可以提升网站速度,使网页加载得更快。通过最小化,文件的大小可以降低10%~40%。借助适当的工具,我们可以轻松地将JavaScript和CSS文件最小化。 CSS文件的最小化 首先,备份原来的CSS文件,你可以将备份的CSS文件命名为style-old.css。 然后前往这个网站:http://www.freeformatter.com/css-minifier.html  自动帮你最小化CSS文件。在这个网站上,你可以输入CSS文件的URL,然后点击minify按钮以进行最小化。 最小化完成后,它会自动弹出最小化后CSS文件的下载对话框。将最小化后的CSS文件放在原来CSS文件在网站中的目录。最小化后,我的CSS文件的大小从90K变成了72K。CSS文件最小化后的模样: JavaScript文件的最小化 首先,备份原来的JavaScript文件,你可以将备份的JavaScript文件命名为js-old.js 然后前往这个网站: http://jscompress.com 自动帮你最小化JavaScript文件。在这个网站上,你要将JavaScript文件的内容粘贴到文本框,然后点击Compress JavaScript按钮以进行最小化。你可以在浏览器地址栏中输入JavaScript的URL,然后按CTRL+A复制全部内容,粘贴到文本框中。 最小化完成后,会有一个下载的按钮,点击这个按钮下载最小化后的JavaScript文件。我的JavaScript文件从155K压缩到了124K。然后将最小化后的JavaScript文件放在网站中对应的目录。 另外一个提供最小化CSS和JavaScript文件的网站 http://refresh-sf.com/

wordpress设置

WordPress网站将多个JavaScript文件合并成一个

在一个网页加载完之前,浏览器会发出很多个HTTP请求。网页中有很多元素,如图片、CSS样式、JavaScript脚本等等。每一张图片、每一个CSS样式文件、JavaScript脚本都需要浏览器做出一次HTTP请求。减少HTTP请求可以大幅提升网页的加载速度。WordPress网站一般都会有大约10个JavaScript文件。而将10个JavaScript文件合并成一个文件就可以减少9次HTTP请求。在这篇文章中,我将介绍如何将多个JavaScript文件合并成一个文件。 找出网站有多少个外部JavaScript文件 首先,打开网站主页,然后右击鼠标,选择“查看源码”。再按CTRL+F快捷键调出搜索框,在搜索框中输入 script type='text/javascript' 后回车。选择“高亮全部”,你就能看见网页中有多少个外部javascript文件了。如下图,head中有两个外部JavaScript。一般在footer部分也能找到外部JavaScript。 合并多个JavaScript文件的方法 创建main.js文件 首先在网站根目录下面创建一个文件,命名为main.js。然后编辑main.js文件。我们需要将外部JavaScript文件的内容全部粘贴到main.js文件中。在网页的源码页面,点击JavaScript文件的地址,也就是上图中 src 后面的地址。打开了JavaScript文件,按CTRL+A选择全部内容,然后CTRL+C复制全部内容,将内容粘贴到main.js文件中。再点击下一个JavaScript文件的 src 地址,依次它们的内容粘贴到main.js文件中。最后保存。 引用main.js文件 main.js创建好以后,我们需要在wordpress主题文件夹的footer.php文件中引用main.js。footer.php文件的路径一般为/var/www/html/wp-content/themes/themename/footer.php。 在<?php wp_footer(); ?>的上一行,粘贴下面的<script>标签,将域名替换成你自己的域名。保存文件。 <script type='text/javascript'...