WordPress 实现 HTML5 预加载方法

WordPress 实现 HTML5 预加载方法,HTML5新增加了预加载页面技术,预加载是一种浏览器机制,使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源,当用户访问某个预加载的链接时,如果从缓存命中,页面就得以快速呈现。

IE11、Firefox、chrome 和 opera 支持  HTML5 预加载技术,预加载不一定是一个网页,并不一定是网页文件 其他静态资源JS、CSS、图片等等一样可以。

下面教大家如何让WordPress 实现 HTML5 预加载方法:

1.「后台」→「外观」→「编辑」 「header.php」文件,把下面的代码加入到 <head> 与</head> 之间

<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } ?>

如果想加个判断预读首页,可以根据上面的代码修改:

<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } elseif (is_singular()) { ?>
<link rel="prefetch" href="<?php bloginfo('home'); ?>">
<link rel="prerender" href="<?php bloginfo('home'); ?>">
<?php } ?>

这样我们就基本完成 WordPress 实现 HTML5 预加载方法,快试试效果吧!

方法参考:catswhocode & zmingcx