1. David Wu首页
  2. WordPress
  3. WordPress安装教程

WordPress 文章页添加左右翻页效果-WordPress开发教程

一个很小的功能,但是对于提升网站美观性与交互性感觉还是很有用处的,网上有很多相关的文章,代码也大同小异,这里权当对自己主题修改及 WordPress 学习的一个小小的记录。下面是

一个很小的功能,但是对于提升网站美观性与交互性感觉还是很有用处的,网上有很多相关的文章,代码也大同小异,这里权当对自己主题修改及 WordPress 学习的一个小小的记录。下面是前端显示效果,大家可以先看下:

其实对于一些包含上一篇下一篇按钮的主题来说,其实现方法与该方法相同,都是通过 previous_post_link(‘上一篇<br>%link’) 与 (next_post_link(‘下一篇<br>%link’) 获取的当前文章前后两篇文章的链接,然后通过修改对应的样式来实现不同的展示的。既然如此我们只需要修改single.php 文件与 CSS 样式文件即可,同样的修改之前还是希望大家备份一下文件以防误操作引起的网站故障。

single.php 文件修改

将以下代码添加到主题的 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>
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 并且你也不希望为此多增加一个插件,可以修改上面代码中的对应部分用图片替换。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/121582

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注