指定 WordPress 页面按需加载 JavaScript

指定 WordPress 页面按需加载 JavaScript

作者 : 资源客 发布时间: 2019-11-22

在 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 文件。

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

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

http://xzh.i3geek.com
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途及非法用途,否则后果自负!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"qq301.com",如遇到无法解压的请联系管理员!
资源客是一个优秀的分享资源站,本站资源均为各位友友分享而来,特殊原创会标明如有侵犯版权等可联系删除

资源客 » 指定 WordPress 页面按需加载 JavaScript