预加载,听名字就很nb,就是打开网站之前的那部分要做的内容,不知道大家有没有感觉使用谷歌浏览器的时候打开网站速度比使用ie打开的速度会快上些,原因就是谷歌浏览器可以实现预加载的功能。

其实我们也可以实现一个简单的预加载,在你主题文件的head.php顶部加入以下代码

  1. <link rel=“dns-prefetch” href=“//wp.5v13.com” />  

地址请自行修改! 既然本文要说的html5预加载,那么就继续添加代码

  1. <?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>  
  2. <link rel=“prefetch” href=“<?php echo get_next_posts_page_link(); ?>”>  
  3. <link rel=“prerender” href=“<?php echo get_next_posts_page_link(); ?>”>  
  4. <?php } ?>  

将这段代码加入到加到header.php模版,与之间。
当然我们也可以让这段代码更加人性化一点,加上个判断首页

  1. <?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>  
  2. <link rel=“prefetch” href=“<?php echo get_next_posts_page_link(); ?>”>  
  3. <link rel=“prerender” href=“<?php echo get_next_posts_page_link(); ?>”>  
  4. <?php } elseif (is_singular()) { ?>  
  5. <link rel=“prefetch” href=“<?php bloginfo(‘home’); ?>”>  
  6. <link rel=“prerender” href=“<?php bloginfo(‘home’); ?>”>  
  7. <?php } ?>  

当然也可加入一个上下页的预加载

  1. <?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>  
  2. <link rel=“prefetch” href=“<?php echo get_next_posts_page_link(); ?>”>  
  3. <link rel=“prerender” href=“<?php echo get_next_posts_page_link(); ?>”>  
  4. <?php } elseif (is_singular()) { ?>  
  5. <link rel=“prefetch” href=“<?php bloginfo(‘home’); ?>”>  
  6. <link rel=“prerender” href=“<?php bloginfo(‘home’); ?>”>  
  7. <link rel=“prefetch” href=“<?php echo get_permalink(get_next_post(false,”)); ?>”>  
  8. <link rel=“prerender” href=“<?php echo get_permalink(get_next_post(false,”)); ?>”>  
  9. <link rel=“prefetch” href=“<?php echo get_permalink(get_previous_post(false,”)); ?>”>  
  10. <link rel=“prerender” href=“<?php echo get_permalink(get_previous_post(false,”)); ?>”>  
  11. <?php } ?>  

over,收功!!!

当然我们也可以在首页渲染第一篇文章,这样用户就可以秒开第一篇文章

  1. function Bing_html5_prerender(){    
  2.     query_posts( ‘post_type=post’ );    
  3.     the_post();    
  4.     if( !have_posts() ) return;    
  5.     $url = get_permalink();    
  6.     if( is_singular() ) $url = get_bloginfo( ‘url’ );    
  7.     echo ‘<link rel=“prefetch prerender” href=“‘ . $url . ‘” />';    
  8.     wp_reset_query();    
  9. }    
  10. add_action( ‘wp_head’, ‘Bing_html5_prerender’ );  

根据自己的需要来进行有选择的添加代码!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。