WordPress主题中加载jQuery的最佳方法

栏目: jQuery · 发布时间: 6年前

内容简介:一般来说,在html页面底部 (也就是在WordPress模板中加载在子主题的文件夹中,创建一个名为

一般来说,在html页面底部 (也就是 </body> 之前)引入JavaScript,如jQuery 和 jQuery插件是个不错的做法。原因很简单,HTTP / 1.1规范表明浏览器不能并行下载两个以上的组件。

在WordPress模板中加载 JavaScriptjQuery 的最佳方法是使用 wp_enqueue_script 。这样可以更好的控制JavaScript文件的加载时间点和加载位置。下图是我在丘壑博客上添加的用于代码语法高亮的JavaScript,放在子主题的 functions.php 文件中。

在子主题的文件夹中,创建一个名为 js 的文件夹,然后把需要的JavaScript文件放在里面。路径应该是这样子: child-theme-directory/js/filename.js

WordPress主题中加载jQuery的最佳方法
在Wordpress中注册prism.js

速度优化

在下面的代码片段中,我们先把WordPress中默认自带的jQuery库取消注册,然后在页面最后部分加载国内的CDN版本。

使用CDN版本的jQuery可以提升加载速度 ,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。将下面的代码放在子主题的 functions.php 文件中即可。

WordPress主题中加载jQuery的最佳方法

验证

完成上述更改后,强制刷新一下网站,让所有资源重新加载。然后在打开Chrome的开发工具,选择查看Network 。你应该看到jQuery脚本已成功加载,并且已经移到了页面最后,也命中了CDN的缓存,如下所示。从 CF-Cache-Status 这个http头也可以看出, bootcdn.cn 的CDN使用的其实就是 Cloudflare , 一家功能非常强大的免费CDN 免费加速服务, 下一部打算把丘壑博客上的静态资源都放到上面去。

WordPress主题中加载jQuery的最佳方法

延伸阅读

该把JS文件放在HTML文档的那个位置

国内有哪些靠谱的 Javascript 库 CDN可用?

从HTTP响应头看各家CDN缓存技术

【CDN 最佳实践】CDN缓存策略解读和配置策略

How to Enqueue Scripts into Child Theme in Genesis Framework

prism.js 支持各种语言的代码高亮

carbon.now.sh 一个代码生成图片在线工具,它可以生成更加漂亮的不同风格的代码图片,方便分享代码,本文的图就是用这个生成的


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C程序设计语言

C程序设计语言

(美)Brian W. Kernighan、(美)Dennis M. Ritchie / 徐宝文、李志译、尤晋元审校 / 机械工业出版社 / 2004-1 / 30.00元

在计算机发展的历史上,没有哪一种程序设计语言像C语言这样应用广泛。本书原著即为C语言的设计者之一Dennis M.Ritchie和著名计算机科学家Brian W.Kernighan合著的一本介绍C语言的权威经典著作。我们现在见到的大量论述C语言程序设计的教材和专著均以此书为蓝本。原著第1版中介绍的C语言成为后来广泛使用的C语言版本——标准C的基础。人们熟知的“hello,World"程序就是由本书......一起来看看 《C程序设计语言》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具