WordPress 指定页面按需加载 JavaScript

只在使用了某个页面模板的页面上加载指定的 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 文件合并在一起文件中,这样不但可以减少页面请求数,还可以把脚本文件缓存到客户端,打开下一个页面的时候不用再下载一次。

具体什么时候合并代码到一个文件,什么时候拆分代码按需加载,要看主题的实际情况,灵活确定。

相关推荐

自动切换无法加载的静态资源,预防 CDN 挂掉后网站故障

自动切换无法加载的静态资源,预防 CDN 挂掉后网站故障

使用静态的 CDN 引入 jQuery 等一些 js 包,可以会提升网页性能。一旦引入的 CDN 地址挂掉,项目则会同样挂掉,因此我们需要在引入时,添加一个判断。 示例一: 示例二: 这段代码第一行很简单就是你正常引入 cdn 的地址,下面一行的话就是首先判断 Windows.jQuery 是否存在。也就是说判断一下这个 CDN 是不是挂掉了,如果 ...

以文件修改时间戳做 CSS、JS 等文件的版本号,减少主动清理更新缓存的次数

以文件修改时间戳做 CSS、JS 等文件的版本号,减少主动清理更新缓存的次数

每次修改 WordPress 的 css 和 js 文件,都要主动清理文件的缓存才能生效,尤其是采用了 oss 和 cdn 回源。使用函数 filemtime() 获取文件修改时间戳,并以此做版本号,比如 my.js?ver=1639757946141 就不用再去手动刷新缓存了。 注意文件必须是 相对路径,使用绝对路径会报错。 使用函数 filemtime() 所用函数为 filemtime ...

WordPress 通过模板文件和自带的函数引入 css/js 的两种方法

WordPress 通过模板文件和自带的函数引入 css/js 的两种方法

WordPress 引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的 css,js,甚至很有可能还需要加载 Jquery 文件,网上方法特多,说法不一,我们今天借鉴 wordpress 官方最新的 twentysixteen 主题来学习总结一下 WordPress 引入 css/js 各种常用方法,以及最优化的加载方法。 其实网上的N种方法总结起 ...

WordPress 单独加载指定 JavaScript 或 CSS 代码

WordPress 单独加载指定 JavaScript 或 CSS 代码

我们可以通过 WordPress 自定义字段来给某篇的日志单独加载 Javascript 脚本和 CSS 样式表。假设我们给日志单独加载 Javascript 脚本的自定义字段是 custom_head。 那么你首先需要把上面这段代码复制到你主题的 functions.php 文件中,也可以直接当作一个插件,上传到插件目录中,然后在后台激活。 然后在编辑日志的时候, ...

微信扫一扫,分享到朋友圈

WordPress 指定页面按需加载 JavaScript