专栏首页许都博客指定 WordPress 页面按需加载 JavaScript

指定 WordPress 页面按需加载 JavaScript

wordpress 主题或插件中加载 JavaScript 时,官方推荐的方法是使用 wp_enqueue_script() 来加载,该函数可以指定 JavaScript 的依赖库,指定 JavaScript 文件的版本,设置在页面头部或者底部加载,非常灵活和方便。但是,该插件缺少指定在某些页面加载 JavaScript 的设置参数。所幸的是,我们可以通过 WordPress 的函数自己动手来实现这个功能。

当一个比较大的库只在某一个或几个页面使用时,我们不需要在每个页面上加载所有脚本,而只需要在特定的页面模板中加载即可,以免其他页面加载不需要的 JavaScript 文件而影响页面打开速度,增加服务器开销。

比如,我们的主题中有一个名为 “Portfolio Archive” 的页面模板,在这个模板中,我们需要使用 “imagesloaded、masonry、isotope、jquery-ias” 这 4 个 JavaScript 插件来实现这个页面的效果,而这些库在其他页面都是用不上的,如果直接在全部页面加载,每个页面都会加载这 4 个库,即使是这个页面不需要使用这些库来实现效果。

只在使用了某个页面模板的页面上加载指定的 JavaScript 文件吗,在下面的代码中,首页我们加载了每个页面都需要的 jQuery 和 Main.js 文件,然后判断当前页面是否使用了指定的页面模板,然后根据判断结果加载指定页面模板需要的 JavaScript 文件。

  1. //注册加载函数到 hook 上
  2. add_action('wp_enqueue_scripts', 'my_theme_load_scripts');
  3. // 加载样式和脚本
  4. function my_theme_load_scripts(){
  5. wp_enqueue_script('jquery');
  6. // 加载每个页面都需要的 JavaScript 文件
  7. wp_enqueue_script('my_second_script', get_template_directory_uri() . '/js/main.js');
  8. if(is_page()){ //检查当前页面
  9. global $wp_query;
  10. // 插件是否使用了某页面模板
  11. template_name = get_post_meta( wp_query->post->ID, '_wp_page_template', true );
  12. if($template_name == 'portfolio-archive.php'){
  13. // 如果使用了指定的页面模板,加载需要库
  14. wp_enqueue_script('my_third_script', get_template_directory_uri() .'/js/imagesloaded.js');
  15. ...
  16. }
  17. }
  18. }

在实际的 WordPress 主题开发工作中,并不是每个主题都需要这么操作。如果某主题使用的 JavaScript 文件比较少,全部加载一起也没有多大,我们完全可以把这些 JavaScript 文件合并在一起文件中,这样不但可以减少页面请求数,还可以把脚本文件缓存到客户端,打开下一个页面的时候不用再下载一次。具体什么时候合并代码到一个文件,什么时候拆分代码按需加载,要看主题的实际情况,灵活确定。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Code Embed:在WordPress文章和页面中添加Javascript的最佳插件

    自从又开始迷上了WordPress,每天都会花不少时间在WordPress相关的网站上闲逛,这感觉竟然有点像分手复合又陷入了热恋的情人,没事就腻歪在一起,要把之...

    丘壑
  • 总结:如何加速你的 WordPress 站点?

    这篇文章英文原文发表于Smashing Magazine,感谢小影 的为我们带来的全文翻译。内容上讲解比较通俗易懂,非常适合初学者。 几个月前,我做了一个实验,...

    Jeff
  • Display Posts : 按条件显示WordPress文章的最强插件

    WordPress本质上是一个内容管理系统(CMS),是显示、创建、发布和维护内容的软件。

    丘壑
  • WordPress中的jQuery库不起作用的相关问题

    WordPress 中的jQuery 库问题曾经困扰了我一段时间。如果仅仅加载WordPress 自带的jQuery 库,在使用一些jQuery 插件的时候明明...

    Jeff
  • 如何加速WordPress网站

    本指南提供了一个测试环境,用于说明优化WordPress的过程。环境有两个组成部分:

    沈唁
  • 用 jQuery 和 Bootstrap 在 WordPress 中添加进度条

    昨天整理了一下Genesis的系列教程的翻译进度,汇总成了一个页面 神级 WordPress 主题框架 Genesis 从入门到精通 。今天突然想放一个进度条...

    丘壑
  • WordPress开发人员犯的12个最严重的错误

    原本之前还有篇ruby的,拖得时间有点久了,同时本身没想过去过多接触ruby,所以暂且就不再祸害那篇文章了,有兴趣的可自己去看Creating a Ruby D...

    WindCoder
  • WordPress 5.4.2版本发布,BUG维护和安全更新

    嗨!您位于 https://www.baidu.com 的站点已被成功升级到WordPress 5.4.2。

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

    一般来说,在html页面底部 (也就是</body>之前)引入JavaScript,如jQuery 和 jQuery插件是个不错的做法。原因很简单,HTTP /...

    丘壑
  • 针对WordPress的攻击调查

    WordPress是一个著名的开源内容管理系统(CMS),用于创建网站和个人博客,据估计,目前35%的网站都在使用CMS。

    FB客服
  • Chrome View Source Code 那些事

    原文:How to View HTML Source in Chrome and Why

    Jerry Wang
  • WordPress加速技巧总结-如何使您的WordPress网站加载速度快

    网站优化网站加速一直是一个持久的话题,及时今天我们的网络宽带速度越来越好了,但是对于速度的追求是无止境的,文章来源:https://zouaw.com/

    wordpress建站吧
  • WordPress页面由于JavaScript插件优先性导致登录按钮不可用的问题

    今天想登录博客后台的时候,突然发现博客的管理后台的按钮动不了了,同时间用手机和自己的iPad还有不同的浏览器试了一下还是不行,没反应。去云服务器提供商——滴滴云...

    可定
  • Node.js运行原理、高并发性能测试对比及生态圈汇总

    优点就是由于多实例机制,可以保证服务器的容错性,就算出现异常也不会使多个服务器实例同时崩溃。

    Peter谭金杰
  • 腾讯云cdn对wordpress博客加速/解决腾讯云564错误

    WordPress博客的加速可以说是老生常谈了,在这里我分享一下我博客的分享技术。 我采用的加速技术主要是wordpress的缓存插件,动静分离和腾讯云CDN。

    主机优惠教程
  • WordPress 精品插件大全页面的开发小记

    昨天发布了一个Page页面:WordPress 精品插件大全。有些朋友比较感兴趣是如何做的,本篇简单写一下整个开发过程,作一个小结,也顺便整理一下代码,本地开发...

    丘壑
  • 如何使用LSCache,OpenLiteSpeed和Cyber​​Panel安装WordPress

    OpenLiteSpeed是由LiteSpeed Technologies开发和维护的高性能事件驱动的开源Web服务器。 在这篇文章中,我们将看到我们如何使用C...

    子润先生
  • 让小程序支持代码高亮

    对于编程技术类的小程序来说,在文章会有很多代码,那么代码高亮就是一个文章显得很出色的需求了。代码高亮功能的实现,主要是依靠小程序里对富文本内容的解析。对于富文本...

    Jianbo
  • 优化WordPress性能的高级指南

    虽然玩wordpress,但对wordpress和php内部了解不多,这篇文章算是自己的视野扩展吧,不足之处,欢迎指出,老规矩,能力强的可以直接读原文。

    WindCoder

扫码关注云+社区

领取腾讯云代金券