专栏首页一丘一壑WordPress主题中加载jQuery的最佳方法

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

一般来说,在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中注册prism.js

速度优化

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

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

验证

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 神级WordPress主题框架Genesis 2.8发布:容易引起极大舒适感

    根本毛病在哪呢?那是因为,当你安装了一个新主题时,这个主题的演示内容不会自动导入进来(译注:这就好比方便面包装上的图,“图片仅供参考”)。这就导致用户需要在文档...

    丘壑
  • 在Genesis主题中手动添加WordPress相关文章

    “相关文章(Related posts )” 或者叫“你可能还感兴趣的文章”,是WordPress中呼声最高的需求之一。许多博客,新闻网站和企业网站都有这个需求...

    丘壑
  • Genesis框架从入门到精通(10): 样式函数

    Genesis Explained Formatting Functions

    丘壑
  • 通过反事实例证构建可解释的图像分类模型(CS Machine Learning)

    图像分类领域先进建模技术的复杂性阻碍了人们能够合理解释模型的预测能力。现有解释方案普遍依照像素或者像素群来构建重要性排位。但是依次产生的解释缺乏一个最优的群组大...

    Donuts_choco
  • oracle公司推出21版

    自20世纪70年代以来,独立关系数据库公司的数量一直在稳步下降,直到只剩下Oracle。像Sybase、Ingres、Informix、MySQL、SQL Se...

    柴艺
  • 免疫浸润:生信论文40乳腺癌引文写作

    引文的基本内容:介绍背景(一段或两段)、提出问题(一段),解决问题(一段或2段)。一般引文介绍3~5段。

    芒果先生聊生信
  • 免疫浸润论文:生信论文40引文写作

    引文的基本内容:介绍背景(一段或两段)、提出问题(一段),解决问题(一段或2段)。一般引文介绍3~5段。

    芒果先生聊生信
  • 阿拉德-赫尔佐格猜想中的非亚贝利安和卡津斯(HEP T)

    很久以前,Arad和Herzog(AH)推测,在有限的简单群中,长度大于一个的两个共轭类的乘积从来不是一个共轭类。 我们讨论了这一猜想对2个一维离散量规理论中的...

    栾博舒
  • 面向对象设计的六大原则

    1)Open-Close Principle(OCP),开-闭原则,讲的是设计要对扩展有好的支持,而对修改要严格限制。这是最重要也是最为抽象的原则,基本上我们所...

    哲洛不闹
  • 圆角矩形图片

    title: 2016-5-2 前言 从网络加载的图片是矩形的,而且大小不限,为了让图片显示为四个角显示为1/4圆这样的圆角矩形,有多种方法。 通过UI资源实现...

    用户1172465

扫码关注云+社区

领取腾讯云代金券