^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助,如果有代码出错,请联系站长解决
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 8年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 腾讯云3年2核2G新品轻量限时特惠只需408元

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

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

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

2 核 2G 限时特惠 396 元/3 年    宝塔建站 10850 大礼包

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 即可。

陌小雨是添加在下面代码的位置,你也可以 :mrgreen:

<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 的百分比即可。

赠人玫瑰,手有余香。