专栏首页一丘一壑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 条评论
登录 后参与评论

相关文章

  • ASP.NET弹出消息对话框的方法小结

    在页面上放置一隐藏控件,并在页面最后放上一段脚本代码,脚本代码检测隐藏控件的value是否为空,若不为空则弹出对话框显示信息,否则什么也不做。 后台代码在需要的...

    阳光岛主
  • AJAX控件UpdatePanel使用详解

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用...

    阳光岛主
  • js 函数function用法

    javascript 函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的。通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传...

    阳光岛主
  • VS2008(C#)制作网页Tab标签切换方法(二)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab_JScript.aspx.cs" Inh...

    阳光岛主
  • ASP.NET服务器控件与客户端控件OnClientClick和OnClick的用法比较

    <head runat="server">     <title>无标题页</title>     <script language="javascript">...

    阳光岛主
  • Android与js交互实例

    Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true

    阳光岛主
  • c#判断输入文字是否是数字

    方案三:      正则表达式方法      例:      //引用正则表达式类      using   System.Text.RegularExpres...

    阳光岛主
  • 50种制作图表JS库

    在很多项目中都会有在前端展现数据图表的需求,而在开发过程中,开发者往往会使用一些JavaScript库,从而更有效地达到想要的目标。最近,TechSlide上的...

    阳光岛主
  • ASP.NET生成随机验证码代码和看不清切换验证码的小结

    ============================================================

    阳光岛主
  • JQuery的$命名冲突

    在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法。然而,当...

    阳光岛主

扫码关注云+社区

领取腾讯云代金券