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

115资源网 2022年5月11日实用教程, 技术分享浏览：43 0

一个很小的功用，可是关于提高网站漂亮性与交互性觉得仍是很有用处的，网上有许多相关的文章，代码也迥然不同，这儿权当对本人主题批改及 WordPress 学习的一个小小的记载。下面是前端闪现作用，大家可以先看下：

其实关于一些包含上一篇下一篇按钮的主题来说，其完结方法与该方法相同，都是通过 previous_post_link(‘上一篇
%link’) 与 (next_post_link(‘下一篇
%link’) 获取的当时文章前后两篇文章的链接,然后通过批改对应的样式来完结不同的展现的。既然如此咱们只需求批改single.php 文件与 css 样式文件即可，同样的批改之前仍是期望大家备份一下文件以防误操作惹起的网站毛病。

single.php 文件批改

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


    
        
            
                <?php previous_post_link(\'%link\',\'\',true,\'\') ?>
            
            
                <?php next_post_link(\'%link\',\' \',true,\'\') ?>

CSS样式表

将以下代码添加到主题的主样式文件中去，普通为 style.css 文件。DUX主题的话因为主题并没有运用 style.css 文件，所以你需求添加到 main.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); }

不同的主题运用上面这段样式代码可能会呈现错位等问题。我这儿是DUX主题默许 1200px 闪现时的样式，关于你本人的主题可能需求依据这段代码简单调整一下。另外这儿左右的方向图标我运用的是 Font Awesome 字体图标，关于该图标的运用你可以参考我之前发的这两篇停止批改：

Font Awesome——为站点添加个性化图标
Font Awesome 4 Menus——运用图标字体就是这么简单

当然假设你的主题不支持 Font Awesome 而且你也不期望为此多添加一个插件，可以批改上面代码中的对应部分用图片交换。

single.php 文件批改

CSS样式表

相关文章