仅在特定的 WordPress 页面上按需加载 JavaScript，优化页面性能

关于WordPress主题或插件中加载JavaScript的问题

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

为什么要在特定页面加载JavaScript？

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

比如，我们的主题中有一个名为“PortfolioArchive”的页面模板，在这个模板中，我们需要使用“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文件合并在一起文件中，这样不但可以减少页面请求数，还可以把脚本文件缓存到客户端，打开下一个页面的时候不用再下载一次。具体什么时候合并代码到一个文件，什么时候拆分代码按需加载，要看主题的实际情况，灵活确定。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。