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

分页导航 如果添加在文章页的两侧，很方便读者翻阅，小编发现好多站长的博客都添加了这一功能，百度了一下，就是JS和css的功能，经过测试成功，分享一下流程。你可以看看效果：511遇见

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代码

/*文章侧边翻页*/  
#fanye {font-size:30px;color:#ccc;line-height:24px;width:24px;}   
#btn_page_next{cursor:pointer;display:inline-block;min-height:24px;width:3%;position:fixed;_position:absolute;top:360px;_top:expression(eval(document.documentElement.scrollTop));right:0;		z-index:3;text-align:center;
}   
#fanye:hover{color:#666;}
#btn_page_next a:hover{text-decoration:none;display:inline-block;}   
#btn_page_prev{cursor:pointer;display:inline-block;min-height:24px;width:3%;position:fixed;_position:absolute;top:360px;_top:expression(eval(document.documentElement.scrollTop));left:0;	z-index:3;text-align:center;
}   
#btn_page_prev a:hover{text-decoration:none;display:inline-block;}

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

参考:

? 自定义函数实现wordpress面包屑导航

? WordPress翻页链接添加title属性