摘要：一个提升网站用户体验的小功能介绍给大家，之前鸟哥的主题上已经添加到，那大挖的免费主题上也有过类似的功能，网络上也有一些相...
一个提升网站用户体验的小功能介绍给大家，之前鸟哥的主题上已经添加到，那大挖的免费主题上也有过类似的功能，网络上也有一些相关的介绍文章，原理都是大同小异的，现在分享出来同时添加了前端的显示效果。
显示在左右两侧的上一篇和下一篇真实的使用场景中其实利用率是很底的，就算在按钮上加了一些内容的备注，对于访客来讲也只是一个无目的的未知操作，会无形中增加跳出率，那大挖先简单介绍一下功能实现的原理通过
|
1 |
previous_post_link(‘上一篇<br>%link’) 与 (next_post_link(‘下一篇<br>%link’) |
获取文章上一页和下一页的链接，然后通过样式来实现不同的效果。
我们需要手动调整下你的wordpress主题当前的single.php文件，将以下代码添加到主题的 single.php 文件中去。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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属性的美化样式表
需要将下面的代码添加进你当前的wp主题style.css文件中，
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/** 文章页左右翻页按钮 **/ .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字体图标当然如果你不喜欢这组图标你也可以修改上面代码中的对应部分进行替换。
