wordpress文章页两侧添加分页导航箭头

1、添加Js
headr.php或者footer.php添加以下js,建议添加在footer.php模板的底部。

  <?php if ( is_single() ) { ?>   
	<script type="text/javascript" charset="utf-8">   
           $(function(){   
           $("#btn_page_prev,#btn_page_next").hover(function(){$(this).find("span").show();});   
          });   
        </script>   
<?php } ?>

2、在文章页single.php添加html
在文章页面底部合适的板块添加以下代码

 <span id="btn_page_prev"><?php previous_post_link( '%link', '<span id="fanye"> < </span>' ); ?></span>   
 <span id="btn_page_next"><?php next_post_link( '%link', '<span id="fanye"> > </span>' ); ?></span>

3、在style.css添加css代码

  1. /*文章侧边翻页*/  
  2. #fanye {font-size:30px;color:#ccc;line-height:24px;width:24px;}   
  3. #btn_page_next{
  4. 		cursor:pointer;
  5. 		display:inline-block;
  6. 		min-height:24px;
  7. 		width:3%;
  8. 		position:fixed;
  9. 		_position:absolute;top:360px;
  10. 		_top:expression(eval(document.documentElement.scrollTop));
  11. 		right:0;		
  12. 		z-index:3;
  13. 		text-align:center;
  14. }   
  15. #fanye:hover{color:#666;}
  16. #btn_page_next a:hover{text-decoration:none;display:inline-block;}   
  17. #btn_page_prev{cursor:pointer;
  18. 		display:inline-block;
  19. 		min-height:24px;
  20. 		width:3%;
  21. 		position:fixed;
  22. 		_position:absolute;
  23. 		top:360px;
  24. 		_top:expression(eval(document.documentElement.scrollTop));
  25. 		left:0;	
  26. 		z-index:3;
  27. 		text-align:center;
  28. }   
  29. #btn_page_prev a:hover{text-decoration:none;display:inline-block;}

至于字体的大小,颜色,距离顶部的位置,自己修改css就可以了。


发布日期:

所属分类: Wordpress 综合 标签: