WSONX.COM
心之所愿,无所不成

WordPress 文章页添加左右翻页效果

征求热心网友的 [投稿] ,一起为美好的网络无私分享世界加油!

用作存档学习,直接上代码,方向图标使用的是 Font Awesome 字体图标

将以下代码添加到主题的 single.php 文件中去,这个对添加位置没什么硬性要求,后面会通过 CSS 样式控制其显示。

<nav class="nav-single-c">
    <nav class="navigation post-navigation" role="navigation">
        <div class="nav-links">
            <div class="nav-previous">
                <?php previous_post_link('%link','<span class="meta-nav-r" aria-hidden="true"><i class="fa fa-angle-left fa-3x" title="上一篇文章"></i></span>',true,'') ?>
            </div>
            <div class="nav-next">
                <?php next_post_link('%link','<span class="meta-nav-l" aria-hidden="true"><i class="fa fa-angle-right fa-3x" title="下一篇文章"></i></span> ',true,'') ?>
            </div>
        </div>
    </nav>
</nav>

将以下代码添加到主题的主样式文件中去,一般为 style.css 文件。

/** 文章页左右翻页按钮 **/
 .nav-single-c a {
 font-size: 66px;
 color: #b6b6b6;
 text-align: center
 }
 .nav-single-c a:hover {
 color: #555
 }
 .meta-nav-l {
 position: fixed;
 right: 2.5%;
 top: 40%;
 width: 36px
 }
 .meta-nav-r {
 position: fixed;
 left: 0%;
 top: 40%;
 width: 36px;
 }
 @media screen and (max-width:1200px) {
 .nav-single-c a {
 display: none
 }
 }
 .fa-angle-right{ color: rgba(200, 200, 200, 0.8); }
 .fa-angle-left{ color: rgba(200, 200, 200, 0.8); }

原文:https://blog.quietguoguo.com/2222.html


赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《WordPress 文章页添加左右翻页效果》| 南星博客
文章链接:https://wsonx.com/archives/587.html
本站內容大部分来源于网络,仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。如有侵权内容请留言来信告知,本站將会立即处理 E-mail:gdsuiyuan@163.com

征求热心网友的 [投稿] ,一起为美好的网络无私分享世界加油!
觉得不错就分享给朋友吧➤

评论 抢沙发

#点我快捷打卡#

  • 昵称 (必填)
  • 邮箱 (必填)
  • Q Q(选填)
  • 网址