zoukankan      html  css  js  c++  java
  • wordpress文章页两侧添加分页导航箭头

    分页导航 如果添加在文章页的两侧,很方便读者翻阅,小编发现好多站长的博客都添加了这一功能,百度了一下,就是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;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;}
  • 相关阅读:
    CF809E Surprise me!
    2019-4-12-WPF-绑定的默认模式
    2019-4-12-WPF-绑定的默认模式
    2019-2-28-C#-16-进制字符串转-int-
    2019-2-28-C#-16-进制字符串转-int-
    2019-10-23-WPF-使用-SharpDx-异步渲染
    2019-10-23-WPF-使用-SharpDx-异步渲染
    2019-8-31-ASP.NET-Core-开启后台任务
    2019-8-31-ASP.NET-Core-开启后台任务
    2019-8-24-win10-uwp-读取文本GBK错误
  • 原文地址:https://www.cnblogs.com/ricksteves/p/10285353.html
Copyright © 2011-2022 走看看