WordPress文章页左右两侧添加上下文翻页箭头按钮

我不记得WordPress文章页左右两侧的上下文翻页箭头是从什么时候开始流行,不过我是从卢松松博客那里看到这个功能,原先我也一直都懒得折腾,直到无意中看到知更鸟博客的文章页也添加了这个上下文翻页功能,所以今天也顺便折腾一下,还是挺简单的。

WordPress文章页左右两侧添加上下文翻页箭头按钮

百度过相关内容,但是原先很多博客分享的技术都涉及到JS技术,今天研究了一番,其实实现这个WordPress文章页左右两侧的上下文翻页功能,根本就不需要用到JS技术,只需要用到几行代码和相应的CSS样式即可。

具体实现步骤如下(以Unite主题为例说明):</h6

1、打开Unite主题文件夹的single.php文件,找到以下代码:

  1. <nav class=“nav-single”>
  2.     <?php previous_post_link(‘<strong>上一篇:</strong> %link’,’%title’,true,”) ?>
  3.     <?php next_post_link(‘<br/><strong>下一篇:</strong> %link’,’%title’,true,”) ?>
  4.     <div class=“clear”>>
  5. </nav>

</div

在上述代码下方添加以下代码:

  1. <nav class=“nav-single-c”>
  2.     <nav class=“navigation post-navigation” role=“navigation”>
  3.         <h6 class=“screen-reader-text”>文章导航</h6>
  4.         <div class=“nav-links”>
  5.             <div class=“nav-previous”>
  6.                 <?php previous_post_link(‘%link’,'<span class=“meta-nav-r” aria-hidden=“true”><</span>’,true,”) ?>
  7.             >
  8.             <div class=“nav-next”>
  9.                 <?php next_post_link(‘%link’,'<span class=“meta-nav-l” aria-hidden=“true”>></span> ‘,true,”) ?>
  10.             >
  11.         >
  12.     </nav>
  13. </nav>

</div

2、在Unite主题文件夹的style.css文件后面添加以下代码:

  1. /** 文章页左右翻页按钮 **/
  2. .nav-single-c a {
  3.     font-size: 50px;
  4.     color: #b6b6b6;
  5.     text-align: center
  6. }
  7. .nav-single-c a:hover {
  8.     color: #555
  9. }
  10. .meta-nav-l {
  11.     position: fixed;
  12.     right: 0;
  13.     top: 45%;
  14.     width: 50px
  15. }
  16. .meta-nav-r {
  17.     position: fixed;
  18.     left: 0;
  19.     top: 45%;
  20.     width: 50px
  21. }
  22. @media screen and (max-width:1300px) {
  23.     .nav-single-c a {
  24.         display: none
  25.     }
  26. }

</div

至此,已经成功实现WordPress文章页左右两侧添加上下文翻页的功能。这个是比较简陋的,因为那个左右箭头是用英文状态的小于和大于号来代替的。如果我们使用了Font Awesome 4 Menus插件为导航菜单添加过个性化图标,那么我们就可以用个性化图标来代替那个小于号和大于号。只需要把第一步的代码改为以下代码即可:

  1. <nav class=“nav-single-c”>
  2.     <nav class=“navigation post-navigation” role=“navigation”>
  3.         <h6 class=“screen-reader-text”>文章导航</h6>
  4.         <div class=“nav-links”>
  5.             <div class=“nav-previous”>
  6.                 <?php previous_post_link(‘%link’,'<span class=“meta-nav-r” aria-hidden=“true”><i class=“fa fa-angle-left”></i></span>’,true,”) ?>
  7.             >
  8.             <div class=“nav-next”>
  9.                 <?php next_post_link(‘%link’,'<span class=“meta-nav-l” aria-hidden=“true”><i class=“fa fa-angle-right”></i></span> ‘,true,”) ?>
  10.             >
  11.         >
  12.     </nav>
  13. </nav>
你可能感兴趣的文章
  • 红米NOTE系统升级失败的解决办法
  • 利用Nana主题友情链接模板做一个常用主页
  • 免费响应式zblogPHP主题zbpNana使用指南
  • OPPO R11如何查看黑名单被拦截的来电和短信?
  • 百度云加速免费CDN体验 访问速度提升67%
  • 纯代码给WordPress侧边栏小工具添加幻灯片功能
  • 为WordPress站点添加简繁转换功能的图文教程
  • WordPress如何去掉分类目录链接中category分类标志

</p

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-06-23 05:33:13
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[QQ客服]
2781198
加我微信
[电话联系]
13585372227
[电子邮件]
chaoneo@163.com
取消

选择聊天工具: