首页 仿站课堂 怎么实现wordpress...

怎么实现wordpress文章两侧箭头分页

作者:

修改日期:

煎蛋站长也是个折腾的主,前段时间煎蛋改版,首页显示缩略图了,最近又看到,他把文章页面加上了个箭头翻页效果,感觉这个还是比较美观的,不过说实话,wordpress就是越折腾越好玩,老老实实使用模板,那不是wordpress爱好者!

看到这个效果,小川就有些技痒了,决定把这个效果仿下来,以便用在后续的主题制作中,如果你也需要,那就按照下面的教程一步步操作吧,真的很简单哦:
效果演示:http://jandan.net/2012/07/30/german-town-reclaim-debt.html。
复制链接到浏览器,然后把鼠标移到文章侧边的,你会看到一个大大的箭头,点击就可以实现翻页了,下面按照以下教程给你的网站也加一个这样的效果吧:
1、第一步需要确认下你的主题是否开启了google的Jquery特效,判断方法是打开主题文件中的header.php文件,找找看有没有以下代码:

  1. <script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script>  

如果没找到就自己在之前加上这一句即可。
2、打开全站文件,所谓全站文件必须是在网站的每个页面中都可以显示的,比如头部(header.php)、底部(footer.php)等,但是为了提高用户体验度,尽量把js加载文件放在底部文件中,因为这样会使网站底部以上更快加载,可以减少网站跳出率,这里我们在footer.php中加入以下js特效代码:

  1. <?php if ( is_single() ) { ?>   
  2. <script type=“text/javascript” charset=“utf-8”>   
  3. $(function(){   
  4. $(“#btn_page_prev,#btn_page_next”).hover(function(){$(this).find(“span”).show();},function(){$(this).find(“span”).hide();});   
  5. });   
  6. </script>   
  7. <?php } ?>  

3、调用分页代码,在你的single.php,也就是文章模板中,把之前的上一页和下一页代码替换为以下代码:

  1. <span id=“btn_page_prev”><?php previous_post_link( ‘%link’, ‘<span id=“fanye”>‹</span>’ ); ?></span>   
  2. <span id=“btn_page_next”><?php next_post_link( ‘%link’, ‘<span id=“fanye”>›</span>’ ); ?></span>  

4、这个时候你不要匆忙的刷新页面,因为你会发现,效果还是没有显示,那是因为你缺少了最重要的一步,没有把翻页的样式写入,我这里有一段测试的样式,你可以直接复制到你的style.css文件中:

  1. /*文章侧边翻页*/  
  2. #fanye {font-size:120px;color:#FF4F73;line-height:160px;width:50px;display:none;}   
  3. #btn_page_next{cursor:pointer;display:block;min-height:600px;width:9%;position:fixed;_position:absolute;top:150px;_top:expression(eval(document.documentElement.scrollTop));rightright:0;padding-top:150px;z-index:3;text-align:center;}   
  4. #btn_page_next a:hover {text-decorationnone;}   
  5. #btn_page_prev{cursor:pointer;display:block;min-height:600px;width:9%;position:fixed;_position:absolute;top:150px;_top:expression(eval(document.documentElement.scrollTop));left:0;padding-top:150px;z-index:3;text-align:center;}   
  6. #btn_page_prev a:hover {text-decorationnone;}  

OK,大功告成,你就不要在我文章的侧边寻觅了,因为我还没来得及加上就被你发现了,效果还是去煎蛋网看看吧。