..start..fly..

扫一扫
Guestbook

Home / PHP & Wordpress / 为wordpress的文章页面添加”上一篇“和“下一篇”功能

<< 威能(Vaillant)燃气热水器F.28错误修复(图文)wordpress精简版jquery暗箱图片效果插件simple-colorbox >>

绝大多数的wordpress主题在文章的页面是包含了“上一篇”和“下一篇”的按钮的,该小细节极大的提高了用户体验。本站之主题由于没有内置该功能,所以只能自己添加,本站效果如下:

PN

其实可以通过两种方法实现:

一、功能简单,但是非常实用,变化不多,提供上、下篇的题目以及链接地址,在需要在wordpress的主题根目录中的single.php的合适位置添加如下代码即可:

  1. <h4>
  2. <div class=“alignleft”><?php previous_post_link(‘&laquo; &laquo; %link’); ?></div>
  3. <div class=“alignright”><?php next_post_link(‘%link &raquo; &raquo; ‘); ?></div>
  4. </h4>

二、功能稍复杂,可以通过CSS效果达到与wordpress主题更高的融合效果,并可以扩展到其他功能。

1.在wordpress的主题根目录的function.php文件中添加如下调用代码:

  1. function st_prev_next_post() {
  2. $prev = get_previous_post();
  3. $next = get_next_post();
  4. $prev_link = $prev ? ‘<a class=“p tooltip” title=“‘ . __( ‘Previous’, ‘strictthemes’ ) . ‘” href=“‘ . get_permalink( $prev->ID ) . ‘”>’ . $prev->post_title . ‘</a>’ : ;
  5. $next_link = $next ? ‘<a class=“n tooltip” title=“‘ . __( ‘Next’, ‘strictthemes’ ) . ‘” href=“‘ . get_permalink( $next->ID ) . ‘”>’ . $next->post_title . ‘</a>’ : ;
  6. if ( $prev_link || $next_link ) {
  7. return ‘<div id=“pre_next_post”>’ . $prev_link . $next_link . ‘<div class=“clear”><!– –></div></div>’; }
  8. else {
  9. return; }
  10. }

2.然后同样在wordpress的主题根目录中的single.php的合适位置添加如下代码:

  1. <?php
  2. echo st_prev_next_post();
  3. ?>

3.以下是供大家参考的CSS,可以根据大家的喜好和主题实际情况修改。

  1. #pre_next_post {
  2. position: relative;
  3. font-size: 1.2em;
  4. line-height: inherit;
  5. margin: 2px 10 10;
  6. padding: 1.5em 50px;
  7. border-top: 1px solid rgba(0,0,0,0.1);
  8. border-bottom: 1px solid rgba(0,0,0,0.1);
  9. }
  10. .ie8 #pre_next_post {
  11. background: url(‘http://www.sky.gs/wp-content/themes/office/images/line-light.png’);
  12. }
  13. #pre_next_post:before {
  14. position: absolute;
  15. content: ;
  16. display: block;
  17. top: 0;
  18. left: 50%;
  19. background: rgba(0,0,0,0.1);
  20. width: 1px;
  21. height: 100%;
  22. }
  23. #pre_next_post a {
  24. position: relative;
  25. display: inline-block;
  26. max-width: 40%;
  27. }
  28. #pre_next_post a.p {
  29. float: left;
  30. }
  31. #pre_next_post a.n {
  32. float: right;
  33. text-align: right;
  34. }
  35. #pre_next_post .p:before,
  36. #pre_next_post .n:before {
  37. position: absolute;
  38. top: 0.25em;
  39. font-family: ‘StrictThemes’;
  40. font-size: 16px;
  41. speak: none;
  42. font-style: normal;
  43. font-weight: normal;
  44. font-variant: normal;
  45. text-transform: none;
  46. line-height: 1;
  47. color: rgba(0,0,0,0.3);
  48. width: 16px;
  49. height: 16px;
  50. -webkit-font-smoothing: antialiased;
  51. -moz-osx-font-smoothing: grayscale;
  52. }
  53. #pre_next_post .p:before {
  54. content: ‘\e60d’;
  55. left: -25px;
  56. }
  57. #pre_next_post .n:before {
  58. content: ‘\e688’;
  59. right: -25px;
  60. }

 

Related Posts

转载原创文章请注明,转载自:SKY..fly..[www.sky.gs]

本文链接: https://www.sky.gs/websites/phpwordpress/wordpress-single-page-previous-next.html

QR:  为wordpress的文章页面添加”上一篇“和“下一篇”功能

One Response to “为wordpress的文章页面添加”上一篇“和“下一篇”功能”

  1. hi says:

    测试评论

Leave a Reply

Code (☆)0+9=?


Websites powered by Wordpress5.7 Copyright © 2009-2021 - All Rights Reserved   SKY..fly..