为WordPress主题添加文章内容页面左右翻页功能

一个提升网站用户体验的小功能介绍给大家，之前鸟哥的主题上已经添加到，那测速网的免费主题上也有过类似的功能，网络上也有一些相关的介绍文章，原理都是大同小异的，现在分享出来同时添加了前端的显示效果。

显示在左右两侧的上一篇和下一篇真实的使用场景中其实利用率是很底的，就算在按钮上加了一些内容的备注，对于访客来讲也只是一个无目的的未知操作，会无形中增加跳出率，那测速网先简单介绍一下功能实现的原理通过

previous_post_link(‘上一篇<br>%link’) 与 (next_post_link(‘下一篇<br>%link’)1previous_post_link(‘上一篇<br>%link’) 与 (next_post_link(‘下一篇<br>%link’)

获取文章上一页和下一页的链接，然后通过样式来实现不同的效果。
我们需要手动调整下你的wordpress主题当前的single.php文件，将以下代码添加到主题的 single.php 文件中去。

<nav ><nav role="navigation"><div ><div ><?php previous_post_link('%link','<span aria-hidden="true"><i title="上一篇文章"></i></span>',true,'') ?></div><div ><?php next_post_link('%link','<span aria-hidden="true"><i title="下一篇文章"></i></span> ',true,'') ?></div></div></nav></nav>123456789101112<nav ><nav role="navigation"><div ><div ><?php previous_post_link('%link','<span aria-hidden="true"><i title="上一篇文章"></i></span>',true,'') ?></div><div ><?php next_post_link('%link','<span aria-hidden="true"><i title="下一篇文章"></i></span> ',true,'') ?></div></div></nav></nav>

以以下针对下面css属性的美化样式表
需要将下面的代码添加进你当前的wp主题style.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); }12345678910111213141516171819202122232425262728/** 文章页左右翻页按钮 **/ .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); }

需要注意，不同的主题主体结构的宽度是不同的，大家可以按自己的主题宽度数值进行修改，测速网提供给的参考为1200px。同时呢，这里的左右翻页按钮使用的是Font Awesome字体图标，关于字体图标的使用方法测速网在之前有讲过，怎样在worpdress中使用Font Awesome字体图标当然如果你不喜欢这组图标你也可以修改上面代码中的对应部分进行替换。

上一篇：最新WordPress文章调用函数query_posts用法综合解析

下一篇：wordpress如何通过分类ID调用文章列表

---

wordpress主题