!
也想出现在这里? 联系我们
广告位
当前位置:首页>运营>网站运维>WordPress 文章页添加左右翻页效果

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

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

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

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

single.php 文件修改

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

CSS样式表

将以下代码添加到主题的主样式文件中去,一般为 style.css 文件。DUX主题的话因为主题并没有使用 style.css 文件,所以你需要添加到 main.css 文件中去。

不同的主题使用上面这段样式代码可能会出现错位等问题。我这里是DUX主题默认 1200px 显示时的样式,对于你自己的主题可能需要根据这段代码简单调整一下。另外这里左右的方向图标我使用的是 Font Awesome 字体图标,对于该图标的使用你可以参考我之前发的这两篇进行修改:

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

当然如果你的主题不支持  Font Awesome 并且你也不希望为此多增加一个插件,可以修改上面代码中的对应部分用图片替换。

给TA打赏
共{{data.count}}人
人已打赏
网站运维

DUX主题为亮点功能添加快捷按钮

2022-9-12 12:33:12

网站运维

利用requests中hook实现打印请求包和响应包

2022-9-12 14:30:53

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 [email protected] 或点击右侧 私信:林沐阳 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索