0
(0)

煎蛋站长也是个折腾的主，前段时间煎蛋改版，首页显示缩略图了，最近又看到，他把文章页面加上了个箭头翻页效果，感觉这个还是比较美观的，不过说实话，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-decoration: none;}   
  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-decoration: none;}  

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

声明：本站分享的WordPress主题/插件均遵循 GPLv2 许可协议（免费开源），相关介绍资料仅供学习参考，实际版本可能会因版本迭代或开发者调整而产生变化，如程序中涉及有第三方原创图像、设计模板、远程服务等内容，应获得作者授权后方可使用。本站不提供该程序/软件的产品授权与技术服务，亦不收取相关费用。