预加载,听名字就很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’ );  

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

发表回复

后才能评论

评论(10)