^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 当你决定出发,最难的就已经过去了
  • 以前我是很拒绝使用插件的,现在我却很喜欢,也许这是一种成熟
  • 网站内容如果对你有帮助,可以打赏支持下哦

Dux主题添加文章翻页按钮,方便的浏览上一篇和下一篇文章

阿里云服务器9.9

Dux 主题最近更新到了 1.5 版本,不过和以前版本一样,Dux 主题 1.5 文章页还是没有翻页按钮,也就是我们熟知的上一篇,下一篇,不知道这算不算这是一个 bug 哈。今天陌小雨就教大家添加类似下面的翻页按钮,可以让读者方便的浏览下一篇文章和上一篇文章。

Dux主题添加文章翻页按钮,方便的浏览上一篇和下一篇文章

1、在主题 single.php 适当位置添加下面代码:

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

提示:如果需要修改按钮的大小,只需要调整上面代码中的 fa-3x,修改为 fa-2x 即可。

陌小雨是添加在下面代码的位置,你也可以 Dux主题添加文章翻页按钮,方便的浏览上一篇和下一篇文章

<div class="article-tags"><?php the_tags('标签:','',''); ?></div>

2、添加相应的 css 代码

(值得注意的是,dux 主题添加 css 代码不能直接添加到 style.css 中,需要添加到 css 文件夹下面的 main.css 文件里面。)

/** 文章页左右翻页按钮 **/
    .nav-single-c a {
        font-size: 50px;
        color: #b6b6b6;
        text-align: center
    }
    .nav-single-c a:hover {
        color: #555
    }
    .meta-nav-l {
        position: fixed;
        right: 10%;
        top: 45%;
        width: 50px
    }
    .meta-nav-r {
        position: fixed;
        left: 10%;
        top: 45%;
        width: 50px
    }
    @media screen and (max-width:1300px) {
        .nav-single-c a {
            display: none
        }
    }
    .fa-angle-right{color: rgb(43, 181, 236);}
    .fa-angle-left{color: rgb(236, 60, 22);}

需要注意的是,陌小雨因为设置了 dux 主题网页最大宽度为 980px,你可以根据自己的实际需求,修改上面代码中的 left 和 right 的百分比即可。

如果本文章对你有帮助,请支持下我,谢谢!

展开阅读全文

扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来

热门推荐

小雨导购

如有疑问,请前往问答中心反馈!

反馈
  1. 淘宝店铺装修
    求dux1.5主题一份,学习下,谢谢楼主。
  2. 夏日博客
    这主题貌似不少人都在用吧。
    • 陌小雨网站管理员
      @夏日博客 恩,主题本身很优秀,带了用户中心,用的人自然多了。
  3. 泉州开发公司
    谢谢分享。
  4. BanYuner
    这个很久之前就已经用上了 我看了一下源代码 貌似DUX自身本来是有这个功能的 但是不知道为什么没有能实现
    • 陌小雨网站管理员
      @BanYuner 嗯,相比你的我给图标加了一个title属性,加了一个颜色、然后稍微调大了点。
    • 陌小雨网站管理员
      @BanYuner 源代码中没有吧
  5. 软膜天花
    这个有用,测试一下先!看看我的博客合不合用!签到成功!签到时间:下午8:39:43,陌小雨,你很棒!一起加油哦哦~