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

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

一、功能简单，但是非常实用，变化不多，提供上、下篇的题目以及链接地址，在需要在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

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

1. hi says:

   July 18, 2016 at 8:15 PM

   测试评论

   Reply

Leave a Reply