1. 程式人生 > >wordpress文章頁兩側添加分頁導航箭頭

wordpress文章頁兩側添加分頁導航箭頭

posit ext 文章 ali eval lock code div previous

分頁導航 如果添加在文章頁的兩側,很方便讀者翻閱,小編發現好多站長的博客都添加了這一功能,百度了一下,就是JS和css的功能,經過測試成功,分享一下流程。

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;}

wordpress文章頁兩側添加分頁導航箭頭