Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >WordPress主题中加载jQuery的最佳方法

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

作者头像
丘壑
发布于 2019-03-13 02:19:23
发布于 2019-03-13 02:19:23
2.7K0
举报
文章被收录于专栏:一丘一壑一丘一壑

一般来说,在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 免费加速服务, 下一部打算把丘壑博客上的静态资源都放到上面去。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-02-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
替换WordPress 自带默认的 jQuery库, jQuery库页脚加载
在开发WordPress 主题或者WordPress 插件时候,常常要通过wp_enqueue_script这个钩子挂载WordPress 自带的 jQuery库而非是通过硬编码的方式来加载,毕竟是为了避免多次加载 jQuery库。但在实际操作中,常常会有各种各样的问题出现。 因为WordPress 自带的 jQuery库会在最后添加jQuery.noConflict()以保证与其他js 库的兼容,因此那些通过 $ 代替jQuery的缩写代码会失效。详见《WordPress中的jQuery库不起作用的相关问
Jeff
2018/01/19
2.5K0
WordPress 如何免插件实现代码高亮
Google Code Prettify 是 Google 开源的一个用于代码高亮的 Javascript 库,支持 C/C++, Java, Python, Ruby, PHP,Javascript 等常见语言。使用Prettify一般只需包含两个文件:prettify.js 和 prettify.css。压缩过后的 prettify.js 大小差不多在 15K 左右,非常小巧。
Yangsh888
2022/03/28
6400
php更换wordpress用户头像,将用户本地上传头像功能集成到WordPress主题中
之前让WordPress支持注册用户上传自定义头像功能 一文,通过安装Simple Local Avatars和 WP User Avatar插件,可以让注册用户本地上传头像代替默认的Gravatar头像,不过一般都认为插件安装多了,会影响速度,那么我们就以WP默认主题Twenty Fifteen为例,把这个功能集成到WordPress主题中,即可方便用户,也显示得主题高大上。
超级小可爱
2023/02/20
1.1K0
WordPress面试题
将域名解析到另一台主机涉及修改域名服务器记录(DNS)和邮件服务器记录(MX)。以下是一般步骤:
777nx
2023/11/16
6540
WordPress 通过模板文件和自带的函数引入 css/js 的两种方法
WordPress 引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的 css,js,甚至很有可能还需要加载 Jquery 文件,网上方法特多,说法不一,我们今天借鉴 wordpress 官方最新的 twentysixteen 主题来学习总结一下 WordPress 引入 css/js 各种常用方法,以及最优化的加载方法。
Yangsh888
2022/03/28
1.9K0
纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮
之前发过文章说过:使用 Prism.js 实现漂亮的代码语法高亮,本博客也使用的是它
沈唁
2018/12/12
2.4K0
WordPress 网站主题页面添加加载进度条方法
WordPress 网站主题添加页面加载进度条方法。pace.js是一个非常赞的JavaScript插件,可以实时监听页面的数据加载,包括Ajax请求,显示页面加载进度,并且能够定制样式,类似浏览器加载进度条,比如Safari。下面以WordPress默认主题Twenty Seventeen为例,将这个特效功能加到主题中。
主机教程网2bcd.com
2022/10/19
6990
WordPress 教程:如何正确引用 JavaScript 和 CSS 文件
在开发 WordPress 插件或者是制作 WordPress 主题的时候,都会引用一些 JavaScript 和 CSS 脚本资源。通常大家直接使用 link、script 标签写进 HTML 当中,其实 WordPress 内置了比较完善的引用脚本的函数和方法。显然,使用 WordPress 内置的方法引用,更专业更具有可扩展性一些。
Denis
2023/04/15
1.5K0
使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题
在了解子主题功能之前,先来看一下你在使用 WordPress 的时候是否是这样:不会自己制作主题,只好从网上下载一个,这个主题整体风格比较适合,但是有些小地方不太好,自己只是有一点 CSS 基础,可以修改一些简单的样式。修改的时候,却发现主题文件这么多,里面掺杂各种 PHP、HTML 代码,让人不知道在哪里修改。
Denis
2023/04/14
1.6K0
使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题
为WordPress主题添加页面加载进度条
pace.js是一个非常赞的JavaScript插件,可以实时监听页面的数据加载,包括Ajax请求,显示页面加载进度,并且能够定制样式,类似浏览器加载进度条,比如Safari。
星哥玩云
2022/08/13
1.4K0
为WordPress主题添加页面加载进度条
WordPress主题开发,从入门到精通。
相关文档:https://www.wpzhiku.com/document/wordpress-plugin-basics/
房东的狗丶
2023/02/17
10.9K0
用 jQuery 和 Bootstrap 在 WordPress 中添加进度条
昨天整理了一下Genesis的系列教程的翻译进度,汇总成了一个页面 神级 WordPress 主题框架 Genesis 从入门到精通 。今天突然想放一个进度条,可以直观看下显示一下翻译了几篇。
丘壑
2019/03/13
1.5K0
给WordPress新添加一个古腾堡编辑器
在WordPress中添加一个额外的古腾堡编辑器(Gutenberg Editor)实例可以通过自定义代码实现。以下是一个基本的步骤指南,帮助你在WordPress中添加第二个古腾堡编辑器实例。
WordPress爱好者
2024/10/17
1410
给WordPress新添加一个古腾堡编辑器
WordPress缓存插件WP Fastest Cache插件使用教程
WP Fastest Cache 是一个多功能缓存插件,通过创建HTML文件来帮助减少您网站的页面加载时间,由于 WordPress 网站是通过 PHP 和 MySQL数据库呈现的,因此每次从服务器请求页面时都需要使用 RAM 和 CPU,会减慢加载时间,并在用户的计算机或设备以及数据库上投入更多精力。但是,使用缓存系统,页面会呈现一次,然后存储为静态 HTML 文件,从而减少每个新访问者的加载时间。
晓得博客
2022/04/27
7.3K0
WordPress缓存插件WP Fastest Cache插件使用教程
指定 WordPress 页面按需加载 JavaScript
在 wordpress 主题或插件中加载 JavaScript 时,官方推荐的方法是使用 wp_enqueue_script() 来加载,该函数可以指定 JavaScript 的依赖库,指定 JavaScript 文件的版本,设置在页面头部或者底部加载,非常灵活和方便。但是,该插件缺少指定在某些页面加载 JavaScript 的设置参数。所幸的是,我们可以通过 WordPress 的函数自己动手来实现这个功能。
许都博客
2021/06/15
2.4K0
WordPress 技巧:社会化评论插件多说提速技巧
分享几个社会化评论插件多说的提速技巧:1. 不再查询 WordPress 原生的留言。 2. 不再加载 comment-reply.js,3.把多说的 JavaScript 脚本移到 footer。
Denis
2023/04/15
5260
WPJAM「静态文件」:一键合并 WordPress 插件和主题的 JS 和 CSS 文件,加快页面加载速度
每个插件和主题可能有自己的 CSS 和 JavaScript 内联代码或者文件,如果 CSS 和 JavaScript 内联代码或者文件一多,就开始出现了两个比较难受的问题:
Denis
2023/04/13
7.2K0
WPJAM「静态文件」:一键合并 WordPress 插件和主题的 JS 和 CSS 文件,加快页面加载速度
低成本搭建高质量 WordPress 博客实践指南
近期,作者发现之前撰写的文章,在外网被各种途径转载,很难进行版权保护。因此,萌生了搭建个人博客网站的想法。
rileycai
2022/07/13
3.1K1
低成本搭建高质量 WordPress 博客实践指南
【网站优化经验】Wordpress的代码与功能简单优化
现在,我们就要针对wordpress影响网站响应速度的因素进行具体问题具体分析,并探求正确的方法论高效率有效地解决问题。
幻影龙王
2021/09/11
1.2K0
【网站优化经验】Wordpress的代码与功能简单优化
WordPress Ajax 异步加载 自定义评论表情
最近为了考试都复习成狗熊样啦~~我要缓缓折腾折腾WordPress 先。今天带来本人最新的折腾成果: Ajax异步加载自定义评论表情。由于评论表情那22个gif图片加载的话实在是增加了不少的请求数,虽然本站DeveWork.com 的图片都用七牛加速了,但对于Jeff 这种有洁癖的人来说,实在是不舒服。想到可以使用 Ajax异步加载,经过不懈努力,Jeff 终于实现了这个效果,下面分享教程给大家! 这篇教程是建立在 DH博客 的一篇文章思路上面的,但是本文与之非常不同(DH 那篇文章甚至有错误),整个教程经
Jeff
2018/01/19
1.7K0
WordPress Ajax 异步加载 自定义评论表情
推荐阅读
相关推荐
替换WordPress 自带默认的 jQuery库, jQuery库页脚加载
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档