码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-01-17 23:47:09      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:span   asc   html   find   fan   foo   rev   footer   pre   

分页导航 如果添加在文章页的两侧,很方便读者翻阅,小编发现好多站长的博客都添加了这一功能,百度了一下,就是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文章页两侧添加分页导航箭头

标签:span   asc   html   find   fan   foo   rev   footer   pre   

原文地址:https://www.cnblogs.com/ricksteves/p/10285353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!